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

How to edit multiple values in GridView at the same time

December 22, 2010, 6:58 am
$
0
0


This example demonstrates how to provide the capability to an end-user to edit multiple selected cells values at once:

Question Comments
Added By: Gwan jung at: 6/13/2013 6:28:08 PM    

this code worked perfectly except columns filter exist...

Case :
1. column[0] has filter string "mike"
2. row[0][0] ~ row[10][0] has "mike" value
3. multi select row[1][0] ~ row[4][0]
4. click one of this cells again, delete mike

in that case, mulit edit function work strange....

Added By: Keite Tuane Carvalho at: 2/5/2015 10:15:42 AM    

How I can save these records changed in the database?

Added By: Svetlana (DevExpress Support) at: 2/5/2015 12:45:43 PM    

Hello,

To process your recent post more efficiently, I created a separate ticket on your behalf: T205671: How to save changes from a grid to a data base. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.

Added By: Christian Riis at: 11/24/2016 6:37:35 AM    If you mark multiple cells to change them all, then type in the same text as already in the focused cell, no cells in the selection are changed. Can you fix this?Added By: Alexey Z (DevExpress Support) at: 11/24/2016 8:25:09 AM    

Hello,

I've created a separate ticket on your behalf (T455008: E2779 - If you mark multiple cells to change them all, then type in the same text as already in the focused cell, no cells in the selection are changed). It has been placed in our processing queue and will be answered shortly.

Added By: Nassos Katsaounis at: 12/25/2017 2:29:53 AM    Hello and Merry Christmas!

This is a great piece of code!

May I suggest a small addition to make this even better?

I reckon, that in real-world applications, you most probably wouldn't want to change values of different rows and different columns in one go - only values of the same column in different rows.

To do this, I introduced a private variable of GridColumn type and modified OnCellValueChanged and SetSelectedCellsValues methods to make sure only cells in the same column as the one edited are affected.

It is a little misleading because I wasn't able to figure out how to disallow selection of cells in other columns, but it works (unless you notice something wrong with it).
[VB.NET]
Private EditColumn As GridColumnPrivateSub OnCellValueChanged(ByVal e As CellValueChangedEventArgs)If lockEvents ThenReturnEndIf
        lockEvents = True
        EditColumn = e.Column
        SetSelectedCellsValues(e.Value)
        lockEvents = FalseEndSubPrivateSub SetSelectedCellsValues(ByVal value AsObject)Try
            _View.BeginUpdate()Dim cells() As GridCell = _View.GetSelectedCells()ForEach cell As GridCell In cellsIf cell.Column Is EditColumn Then
                    _View.SetRowCellValue(cell.RowHandle, cell.Column, value)EndIfNext cellCatch ex As ExceptionFinally
            _View.EndUpdate()EndTryEndSub

Best regards,
Nassos


Added By: Nadezhda (DevExpress Support) at: 12/25/2017 4:37:56 AM    

Hello,

I've created a separate ticket on your behalf (GridView - How to select cells of one column). It has been placed in our processing queue and will be answered shortly.

↧
Search

How to enable Drag-and-Drop feature in the TableView

March 27, 2012, 3:59 am
↧
↧

How to enable Drag-and-Drop feature in the TreeListView

March 27, 2012, 3:35 am
↧

How to manually control Drag-and-Drop in the GridControl

March 28, 2012, 2:49 am
$
0
0

This example demonstrates how to customize Drag-and-Drop functionality in the GridControl using Drag-and-Drop-related events.
A drag-and-drop operation changes the Position and Department values depending on the new location of a dropped record.

↧

How to enable Drag-and-Drop feature in the CardView

April 17, 2013, 3:36 am
$
0
0

This example shows how to implement the Drag-and-Drop functionality in the CardView.

This functionality is encapsulated in the CardDragDropManager class. So, all you need to do is to attach this behavior to the GridControl.
Starting from version 17.2, the GridControl ships with native Drag-and-Drop support.

Question Comments
Added By: A Dev at: 10/24/2014 12:19:57 PM    

Where to find the DragDropManagerBase class?

Added By: Ivan (DevExpress Support) at: 10/24/2014 12:47:27 PM    

You can find this class in the C:\Program Files (x86)\<DevExpress folder>\Components\Sources\DevExpress.Xpf.Grid\DevExpress.Xpf.Grid.Extensions\DragDrop\DragDropManager\DragDropManagerBase.cs file. Note that this file will be installed regardless your subscription type. It's available for trial users as well.

