Quantcast
Channel: DevExpress Support Center (Examples)
Viewing all 7205 articles
Browse latest View live

How to add DragAndDrop capability to the detail grid

$
0
0

DXGrid natively supports Drag&Drop for detail grids starting with v17.2. It is sufficient to enable the DataViewBase.AllowDragDrop option to activate the drag-and-drop functionality. Please see the Drag-and-Drop help topic for more information.


This example demonstrates how to add the DragAndDrop capability to the detail grid. Use it if you are working with a version earlier than v17.2.
The example contains a custom GridDragDropManager class where the CalcDraggingRows method is overridden to obtain a selected row. Also, the manager's DragOver and Drop events are handled. The target position to which a selected row should be dropped is calculated in the Drop event handler.

Question Comments

Added By: nikoloo4 at: 9/29/2015 4:35:05 AM    

The example doesn't build.
Problems:
1. BanDrop method is not implemented.
2. There is no GridControl variable in the class.

Could you please take a look at it?

Added By: Kirill (DevExpress Support) at: 10/1/2015 1:11:00 AM    

Hello,
Would you please clarify what version of our controls you use? I've tested this example on versions 14.1.8, 14.1.11, 14.2.4, 14.2.7, 15.1.4 and 15.1.7 - the example is built correctly on these versions.


Thanks,
KirillAdded By: Merlijn at: 1/7/2016 2:37:50 AM    

Had the same issue as nikoloo4, using version 15.1.2, after upgrading to 15.2.4 it seems to build.

Added By: Alexander S (DevExpress Support) at: 1/8/2016 12:57:52 AM    

Hello,

To process your recent post more efficiently, I created a separate ticket on your behalf: T331796: It is impossible to compile an example in older builds. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.


How to support MVVM and provide a custom style for DocumentPanel (Google Chrome-like "New Tab" button)

$
0
0

This sample illustrates how to use MVVM and provide your own custom style for a DocumentPanel. A document panel header includes a "new tab" button like Google Chrome.

The example implements a custom style for Tab Items in document groups.

How to create a Column Chooser with column filtering

$
0
0

This example illustrates how to filter a list of columns and bands in a grid's Column Chooser.

DXGrid implements this functionality out of the box starting with v17.2. No coding is required. You can hide the default search box by setting the TableView.ColumnChooserColumnDisplayMode property to ShowHiddenColumnsOnly.
The examples for previous versions show how to add a TextBox to a ColumnChooser and apply filtering of its columns list.

WPF Spreadsheet - How to perform a mail merge

$
0
0
This example demonstrates how to use the Spreadsheet Mail Merge functionality to automatically generate a document based on data retrieved from a data source. 
The mail merge template is created in code when the application starts. The IWorkbook.MailMergeDataSource property specifies the data source. The IWorkbook.GenerateMailMergeDocuments method accomplishes mail merge and returns the resulting workbook.
The Mail Merge tab is added to the SpreadsheetControl's ribbon to provide end-users with capabilities to select the mail merge mode and preview the merged document. If the Multiple Documents mode is used, only the first merged workbook is shown in the preview window.

How to programmatically fill a PDF Form with values

$
0
0
The example shows how to fill an interactive form using field names.

The Universal Subscription or an additional Document Server Subscription is required to use this example in production code. Please refer to the DevExpress Subscription page for pricing information.

Question Comments

Added By: Pete Johnston 1 at: 3/22/2018 7:41:26 AM    Can you expand this example to show how to set values for fields other than text? I.e. I need to be able to examine a field and based on its type - radio button, check box, etc. - be able to set the value appropriately. It would be very helpful to see sample code that sets those other types of fields. Thanks!

How to implement a Theme Selector control similar to DevExpress Demo (Old Style)

$
0
0

The sample provides two web user controls (ThemeSelector, ThemeParametersSelector) that can be used in your project. To use these controls in your solution, execute these steps:

1. Copy the following files, taking into account their location:

   a. An xml file with theme groups and themes: Themes.xml;
   b. Classes that are responsible for getting and presenting data from Themes.xml: ThemeGroupModel.cs, ThemeModel.cs, ThemeModelBase.cs, ThemesModel.cs;
   c. sprite.svg with images;
   d. sprite.css and StyleSheet.css with CSS classes;
   e. Script.js with client-side methods;   
   f. ThemeSelector.ascx, ThemeSelector.ascx.cs, ThemeParametersSelector.ascx and ThemeParametersSelector.ascx.cs;
   g. Utils.cs - a class that is responsible for manipulations with themes.

2. Register the ThemeSelector and ThemeParametersSelector web user controls in your web.config file:

[ASPx]
<pages><controls> ...<addsrc="~/UserControl/ThemeParametersSelector.ascx"tagName="ThemeParametersSelector"tagPrefix="dx"/><addsrc="~/UserControl/ThemeSelector.ascx"tagName="ThemeSelector"tagPrefix="dx"/></controls></pages>

3. In the sample, a chosen theme is written to a cookie. To apply this theme from the cookie, subscribe to the Application.PreRequestHandlerExecute event in your Global.asax file and handle it in the following manner:

[C#]
protectedvoidApplication_PreRequestHandlerExecute(objectsender,EventArgse){DevExpress.Web.ASPxWebControl.GlobalTheme=Utils.CurrentTheme;Utils.ResolveThemeParametes();}

4. Add the ThemeSelector and ThemeParametersSelector user controls to ASPxPanel of the master page:

[ASPx]
<formid="form1"runat="server"><header><dx:ASPxPanelrunat="server"ClientInstanceName="TopPanel"CssClass="header-panel"FixedPosition="WindowTop"EnableTheming="false"><PanelCollection><dx:PanelContent><aclass="right-button icon cog right-button-toggle-themes-panel"href="javascript:void(0)"onclick="DXDemo.toggleThemeSettingsPanel(); return false;"></a></dx:PanelContent></PanelCollection></dx:ASPxPanel></header><divclass="main-content-wrapper"><sectionclass="top-panel clearfix top-panel-dark"><dx:ASPxButtonrunat="server"Text="Change Theme Settings"CssClass="theme-settings-menu-button adaptive"EnableTheming="false"AutoPostBack="false"ImagePosition="Right"UseSubmitBehavior="false"><ImageSpriteProperties-CssClass="icon angle-down theme-settings-menu-button-image"/><FocusRectBorderBorderWidth="0"/><ClientSideEventsClick="DXDemo.toggleThemeSettingsPanel"/></dx:ASPxButton></section><dx:ASPxPanelrunat="server"ClientInstanceName="ThemeSettingsPanel"CssClass="theme-settings-panel"FixedPosition="WindowRight"Collapsible="true"EnableTheming="false"ScrollBars="Auto"><SettingsCollapsingAnimationType="Slide"ExpandEffect="PopupToLeft"ExpandButton-Visible="false"/><Styles><ExpandBarWidth="0"/><ExpandedPanelCssClass="theme-settings-panel-expanded"></ExpandedPanel></Styles><PanelCollection><dx:PanelContent><divclass="top-panel top-panel-dark clearfix"><dx:ASPxButtonrunat="server"Text="Change Theme Settings"CssClass="theme-settings-menu-button"EnableTheming="false"AutoPostBack="false"ImagePosition="Right"HorizontalAlign="Left"UseSubmitBehavior="false"><ImageSpriteProperties-CssClass="icon angle-down theme-settings-menu-button-image"/><FocusRectBorderBorderWidth="0"/><ClientSideEventsClick="DXDemo.toggleThemeSettingsPanel"/></dx:ASPxButton></div><divclass="theme-settings-panel-content"><dx:ThemeSelectorID="ThemeSelector"runat="server"/><%if(Utils.CanApplyThemeParameters){%><dx:ThemeParametersSelectorID="ThemeParametersSelector"runat="server"/><%}%></div></dx:PanelContent></PanelCollection></dx:ASPxPanel></div><divstyle="clear: both;"><asp:ContentPlaceHolderID="ContentPlaceHolder1"runat="server"></asp:ContentPlaceHolder></div></form>

See also:
How to implement a Theme Selector control similar to DevExpress Demo ThemeSelector web user control

How to implement BackstageButtonItem with ToggleButton behavior

$
0
0

This example demonstrates how to implement BackstageButtonItem with ToggleButton behavior.

This functionality is implemented at the BackstageButtonItem's descendant - BackstageCheckItem. BackstageCheckItem changes its toggle state when clicked. The CloseOnToggle option determines whether BackstageViewControl should be closed at this moment.

Grid - How to change a column's filter popup using CustomColumnFilterPopupTemplate

$
0
0

The ColumnBase.CustomColumnFilterPopupTemplate property allows you to use your own template for a column's filter popup. In this example, a custom popup is implemented that provides the capability to filter DateTime columns using a range (From - To). This popup contains two DateEdits.
The custom popup is a ContentControl's descendant with the Filter property. This property is bound to a column's filter.


How to create custom EditSettings

$
0
0
This example demonstrates how to create and use custom EditSettings in GridControl. A TextEditSettings class descendant with a custom EditFont property is created.
Question Comments

Added By: WAGENHEIM Laurent at: 10/9/2015 1:52:08 AM    

Hi,

When using this snippet to make a CustomComboBoxEditSettings I get a NullReferenceException on editSettings.ApplyToEdit(this, true, EmptyDefaultEditorViewInfo.Instance);

If I comment this line of code, everything seems to work fine.

NB : using reflector it seems to crash in this function :

protected internal virtual void UnsubscribeToItemsProviderChanged()
{
   this.ItemsProvider.ItemsProviderChanged -= this.ItemsProviderChangedEventHandler.Handler;
}

Added By: Alexander S (DevExpress Support) at: 10/9/2015 4:28:07 AM    

Hello,

To process your recent post more efficiently, I created a separate ticket on your behalf: NullReferenceException occurs when custom EditSettings are being applied to the editor. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.

Grid - How to customize the appearance of the master-row expand button

$
0
0

This example illustrates how to disable and change the appearance of the master-row Expand button if the Detail View doesn't contain data.

To change the button appearance, apply a custom style with a template to the GridDetailExpandButton type.

How to edit time with DateEdit in Vista mode

$
0
0

This example demonstrates how to implement the time editing in DateEdit's popup. For this, the DateEditCalendar class' descendant is created.

GridView - Simple implementation of an embedded toolbar

OBSOLETE - Calculate total values of bound/unbound columns with sorting and paging on the client

How to use grid (with vertical scrollbar) in Full Screen mode (100% Width and Height)

$
0
0

This example demonstrates how to resize the ASPxGridView control based on the browser window size.

Update:
To keep the visual grid's size intact while adjusting it on the first load, wrap ASPxGridView with a hidden container and show it only after its full initialization and adjustment. For example:

[ASPx]
<divid="gridContainer"style="visibility: hidden"><dx:ASPxGridViewrunat="server"ID="gridView"...> ...</dx:ASPxGridView></div>
[JavaScript]
function OnInit(s, e){ AdjustSize(); document.getElementById("gridContainer").style.visibility = "";}


MVC Version:
How to use the GridView extension in a Full Screen mode (100% browser Width and Height)

See Also:
How to use the GridView extension in a Full Screen mode (100% browser Width and Height)How to use the ASPxPageControl control in a Full Screen mode (100% browser Width and Height)

Question Comments

Added By: neuDev33 at: 5/16/2012 11:48:45 AM    

I'm copy + pasting this code, but the height does not increase to cover the parent control

Added By: just wqq at: 9/18/2012 7:45:13 PM    

DevExpress.Web.ASPxGridView.v8.3 can do this

Added By: Michelle Young at: 7/31/2013 7:46:42 AM    

Visual studio says the code behind method is obsolete and you should now use RegisterBaseScript instead.

Added By: Yevgeniy Reznik at: 7/31/2013 8:45:41 PM    

Can you please update to the latest version of DevExpress?

Added By: Honesto Manlig at: 5/28/2014 9:03:24 PM    

How can I have the columns to be of width they need to be. Except for the last column to be the only one that grows to fill the rest of the gridview. For example, if there's three columns, if first column contains  text, it'll get as wide as it needs to so it does not wrap the text, then second column is a checkbox, so can always be same width, then the last column must get wide enough so that it fills the rest of the grid's width.

Added By: Artem (DevExpress Support) at: 5/29/2014 12:01:42 AM    Hello,

I've moved your question to a separate thread created on your behalf:
How to use the ASPxGridView control (with the enabled vertical scrollbar) in a Full Screen mode (100% browser Width and Height)
Please refer to it for further correspondence.Added By: Satarupa Brahma 1 at: 3/8/2016 10:37:29 AM    It is important to note that the ClientInstanceName needs to be set so that the java script can find the control that needs to be resized.   I struggled with this for several hours before I found the key.Added By: Jonathan Kent at: 9/7/2017 5:05:55 AM    When trying to implement this resolution using Razor it worked fine but I experienced a javascript error when my gridview was editable when clicking on add or update. To resolve the issue I removed all javascript and simply added this line to my gridview implentation;
settings.ClientSideEvents.Init = "function OnInit(s, e) {myGridViewName.SetHeight(Math.max(0, document.documentElement.clientHeight));}";
Added By: Larry (DevExpress Support) at: 9/7/2017 5:28:31 AM    

Hello Jonathan,

Thank you for providing your solution. I believe it may be helpful to other users.

Added By: Patrik Johansson _ at: 11/18/2017 9:05:40 AM    This ticket claims to set widht and height but I can see no code that actually sets the width? Also, I still find it strange that such an obvious feature as to resize the popup window for a very mature control like the ASPxGridView should require this much manual coding even in 2017. Added By: Vova (DevExpress Support) at: 11/20/2017 1:44:43 AM    Hello Patrik,

The Width property is specified in this example. Since it's set to "100%", ASPxGridView occupy all the available space inside its parent container.

Regards,
VovaAdded By: Suman Rayabharapu 1 at: 3/16/2018 7:59:25 AM    How can we implement this using DevExpress MVC gridview control. The idea is keep the paging, add the scroll bar but the height and width of the grid should be automatic based on the availability.

Because we will be using the same URL on a tablet where users can work in portrait or landscape mode.

We are using 17.2.6 version currently using VS 2015. Added By: Lanette (DevExpress Support) at: 3/16/2018 10:32:00 AM    

Hello,

I've created a separate ticket on your behalf (T616870: GridView - How to implement a grid with 100% width and height) regarding this task for MVC. It has been placed in our processing queue and will be answered shortly.

How to reorder GridView rows using buttons or drag-and-drop

$
0
0
This example demonstrates how to move GridView rows using buttons or jQuery UI  Draggable and Droppable plug-ins. To keep the order of rows, it is necessary to set up an extra column to store row order indexes. Then, sort GridView by this column and deny sorting by other columns.

See also:
E4582 - How to reorder ASPxGridView rows using buttons or drag-and-drop
Question Comments

Added By: Nishant Jha 1 at: 6/14/2016 11:44:23 AM    Thanks for this example. It helped me a lot.Added By: Raphael A. at: 11/21/2017 10:10:38 AM    Droppable function is sensible, if you drag and drop a grid view row for one pixel, it will trigger gridview callback. To avoid this, I changed 
[ASPx]
vardraggingSortIndex=ui.draggable.attr("displayIndex");vartargetSortIndex=$(this).attr("displayIndex");gridView.PerformCallback({draggingIndex:draggingSortIndex,targetIndex:targetSortIndex,command:"DRAGROW"});
for this
[ASPx]
vardraggingSortIndex=ui.draggable.attr("displayIndex");vartargetSortIndex=$(this).attr("displayIndex");if(targetSortIndex!==draggingSortIndex){gridView.PerformCallback({draggingIndex:draggingSortIndex,targetIndex:targetSortIndex,command:"DRAGROW"});}

Added By: Vova (DevExpress Support) at: 11/21/2017 11:46:28 PM    

Hello Raphael,

Thank you for sharing your solution with our community! 

Best regards,
Vova

Added By: Ganesh Jagdale at: 3/27/2018 4:29:28 AM    I want to add this functionality. I have merge required code in my project but I am getting TypeError:$(...) droppable is not a function. 
I have added jqueryUi like below, in Layout.cshtml page. Please help me here .. Thanks
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

How to create a PropertyEditor based on the XtraRichEdit control

$
0
0

We are going to provide Rich Text Editor integration in an upcoming release, so this example will be obsoleted. Please refer to the T608185: WinForms Rich Text Editor Module - v18.1 Preview article to see implementation details and provide us with your opinion regarding it.


Take special note that this editor is intended to be used for a simple and most common scenario when only one text property in a Detail View is edited with the help of the XtraRichEdit control (RichEditControl). Other scenarios are not supported in this example and are required to be implemented manually. For example, if there are more than one property, edited with this editor in a Detail View, then there may be problems with merging in ribbons. See the B142856 issue for more detailed information.

Important Notes
1.
 Please take special note that this example is not a complete solution and is supposed to be further tested and modified by you according to your business requirements.

2. The standard XAF Save Action may be activated on the first load in this example, because the MS Word and XtraRichEdit RTF formats are different and thus the object receives a different value on the first value post. Once you save the value in the control's format, it will work as expected. See also the Problem with setting the RtfText in XtraRichEdit and ImmediatePostData with XtraRichEdit tickets for the details on how to improve tracking of changed values in the RichEditControl component.

 

See Also:
Implement Custom Property Editors
How to: Implement a Property Editor for Windows Forms Applications
XtraRichEdit Home
PropertyEditors - Support the XtraRichEdit control.

Question Comments

Added By: Willem de Vries at: 10/24/2012 7:25:46 AM    

After copying the necessary files to my project, i ran into an error in MergeRibbonDetailViewController. I changed the code slightly (in the test):

        private void Frame_TemplateChanged(object sender, EventArgs e) {
            UnMergeRibbon();
            mainRibbonControl = null;
            IClassicToRibbonTransformerHolder form = Frame.Template as IClassicToRibbonTransformerHolder;
            if (form != null && form.RibbonTransformer != null) {
                form.RibbonTransformer.Transformed += RibbonTransformer_Transformed;
            }
        }

Added By: Jerome Pech at: 5/16/2016 12:15:32 PM    Merging the Ribbon does not work if UseOldTemplated = false; is set. 
[C#]
return((XtraFormTemplateBase)(Application.MainWindow.Template)).Ribbon;
causes an error, that DetailFormRibbonV2 can not be converted to XtraFormTemplateBase.

Can you please provide an example how to merge ribbons with the new Ribbon V2 (using 15.2)?











Added By: Dennis (DevExpress Support) at: 5/17/2016 2:49:05 AM    

@Jerome: Thanks for your input. Our team will take it into account. Even though we do not currently have free resources to provide a different example, you can refer to the eXpressApp Framework > Task-Based Help > How to: Access the Ribbon Control article to learn more on how to access the ribbon component and implement this merging yourself (by analogy with what was shown in the original example). Should you experience any difficulties, do not hesitate to submit a separate ticket to discuss your implementation (https://www.devexpress.com/Support/Center/Question/Create).

Added By: Jerome Pech at: 5/17/2016 3:43:53 AM    @Dennis

The link "How to: Access the Ribbon Control" helped me to accomplish my task!

Tanks a lot!

Kind regards Added By: Dennis (DevExpress Support) at: 5/17/2016 4:11:12 AM    @Jerome: Anytime! Feel free to share your Controller here for other XAF users.Added By: Jerome Pech at: 5/17/2016 4:33:04 AM    Sure!

Simply replace
[C#]
if(Application.MainWindow!=null&&Application.MainWindow.Template!=null){return((XtraFormTemplateBase)(Application.MainWindow.Template)).Ribbon;}

with
[C#]
if(Application.MainWindow!=null&&Application.MainWindow.Template!=null&&Frame.TemplateisDetailRibbonFormV2){return((DetailRibbonFormV2)(Frame.Template)).Ribbon;}

Added By: Andrey K (DevExpress Support) at: 3/27/2018 1:40:57 PM    

Hello,

We are going to provide Rich Text Editor integration in an upcoming release, so this example will be obsoleted. Please refer to the T608185: WinForms Rich Text Editor Module - v18.1 Preview article to see implementation details and provide us with your opinion regarding it.
If you have already seen this article, please refer to it again and answer our Q6 question (we added it recently). 

Thanks,
Andrey

How to show the Context Menu in a group footer and set a group summary in a column

$
0
0

Starting with version 16.1 we have implemented the built-in context menu for the group footer.


You can use this example for older versions.

It illustrates how to show the context menu in a group footer and set a group summary in a column.

To implement a custom Context Menu in a group footer, it is necessary to use ASPxPopupMenu and fill its items like in the Context Menu of a grid’s footer.
For this, get the clicked column's index and applied summaries to show the menu's checked items. Then, get item visibility of the Context Menu in the grid's footer and apply it to the custom Context Menu items.
To show the Context Menu in ASPxGridView, enable ASPxGridView's ContextMenu setting.

To get the clicked column's index and applied summaries, handle ASPxGridView’s PreRender and BeforeGetCallBackResult events, build and send a custom class name to the client side by using the GridViewDataColumn.GroupFooterCellStyle.CssClass property. This property includes a custom class name that contains an index and applied summaries of the clicked column. Handle ASPxGridView's client-side ContextMenu event to get the CssClass name by using htmlEvent’s target.classname property. After the custom class name is obtained, show a popup menu under the mouse pointer.
After that, handle ASPxClientPopupMenu's client-side PopUp event. Set the visibility and a checked state of menu items.

To set a checked state of a menu item, use applied summaries that were obtained earlier. 
To set the visibility of menu items like in the menu of the grid’s footer, do the following:
- Use the private ASPxClientGridView.GetFooterContextMenu method to get footer menu item information;
- Iterate through all menu items;
- Use the private ASPxClientGridView.GetItemServerState method to get a footer menu item's visibility and apply it to a custom menu item of the group footer. 

Handle ASPxClientPopupMenu's client-side ItemClick event and send an ASPxGridView callback with a column’s field name where the menu is shown and a clicked item name as parameters. Handle ASPxGridView's CustomCallBack event, parse these parameters there and apply the summaries.

Note: The private ASPxClientGridView.GetFooterContextMenu and ASPxClientGridView.GetItemServerState methods are used internally. Thus, they can be deleted or modified at any time without notification. It is necessary to check an application where this approach is used on every update of DevExpress controls until the functionality to create summary in the group footer is implemented out of the box.

Question Comments

Added By: Xavier AYRAL at: 2/2/2018 7:16:58 AM    Hello,

In the last version 17.2.5 it's seem that ASPxGridView1.GetItemServerState doesn't work.
Could you tell me how can i fix this problème.

Regards
Added By: Lanette (DevExpress Support) at: 2/4/2018 9:06:12 PM    

Hello,

I've created a separate ticket on your behalf (T602925: ASPxGridView - GetItemServerState doesn't work in the latest version) regarding this problem. It has been placed in our processing queue and will be answered shortly.

OBSOLETE - Implementing custom commands and dialogs (v8.1.4 — v10.1.13)

ASPxPivotGrid - How to highlight field and data cells corresponding the hovered cell

$
0
0

ASPxPivotGrid - How to highlight field and data cells corresponding the hovered cell

This example illustrates how to highlight field and data cells corresponding to the hovered cell:
 

Since ASPxPivotGrid does not support this scenario out of the box, the only possible way is implementing this task using jQuery. 

How to use two-way data-bound ASPxGridLookup in edit form of ASPxGridView to edit data

$
0
0

This example shows how to use a two-way data-bound ASPxGridLookup in the edit form of ASPxGridView to update or insert new data.

MVC:
GridView - How to use GridLookup with single selection mode in EditForm
GridView - How to use GridLookup in EditForm in multiple selection mode

Question Comments

Added By: Rabab Siblini at: 7/22/2015 12:43:08 AM    

Hello,
how can I implement this with a row with group Index? as it works only for a non group grid

Added By: Mike (DevExpress Support) at: 7/28/2015 3:39:04 AM    Hello,

I see that you have already created a new ticket regarding this inquiry, and my colleagues have answered it:
T269792: ASPxGridView - How to set a selected value for ASPxGridLookup inside EditItemTemplate if the grid is groupedAdded By: M.A. Verbeek at: 3/29/2018 9:39:51 AM    Hello

Works perfectly!
But.......
Try to implement this with SettingsEditing->Mode=Batch....
This does not work!

Is there a workaround? Or is it not possible at all?

Best regards,
Marcel
Viewing all 7205 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>