TreeList - How to expand all child nodes for the focused node
Spreadsheet - How to re-open a document without unsaved changes
By default, unsaved document changes persist in the server's RAM while the spreadsheet's work session is in process. To undo the changes, close the document. This example demonstrates how to use the SpreadsheetExtension.CloseDocument method in the controller code for this purpose.
TreeList - How to implement node reordering
Currently, the TreeList extension only allows node insertion (a modification of the current node's parent node).
This example demonstrates how to implement node reordering and also provides the implementation of custom reorder/insert icons.
Here is how you can implement this scenario:
- Get all of the sibling nodes of the node that is currently being dragged and calculate its bounds in the client-side ASPxClientTreeList.StartDragNode event handler.
- Ensure that the mousemove handler is attached to the document object. In the client-side mousemove event handler, check whether it is possible to reorder/insert nodes and change the reorder/insert image.
- In the client-side ASPxClientTreeList.EndDragNode event handler, get the e.htmlEvent object and see if reordering is possible. If so, set the e.cancel property to false and perform a custom callback to the TreeList extension.
In order to check whether it is possible to reorder nodes, iterate through the neighboring nodes' bounds you've saved in the StartDragNode event handler. In order to get the current cursor position, use the ASPx.Evt.GetEventX and ASPx.Evt.GetEventY methods.
In order to get the drag & drop image, use the GetDragAndDropNodeImage method of the ASPxClientTreeList object. Note that this is private API, so we do not guarantee that we will not change it in our further releases. Even though in the case of the GetDragAndDropNodeImage method it is hardly possible that we will change it, I still encourage you to test this solution while upgrading to the next releases.
Node reorder functionality limitation: It is not possible to keep a custom order of the nodes when the control is sorted by any column. Thus, it is necessary to disable the sorting functionality via the TreeListSettings.SettingsBehavior.AllowSort property.
GridView - How to upload an Excel file via UploadControl and display its data in a grid
This example demonstrates how to upload an Excel file from your computer to the server using UploadControl and then display its data in GridView.
For this purpose, save a file uploaded via UploadedControl in its CallbackRouteValues controller action and pass the saved file's path to the client side by using the e.CallbackData parameter. Then, obtain this path in the UploadControl's client-side FileUploadComplete event handler and initiate GridView's callback in order to show the uploaded file's data in the grid:
[C#]settings.ClientSideEvents.FileUploadComplete="function(s, e) { GridView1.PerformCallback({ path: e.callbackData}); }";
To show the Excel file's data in GridView, you can use the approach illustrated in the How to bind GridView with Excel file example.
See also:
How to load an excel file to the server using ASPxUploadControl and display its data in ASPxGridView
How to create a custom Action type with a custom control in Web
This example demonstrates how to create a custom action that accepts two parameters (a DateTime range), how to extend the web ActionContainerHolder to create a custom action item with a complex control. The code is based on the built-in ParametrizedAction item. Note that it is required to place a custom ActionContainerHolder to our web templates (aspx pages) instead of the default ActionContainerHolder, otherwise a custom action item will not be created. See how this is done in the DefaultTemplateContent1.ascx file. For additional information, refer to the How to: Customize an ASP.NET Template topic.
How to load an excel file to the server using ASPxUploadControl and display its data in ASPxGridView
This example shows how to load an excel file from your computer to the server using ASPxUploadControl and then display its data in ASPxGridView.
To do this, you first need to place the ASPxGridView and ASPxUploadControl controls on a page and, secondly, handle the ASPxGridView.Init event and both the server-side and the client-side ASPxUploadControl.FileUploadComplete events.
After uploading the excel file from your computer, save it in the "~/XlsTables/" directory using the ASPxUploadControl.FileUploadControl event handler on the server-side. You may choose any filename and then save it in the Session["FileName"] object to use later.
In the ASPxGridView.Init event handler you need to check the value of the Session["FileName"] object. If it's null, do nothing. Otherwise create a new DataTable and DataTableExporter objects.
See also:
GridView - How to upload an Excel file via UploadControl and display its data in a grid
Question Comments
Added By: John Daren Dizon 1 at: 5/11/2015 8:43:46 PM
So how can I save the data uploaded in the grid into a database?
Added By: Sergi (DevExpress Support) at: 5/12/2015 12:25:35 AMHello,
To process your recent post more efficiently, I created a separate ticket on your behalf: T240435: ASPxGridView How to save data from Excel to a database. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.
I used this code. Version=14.1.6.0 visual studio 2012 version., But it shows a red line under(workbook) Workbook book = new Workbook();
Added By: Vladimir (DevExpress Support) at: 11/29/2015 11:00:46 PMHello,
To process your recent post more efficiently, I created a separate ticket on your behalf: T318205: How to load an excel file to the server using ASPxUploadControl and display its data in ASPxGridView. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.
How to update MVCxChartControl control according change made in the attached MVCxPivotGrid
This example illustrates how to manually update a chart according to pivot changes. To do that, it is necessary to call the chart's MVCxClientChart.PerformCallback method. You can call it from the PivotGridSettings.ClientSideEvents.EndCallback event handler. It is also necessary to send information about the pivot control's state to the server side by calling the MVCxClientPivotGrid.FillStateObject Method from the chart's BeginCallback client-side event handler.
To check whether an update is necessary, handle the server-side GridLayout event and pass this information to the client side using JSProperties.
How to calculate a variance for two ASPxGridView columns and their total and group summaries
The example illustrates how to calculate a variance for two ASPxGridView columns and their total and group summaries. Values of the unbound “Variance” column are calculated in the CustomUnboundColumnData event handler. Summary custom calculation rules are applied in the CustomSummaryCalculate event handler. The CustomSummaryCalculate event fires for each row involved in summary calculation. When calculating the total summary value, the event is raised for each data row. Additionally, the event is raised before and after processing rows. Values used in the calculation are stored in variables, that are defined outside the handler. The processing rows finalization is used to assign the result to the total summary value via the event's e.TotalValue property.
See Also:
Custom Aggregate Functions
Question Comments
Added By: Dov Miller at: 11/15/2016 2:29:27 AM
Hello,
This is very helpful.
The ifs
Wouldn't it be better to do them else if?[C#]if(e.SummaryProcess==DevExpress.Data.CustomSummaryProcess.Start)if(e.SummaryProcess==DevExpress.Data.CustomSummaryProcess.Calculate)if(e.SummaryProcess==DevExpress.Data.CustomSummaryProcess.Finalize)
Dov
Added By: Jenny (DevExpress Support) at: 11/15/2016 9:39:56 AM
Hello Dov,
There is no big difference what syntax is used in this case. Please see the c# else if () versus multiple if () article for additional information.
dxValidator - How to display validation errors only on a button click
You can find related code by clicking below the "Show Implementation Details" link .
How to: Bind to an OLAP Cube Using the ADOMD.NET Data Provider
The following example demonstrates how to bind PivotGridControl to an OLAP cube via the ADOMD.NET data provider.
Update: starting with version 12.1, it is enough to use the OlapDataProvider property to specify the required data provider.
How to create a custom theme for shapes in DiagramDesignerControl
Shapes in the Diagram control are colored according to the applied theme. To create a custom theme, add a resource dictionary with a Theme element to your application.
Each theme should contain a color palette. To specify a color palette, add the ColorPalette element into the Theme.
To specify how colors are used in a theme, set the Theme.Effects property. This property accepts the EffectCollection object. EffectCollection defines colors shown in the following gallery:
EffectCollection has the following properties:
-ThemeEffects. Specifies colors in the "Theme Styles" group. This collection contains exactly 6 elements.
-VariantEffects. Specifies colors in the "Variant Styles" group. When a shape is created its default color scheme is taken from this group. This collection contains exactly 4 elements.
-ConnectorEffects. Specifies connector colors. This collection contains exactly 3 elements.
To register a custom theme, use the ThemeRegistrator.RegisterThemes method.
How to organize Wizard interface within PageControl Extension
This example is the ASP.NET MVC implementation of the How to organize Wizard interface within ASPxPageControl example. It illustrates to organize the so-called wizard interface within the MVC PageControl Extension. It allows you to specify the predefined content of the wizard steps within the TabPages and switching between them via user interface (via clicking the TabPage's header) or programmatically (via API).
Updated:
Starting with v14.1 this example uses jQuery Unobtrusive validation. Please refer to Unobtrusive Client Validation to learn more about it.
Question Comments
Added By: Kelly Murphy 1 at: 9/13/2016 9:48:18 PM Please note that there is an error in the file named "ContactPartial.cshtml".
Near the bottom of the file is the line:
That should be:[C#]buttonSettings.ClientSideEvents.Click="OnSumbitForm";
Thanks![C#]buttonSettings.ClientSideEvents.Click="OnSubmitForm";
Added By: Vladimir (DevExpress Support) at: 9/14/2016 4:48:59 AM Hello Kelly,
Good catch. Thank you for notifying me. I have updated the sample.Added By: Phillip Swearingain at: 11/17/2016 7:40:53 AM ContactPartial.cshtml is missing from the list of files in the drop down. In fact, I don't see any views at all. This is preventing me from fully understanding how to implement this in my own project. Please make sure all the necessary files are available for viewing ASAP. Thanks Added By: Helen (DevExpress Support) at: 11/17/2016 11:48:32 PM
Hello Phillip,
We added Views to the selector, so you can review them online. Please note that it is possible to download the complete project to your machine, and run and review it locally. For this, download the "Example Runner" and install it (if it is not installed yet). Then, download the example and open the downloaded file. Download links are available on the right side of the page.
ASPxGridView - Batch Edit - How to validate the entered cell value on the server side
This example illustrates how to check a value entered in the cell on the server side. Checking is performed immediately after changing a value of a cell's editor. Set the "AAA" value to the C3 column or "BBB" to the C5 column for testing.
Question Comments
Added By: John Daren Dizon 1 at: 11/17/2016 2:48:30 AM It has a bug when you switch to other rows using Tab key. So how to implement this while also accepting the tab key?Added By: Larry (DevExpress Support) at: 11/18/2016 2:54:55 AM Hello,
Thank you for the clarification. I have updated the example to reflect this scenario. Should you have any further questions, feel free to contact us.
How to: Create a Custom Map Tooltip Shape
How to create a Web Dashboard Designer application
This example shows how to create a Web Dashboard Designer application and provide data for dashboards.
The project contains a simple dashboard and two available data sources: the XML and OLAP data sources. You can use these data sources to create a new dashboard. To learn how to create a Web Designer application from scratch, see the following topic: Creating a Dashboard using a Web Designer.Note that the OLAP data source requires the ADOMD.NET data provider installed on the web server. You can get the latest version of this provider here: https://www.microsoft.com/en-us/download/details.aspx?id=42295.
Question Comments
Added By: Dima Santina at: 4/13/2016 10:46:06 AM Is there a sample available that works with Visual Studio 2010?Added By: Andrew Aks (DevExpress) at: 4/14/2016 1:44:37 AM
Hi
We have converted the example to be able to run it using Visual Studio 2010.
Added By: jacob xu chen at: 5/24/2016 7:57:22 PMThanks Andrew. It's very good web dashboard desginer. I just want to customize it. Is it possible for us to remove some features from this designer? It seems that all things are all in DLL file, is there a way to customize it? Thanks.
Added By: John (DevExpress Support) at: 5/24/2016 10:00:49 PM Hi Jacob,I have created a separate topic for your recent question: Iit possible for us to remove some features from Web Dashboard Designer. let's continue our discussion there.Added By: Reuben Lee Brown at: 11/18/2016 9:45:14 AM WiIll this work with SQL 2008 R2 if we download the SQL 2008 R2 Feature pack with Srv Pack 4?
And what is the minimum Visual Studio version this will work with?
Thanks.
OBSOLETE - ASPxGridView - How to implement navigation by Up/Left/Down/Right buttons when the Batch Edit mode is used
Starting with version v2016 vol 1 (v16.1), this functionality is available out of the box. Set the grid's GridViewSettings.SettingsEditing.BatchEditSettings.StartEditAction property to the FocusedCellClick value to activate it. Please refer to the ASP.NET Grid - Cell Bands, Cell Merging, and Cell Focus - (Coming soon in v16.1) blog post, the Batch Editing and Updating demo and ASPxGridView - Batch Edit - Provide cell focusing and keyboard navigation thread for more information.
If you have version v16.1+ available, consider using the built-in functionality instead of the approach detailed below.
For earlier versions:
In this example, ASPxGridView is used in Batch Edit mode. This feature allows users to move focus from one editable cell to another. Navigation is performed by the Up/Left/Down/Right buttons.
MVC:
GridView - How to implement navigation by Up/Left/Down/Right keyboard arrows in the Batch Edit mode
Question Comments
Added By: Corby Nichols at: 11/12/2015 6:18:46 AM
Thank you very much, I will try your example over the weekend when I have more time to experiment.
For now I disabled the Mouse Wheel with AllMouseWheel = false and set the Increment to 0 and the Large Increment to 0 and it works.
Added By: Vova (DevExpress Support) at: 11/12/2015 6:42:04 AMYou are welcome! If you have additional questions, feel free to create a separate ticket. We are here to address your inquiries.
Added By: John Daren Dizon 1 at: 11/18/2016 10:06:15 PM I wonder how to prevent changing of values in case there is a combobox or gridlookup in the gridview when pressing up and down button?Editing an in-memory dataset
This example is an illustration of the KA18686: ASPxGridView - How to implement CRUD operations with a custom data source KB Article. Refer to the Article for an explanation.
See Also:
How to insert, edit and delete data in a data table by ASPxGridView at runtime
Question Comments
Added By: Wayne Stoner at: 12/15/2015 7:59:20 AM
This example isn't showing any of the code-behind.
Added By: Helen (DevExpress Support) at: 12/15/2015 9:53:42 AMHello,
I tried to open the example on my side and it displays the code behind for all versions, both VB.NET and C#. See the video. Try to reload the page by pressing Ctrl+F5 and check the example again. If the problem persists, specify your browser family and version.
there is one interesting part missing:
ShowNewButton="True" for the
DetailRow
i wonder how can that be implemented
Added By: Alessandro (DevExpress Support) at: 5/25/2016 11:30:43 PM
Hello,
I've created a separate ticket on your behalf (T384038: E257: Editing an in-memory dataset). It has been placed in our processing queue and will be answered shortly.
I have already created a popup and I want to do something like:
The problem is that the popup is not shown if there is[C#]protectedvoidgrid_RowUpdating(objectsender,DevExpress.Web.Data.ASPxDataUpdatingEventArgse){vartext=myTextBox.Text;if(string.IsNullOrEmpty(text)){MyMessageBox.Show(textNummer);e.Cancel=true;}else{grid.CancelEdit();e.Cancel=true;}}
Otherwise I get an exception if I don't set e.Cancel = true.[C#]e.Cancel=true;
Thanks
Added By: Lex (DevExpress Support) at: 11/21/2016 8:26:37 AM
Hello Petar,
I've created a separate ticket on your behalf (T453130: ASPxGridView - Batch Edit - How to show a message if data is invalid). It has been placed in our processing queue and will be answered shortly.
DevExpress Project Template - How to load a content using callbacks on a menu item click
This example demonstrates how to load a content on a menu item click using CallbackPanel callbacks or the jQuery.ajax function.
Note that the jQuery.ajax function doesn't require placing the CallbackPanel on a page(see Provide support for different callback types (jQuery.ajax, Ajax.ActionLink, etc.) for additional details)
See also:
Navigation - How to implement callback-based navigation in the project generated by the Template Gallery
XtraGrid - How to use the RealTimeSource
This simple example illustrates how to use RealTimeSource with a grid.
Question Comments
Added By: John Emil at: 11/22/2016 8:44:34 AM Hi
Kindly i need to change the cell color when cell value changed to be green or red based on the number -,+ value
and also it will be great to make this highlight disappear after interval time
I will be thankful if you could advice my how this could be possible Added By: Andrew Ser (DevExpress Support) at: 11/22/2016 10:44:19 AM Hi,
I see that you asked this question in the Real Time Cell Highlight thread. Let's continue our discussion there.
OBSOLETE - Image Upload in ASPxGridView
UPDATED:
Starting with version v2015 vol 1 (v15.1), this functionality is available out of the box. Simply set the GridViewDataBinaryImageColumn.PropertiesBinaryImage.EditingSettings.Enabled property to True to activate it. Please refer to the ASP.NET Data Grid - Binary Image Editor (Coming soon in v15.1) blog post and the Binary Image Column Editing demo for more information.
If you have version v15.1+ available, consider using the built-in functionality instead of the approach detailed below.
The ASPxUploadControl can be used within the ASPxGridView's Edit Form to upload image files to the grid's bound database. In the online sample, the grid's data is stored within the Session object and is obtained/modified by using the ObjectDataSource component.
The project version that employs a SqlDataSource component is also provided in a separate zip file within the example folder.
See also:
How to bind the ASPxBinaryImage to a field which contains image data stored as OLE object
OBSOLETE - Inserting a new row in ASPxGridView with the image preview enabled
Question Comments
Added By: zain ul arfeen at: 1/23/2014 12:09:12 AM
It is a nice post... But i cannot understand where and how should i bee using the file.SaveAs to save the file at some place???
Added By: Mehul Harry (DevExpress) at: 1/23/2014 2:26:42 PMZain, you can download this entire project and run it locally in your VS. To see the relevant source files online, just cclick the dropdown above the code which let's you select the files. If you still need help then please contact our support team here: http://www.devexpress.com/Support/Center/CreateIssue.aspx?issuetype=Question
Thanks.
Added By: Esther Hazan at: 11/22/2016 1:47:50 PM I see that all the posts on this issue are marked obsolete. id there an example of adding a file upload in each row of a grid view that is current?Added By: Vladimir (DevExpress Support) at: 11/22/2016 11:01:50 PM Currently, we recommend using GridViewDataBinaryImageColumn as mentioned in this example description. If it does not work for you, would you please submit a ticket and describe your scenario in detail?