Added By: Jobert Galamiton at: 9/21/2016 11:34:35 PM    Hi,

This doesn't work with the latest version. Please advise. Added By: Andrey Marten (DevExpress Support) at: 9/22/2016 1:37:14 AM    

Hello,

I've created a separate ticket on your behalf (T430564: The approach from E4616 does not work in v16.1.6). It has been placed in our processing queue and will be answered shortly.

Thanks,
Andrey

↧
↧

How to use different details depending on data in GridControl's master row

December 25, 2017, 4:48 am
$
0
0

To choose different details for a master row in GridControl, use DetailDescriptorSelector with DetailDescriptorTriggers. Each trigger has the Binding and Value properties which work similarly to corresponding properties in a standard WPF DataTrigger. When a trigger is activated, a corresponding detail descriptor is used.

↧

How to create detail grid with different sets of columns

October 9, 2014, 5:36 am
↧

How to replace the built-in "Insert Merge Field" menu item with a custom one to display the referenced object's properties

December 25, 2017, 5:54 am
$
0
0
This example illustrates how to customize the "Insert Merge Field" menu to display the referenced object's properties with  sub menus. To accomplish this task, it is necessary to replace the built-in InsertMergeFieldItem with a custom one. After a bar item for the nested object's property is clicked, a MERGEFIELD field is created for this property and inserted at the caret position.

See also: How to customize the merge field collection and perform Mail Merge using the IList data source
↧
Search

How to add Incremental Search into GridControl

October 20, 2014, 12:53 am
$
0
0


Starting with v16.1 our GridControl supports Incremental Search out of the box. To enable this functionality, it's sufficient to set the IncrementalSearchMode property to Enabled in your GridControl's view. To learn more, please refer to the following documentation article: Incremental Search.

In previous versions, you can use the approach illustrated in this example.

To provide this functionality in previous versions, we subscribe to the GridControl's PreviewTextInput event. When PreviewTextInput is raised, we add the entered value to a searching string. Then, we iterate through all cells in a selected column. If a cell value starts with the searching string, we remember a row handle of this cell. To move to the previous or next row that starts with the searching string, we iterate through all previous or next cells of the current column and change the FocusedRowHandle value to a row handle of a found cell. To highlight the matching string of a cell, we cast InplaceBaseEdit to the InplaceBaseEdit interface and set the HighlightedText property to the searching string value.

Question Comments
Added By: Preeti bolinjkar 1 at: 9/2/2016 6:45:51 AM    Hi,

I am trying to use the below implementation since my application is still using version 15.1.
However in the Grid_PreviewTextInput event handler the SearchString is always null.
Can you guide me where I am going wrong. 
it will be better if you can provide me with a sample project where incremental search is working using the behavior .

Thanks. Added By: Ivan (DevExpress Support) at: 9/2/2016 1:07:31 PM    

Hello,

I've created a separate ticket on your behalf (T422709). It has been placed in our processing queue and will be answered shortly.

↧
↧

ASPxRichEdit - How to open documents via a custom dialog with ASPxFileManager

December 25, 2017, 9:42 pm
$
0
0

Currently, ASPxRichEdit doesn't provide the capability to customize the file selector used in the Open command's dialog. This example illustrates a possible workaround which allows a user to open documents by using a custom dialog with the ASPxFileManager control configured according to your requirements.

To implement this scenario, a custom Open ribbon button which opens a custom popup dialog is introduced instead of the default one. The currently selected ASPxFileManager document is opened in ASPxRichEdit by initiating its custom callback via the client-side PerformCallback method and by calling the Open method in the server-side Callback event handler.

↧

ASPxButton - How to execute a postback and disable the button on the first click to prevent clicking it multiple times

December 25, 2017, 11:58 pm
$
0
0

In some scenarios, it's necessary to allow a user to click a certain button just once and prevent processing subsequent clicks. This example illustrates how to disable ASPxButton after the first click and a postback sending to prevent clicking it multiple times.
It's possible to disable the button on the client side by using the SetEnabled method. However, ASPxButton doesn't send a postback when it's disabled in by using this approach. To achieve the desired result, disable the button by using SetEnabled in this client-side Click event handler and perform this button's postback programmatically via the __doPostBack method.
Note that in this case, it's necessary to additionally disable the button in the server-side Click event handler by setting its ClientEnabled property because the disabled state applied by using the client-side SetEnabled method will be lost after this postback.

↧

How to implement a Theme Selector control similar to DevExpress Demo

December 26, 2017, 12:18 am
$
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 a Theme Selector control similar to DevExpress Demo ThemeSelector web user control

April 14, 2017, 8:58 am
$
0
0

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

1. Copy 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.png with images.

   d. ThemeSelector.css with css classes.

   e. ThemeSelector.ascx and ThemeSelector.ascx.cs.

2. Register the ThemeSelector web user control in your web.config file:

[ASPx]
<pages><controls><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 in your Global.asax file and handle it

in the following manner:

[C#]
protectedvoidApplication_PreRequestHandlerExecute(objectsender,EventArgse){if(Request.Cookies["CurrentThemeCookieKey"]!=null){DevExpress.Web.ASPxWebControl.GlobalTheme=Request.Cookies["CurrentThemeCookieKey"].Value;}}

4. The ThemeSelector control allows you to show a popup left or right relative to the "Themes" anchor. Use the ThemeSelector.PopupAlign property. The default value is PopupAlign.Right. 

[ASPx]
<dx:ThemeSelectorrunat="server"ID="ts2"PopupAlign="Left"/>


Starting with v17.2 we have changed our Theme Selector implementation. Now, this user control is placed to ASPxPanel and is mobile friendly. A new sample can be found in the following thread: How to implement a Theme Selector control similar to DevExpress Demo

↧
↧

Web Report Designer - How to add/edit/remove DataSourses in the web report designer (Custom DataSource wizard)

January 13, 2015, 8:44 am
$
0
0

This example demonstrates how you can modify the list of DataSources that is passed to the ASPxReportDesigner on the fly. 

Important Note:
Starting with version 15.1, our Web Report Designer provides a built-in SQL Data Source Wizard, which is available in the designer's menu. Please refer to the Registering Default Data Connections help topic to learn how to enable this wizard for the Web Report Designer on your web page.



Description:
To run the DataSource wizard, open the ASPxReportDesigner menu and press the "Run Report DataSource Editor" item:



After that the Custom DataSource wizard form will be displayed:

On this form you can see the list of DataSources. After one of the data sources is selected in the list you will see the list of its Queries in the right list box. You can add, edit and remove either the DataSources or the Queries by using the buttons located under the lists. After Add... or Edit... buttons are pressed a separate modal form will be displayed to add or edit the selected Data Source or Query. Note that after the Save button is pressed on these forms, the Data Source or Query will be validated, and the error message will be displayed if the Data Source or Query cannot be created. 

When the Apply button is pressed on the wizard form, all the DataSources will be posted to the server. If any exception occurs during these DataSources' creation, an error message will be displayed on the wizard form. Otherwise, the data sources will be available in the Report Designer.
You can add them to your report by pressing a + button in the Field List:

Or by using the built-in Report Wizard that is available in the Report Designer menu:



Implementation Details:

The main idea of this approach is to use the ASPxReportDesigner.DataSources property to pass the set of DataSources to ASPxReportDesigner. To update the set of DataSources passed to the designer dynamically, I have placed the ASPxReportDesinger control into the ASPxCallbackPanel control. So, its callbacks are used to update the entire ASPxReportDesinger. 
The designer's DataSource list is populated on the server dynamically by using the CustomQueryWizardModel class. This class is converted to JSON and passed to the client by using the CustomJSProperties event handler (see the How to: Access Server Data on the Client Side help topic for more information). 
After the Wizard popup form is opened, JSON data passed to the client is converted to the JavaScript object and used to populate a Wizard form. So, this object is used to edit the data source collection on the client side.
When the Apply button is pressed on the Wizard form, the CustomQueryWizardModel object that was edited on the client side is converted to JSON and passed back to the server as a callback parameter. In the server-side ASPxCallbackPanel.Callback event handler, the CustomQueryWizardModel class is restored from the parameter passed form the client and used to update ASPxReportDesigner.DataSources.

Not to lose the report layout designed in ASPxReportDesigner on the ASPxCallbackPanel callback, it is saved by using the client-side ASPxClientReportDesigner.PerformCallback method that triggers a callback on which the report layout is saved and raises the server-side ASPxReportDesigner.SaveReportLayout event handler, where the report layout is saved to the Session. Only after that the ASPxCallbackPanel callback is triggered, and the saved report layout is restored from the Session in the ASPxReportDesigner.Init event handler.

To validate the entered DataSource or Query data on the DataSource and Query editing forms (when the Save button is pressed), the ASPxCallback control is used. It sends a non-visual callback to the server and passes the entered DataSource or Query data to the server. Then, in the ASPxCallback.Callback event handler data passed from the client is used to create a SqlDataSource or CustomSqlQuery instance and check if any errors occur while the creation. The error message is sent back to the client. The client-side ASPxClientCallback.CallbackComplete event handler is used to analyze data that was sent back to the client and to display an error message if required.

↧

Drag-and-drop of multiple selected grid rows

December 31, 2000, 4:00 pm
$
0
0

Starting with version 17.2, you can attach Drag And Drop Behavior to GridControl and ListBoxControl to implement the drag-and-drop functionality. Note that it is still necessary to handle events of the corresponding behavior to implement adding items to ListBoxControl:

[C#]
DragDropBehaviorlistBoxBehavior=behaviorManager.GetBehavior<DragDropBehavior>(this.listBoxControl);listBoxBehavior.DragOver+=ListBoxBehavior_DragOver;listBoxBehavior.DragDrop+=ListBoxBehavior_DragDrop;
[VB.NET]
Dim listBoxBehavior As DragDropBehavior = behaviorManager1.GetBehavior(Of DragDropBehavior)(Me.listBoxControl1)AddHandler listBoxBehavior.DragOver, AddressOf ListBoxBehavior_DragOverAddHandler listBoxBehavior.DragDrop, AddressOf ListBoxBehavior_DragDrop

In older versions, drag-and-drop should be implemented using the standard Drag events. Please refer to the Drag-and-drop of multiple selected grid rows Knowledge Base article for an explanation. 

↧
Search

ASPxPopupControl - How to resize the popup according to the size of its content

October 13, 2010, 5:11 am
$
0
0

By default, the ASPxPopupControl control has a fixed size. However, there are a lot of tasks that require resizing the control according to the size of its content page.
The main problem in this situation is to "catch" the moment when this page and all its controls are loaded and calculate their sizes. In this sample, the problem is solved in the following way:
1) The ASPxPopupControl control has the client-side event Init, whose OnPopupInit event handler is used to get an iframe element of the popup control and then attach the OnContentLoaded event handler to the Load event of this element.
2) The OnContentLoaded event handler is used to calculate width and height of the content page which is placed inside the iframe element and set the size of the ASPxPopupControl control in accordance with the calculated width and height.

↧

How to implement the basic idea of the Microsoft Excel "Format Painter" feature for SpreadsheetControl

December 25, 2017, 6:32 am
$
0
0

This example demonstrates how to copy all the formatting (a font, background, alignment, number formats and borders) from one cell and apply it to another one. Try the Format Painter button on the Ribbon Home tab. 

↧
↧

How to print from the RichEditDocumentServer using the PrintableComponentLink

August 15, 2013, 3:01 am
$
0
0

This example demonstrates how to use a PrintableComponentLink to print from the RichEditDocumentServer. An instance of the RichEditDocumentServer loads a document, inserts a datetime stamp in its header and prints it.
Various print options, such as page size, orientation and margins are set in code at run time.
The WinForms application searches a list of installed printers for a printer containing a certain text ("Canon") in its name and prints to it. If a printer is not found, the default printer is used.

↧

How to move a column from ColumnChooser by double-clicking DXGrid for WPF

September 25, 2012, 4:20 am
$
0
0

By default, ColumnChooser allows you to show and hide columns using CheckBoxes. This example demonstrates how to change a column's visibility by double-clicking it.

To accomplish this task, define a style for the ExtendedColumnChooserGridColumnHeader element, subscribe to its PreviewMouseDoubleClick event and change the GridColumn.Visible property value in this event handler.

↧

How to customize the appearance of the in-place combo box editor

December 31, 2000, 4:00 pm
$
0
0

The following example shows how to customize the in-place combo box editor's appearance when its text field is not editable.

In this example, in-place combo boxes are used to edit the 'Access Card Color' column field values. The appearance of the editors' items on the drop-down list is specified via the ItemTemplate property. As for the edit box, you can either apply the same template by setting the ApplyItemTemplateToSelectedItem property to true or specify another template using the EditNonEditableTemplate property (in this example, we used the second approach).

↧
Viewing all 7205 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>