This example demonstrates how to simulate the "No data" state in a pie chart by using one series with one point.
NOTE: Starting from v2014 vol 1, text pattern properties (AxisLabel.TextPattern, SeriesLabelBase.TextPattern, SeriesBase.LegendTextPattern) have been introduced instead of point options.
Text pattern properties simplify text customization of series labels, axis labels and legend items (when the SeriesViewColorEachSupportBase.ColorEach mode is enabled)
↧
How to simulate the "No data" state in a pie chart by using one series with one point
↧
How to create a 3D Side-by-Side Bar chart
The following example demonstrates how to create a 3D Side-by-Side Bar chart at runtime.
Note that this series view type is associated with the XY-Diagram 3D type, and you should cast your diagram object to this type, in order to access its specific options.
↧
↧
How to load a dashboard at runtime to an MVC DashboardViewer
The following example demonstrates how to load a dashboard to an MVC Dashboard Viewer at runtime.
↧
How to display underlying data for dashboard items displayed in the Web Viewer
The following example demonstrates how to obtain underlying data corresponding to a particular visual element using the ASPxClientDashboardViewer's API.
In this example, the ASPxClientDashboardViewer.ItemClick event is handled to obtain underlying data and invoke the dxPopup widget with the child dxDataGrid.
In the event handler, the RequestUnderlyingData method is called to obtain records from the dashboard's data source. The dxDataGrid is used to display these records.
↧
GridView - How to implement copy functionality in Batch Edit mode
This example demonstrates how to add copied values to a new row on a custom command button click using a new client-side API implemented in the following threads:
ASPxGridView - Batch Edit mode - Provide a client-side API to obtain/modify cell values without entering edit mode
ASPxGridView - Batch Edit mode - Provide client-side events that allow responding to entering and leaving the edit mode
ASPxGridView - Batch Edit mode - Provide a client-side API to obtain/modify cell values without entering edit mode
ASPxGridView - Batch Edit mode - Provide client-side events that allow responding to entering and leaving the edit mode
↧
↧
DXGrid - How to bind a grid's command to a popup menu's item
This example demonstrates how bind a grid's and ViewModel's commands to the popup menu.
In addition, this example shows two different implementations of the popup menu in DXGrid:
1. BarManager and ItemLink.
2. Embedded items.
↧
How to load image tiles from another source
This example illustrates how to implement a custom provider of image tiles. For this it's necessary to create a MapDataProviderBase class descendant and assign it to the ImageTilesLayer.DataProvider property.
The sample below shows how to load image tiles from a local cache. It might be possible only if you previously downloaded a bulk of image tiles from one of the available image tile providers. For example, a list of alternative OpenStreetMap image tile providers is available here: OpenStreetMap: Tile usage policy.
Note: If you don't need to create a custom data provider and only require changing the Uri to the location of image tiles, use the OpenStreetMapDataProvider.TileUriTemplate property.
↧
How to manually add MapBubble items to the map
The following example illustrates how to manually add an array of MapBubble objects to the Map control.
↧
How to manually add MapPie items to the map
The following example illustrates how to manually add a MapPie object to the Map control.
↧
↧
How to print and export a WinForms Dashboard visual representation as is
The following example demonstrates a workaround that allows you to print and export a Dashboard visual representation as is via the Print Preview dialog.
In this example, the Customer Support dashboard is displayed. You can invoke the Print Preview for the dashboard in one of the two modes, using the Show Preview or Show Paged Preview button. In the first mode, the paper size is adjusted to fit the dashboard. In the second mode, the dashboard gets split across the appropriate number of standard A4 pages.
To accomplish this, we have created a DashboardExporter class that implements the DevExpress.XtraPrinting.IPrintable interface. DashboardExporter instances are mapped to a DashboardViewer when they are created and then passed to the Print Preview thus bringing the dashboard to paper.
Question Comments
Added By: S Broskie at: 2/12/2013 6:40:51 AM
I appreciate the sample. I did have one question related to the size. If I squeeze the form down, which reduces the dashboard size and then do a print preview, the sides get chopped off. What would be the best way to keep the preview and export at a consistent size without having to worry about a user shrinking the form and therefore shrinking the output? Clone the dashboard somehow and actually do the export on that internally sized clone? If so, could you augment the sample to try and export a consistent size no matter what shape the form and dashboard are in?
Thanks!
Added By: Boris Soto at: 3/12/2013 8:34:23 PMI used this code in a new dashboard viewer, how do I tell the button to print the dashboard and what about if I have multiple dashboard
Added By: saif Mohammed at: 9/18/2013 7:14:58 AMHi, does this code consider the filtered dashboards or it prints it in its original status only?
Added By: Maxim (DevExpress Support) at: 6/9/2014 8:23:26 AM Please accept my sincere apologies for this the tardiness of my reply. Although it's been a while since you posted these comments, I want to make sure your concerns are addressed. If you opened separate tickets on these issues, please let me know, so that I can follow up on all the tickets. If you didn't, I will answer you here right away.↧
How to implement hot-tracking for grid rows
This example demonstrates how to change the appearance of grid rows when the mouse is hovered over them
Question Comments
Added By: Matthew Perryman at: 6/9/2014 8:37:19 AM
This doesn't work for a Master-Level view, I'm trying to apply this to the level View of the MainView.
The MouseMove e.Location doesn't pickup any GridHitInfo and the RowCellStyle isn't being hit.
Am I missing something or do I need some code in the MainView to pass to the level View?
↧
How to apply a certain layout to the required view
It is necessary to handle the HtmlApplication.resolveLayoutController event and specify the required layout controller that must be used to provide a layout markup for the given view. All predefined layout controllers that are available for the current platform are contained in the availableLayoutControllers argument of the event handler. The main idea is to find the required controller in this collection and set it to the layoutController parameter in the resolveLayoutController event handler. In addition, please make sure that links to files that are related to the required layout are added to the index.html file.
This example demonstrates how to apply the Empty layout to the About view.
Starting with 14.1, it is necessary to set all available layout controllers via the HtmlApplication.layoutSet options. For the layout controllers that should be set using the resolveLayoutController event handler, set the customResolveRequired option to true as with the Empty layout controller.
See also:
jQuery.grep
↧
GridView - How to show a confirmation dialog using PopupControl
This example demonstrates how to show a delete confirmation dialog using PopupControl. In this example, GridView is created with a custom button; the CustomButtonClick event is handled. PopupControl is shown on CustomButtonClick event and if the PopupControl's "Yes" button is clicked, then the DeleteRow method is called.
See also:
ASPxGridView - How to show a confirmation dialog using ASPxPopupControl
See also:
ASPxGridView - How to show a confirmation dialog using ASPxPopupControl
↧
↧
ASPxGridView - How to show a confirmation dialog using ASPxPopupControl
This example demonstrates how to show a delete confirmation dialog using ASPxPopupControl. In this example, ASPxGridView is created with a custom button; the ASPxClientGridView.CustomButtonClick event is handled. ASPxPopupControl is shown on ASPxClientGridView.CustomButtonClick and if the ASPxPopupControl's "Yes" button is clicked, then the ASPxClientGridView.DeleteRow method is called.
See also: How to implement a delete confirm dialog with a "don't ask me again" option
GridView - How to show a confirmation dialog using PopupControl
↧
How to configure dxDataGrid with Angular Approach
This example demonstrates how to display data from a data source in dxDataGrid created using the AngularJS approach.
See also:
Configure Widget - Angular Approach
↧
How to create dxPieChart using the AngularJS approach
This example demonstrates how to display data from a data source in dxPieChart created using the AngularJS approach.
See also:
Configure Widget - Angular Approach
dxPieChart API
Create a Widget - AngularJS Approach
↧
How to create an analog of GridLookUpEdit with TreeList in a popup window
This example is obsolete. We've included the TreeListLookUpEdit editor in our suite in version 13.1.
In some cases, it is useful to display data within LookUpEdit in the hierarchical structure.
This can be introduced by creating a custom editor – TreeListLookUpEdit.
This example illustrates how to create such an editor.
Here we have implemented the following features:
- The RepositoryItemTreeListLookUpEdit.ValueMember and RepositoryItemTreeListLookUpEdit.DisplayMember properties. They are intended for the same functions as in a regular LookUpEdit/GridLookUpEdit.
- The ProcessNewValue event is implemented like in LookUpEdit/GridLookUpEdit. This event is raised when an editor is validated and its display value does not exist within an inner TreeList.
- The property SearchMode allows you to select one of the following modes:
o OnlyInPopup. This mode is an analog of IncrementalSearch, but it also expands nodes if it is needed when you type a search text. This mode works only if a popup window is shown.
o AutoComplete. In the Auto Completion mode, the text in the edit box is automatically completed if it matches a DisplayMember field value from drop-down nodes.
o AutoFilter. This mode applies a filter to the DisplayMember column. Filter is formed when you type a text in the edit box. In addition, it opens a popup window and looks for nodes retaining paths to the root to show the context.
For virtual data loading (on demand) in the inner TreeList you can handle its BeforeExpand event. Please refer to the following help articles:
How to: Implement Dynamic Loading in Unbound Mode
Dynamic Data Loading via Events
How to: Implement a Tree Structure for a Business Object
to learn which virtual Modes TreeList supports.
Question Comments
Added By: (no info) at: 3/18/2013 6:00:11 AM
Hi,
I'm Trying to make my custom control TreeListLookUpEdit and everything goes fine except this line: (DXCategory is not defined...)
<DXCategory(CategoryName.Behavior), DefaultValue(SearchMode.OnlyInPopup)> _
¿Any solution for this?
Thanks,
Iker.
I'm using the 12.1.5 versión of DevExpress, may be this the problem?
↧
↧
Using keyboard for ASPxGridView pages navigation
This example demonstrates how to process a document's keydown
event and how to activate some ASPxGridView's page according to
the key that has been pressed.
The following keys are processed in this example:
* Ctrl + Left Arrow (activate previous page)
* Ctrl + Right Arrow (activate next page)
* Ctrl + Home (activate first page)
* Ctrl + End (activate last page)
The AttachEventToElement method of the ASPxClientUtils class
is used to subscribe to a document's keydown event. The PrevPage,
NextPage, and GotoPage methods of the ASPxClientGridView class
are used to change the active page of ASPxGridView.
Note: Starting with v2010 vol 1, this functionality can be obtained by setting the grid's KeyboardSupport property to true:
Keyboard Navigation
Common Changes Across All ASP.NET Controls -> Keyboard Navigation Support in Grid Controls
By default, the grid's KeyboardSupport property is set to false. Refer to the Accessibility - Keyboard Support Online Demo to see this feature in action.
See Also:
Using keyboard for ASPxDataView pages navigation
Question Comments
Added By: MasterRanger at: 6/10/2014 5:06:55 AM
There is no ASPxWebControl on the Default.aspx page. Therefore the Default.aspx.cs will not work
Added By: MasterRanger at: 6/10/2014 5:45:47 AMAddKeyboardNavigationTo doesnt work either.
↧
GridView - How to drag and drop items from one grid to another
The example demonstrates how to use the jQuery framework to drag an item from one grid to another.
- Use jQuery UI Draggable and Droppable plug-ins;
- Define "draggable" and "droppable" items:
[C#]settings.Styles.Table.CssClass="droppableRight";settings.Styles.Row.CssClass="draggableRow right";
- Initialize the defined draggable/droppable items via the corresponding jQuery selectors. The "start" event handler can be used to obtain the key of the dragged row and apply conditional styling to it:
[JScript]start: function(ev, ui){var $sourceElement = $(ui.helper.context);var $draggingElement = $(ui.helper);var sourceGrid = ASPxClientGridView.Cast($draggingElement.hasClass("left") ? "gridOne" : "gridTwo");//style elements $sourceElement.addClass("draggingStyle"); $draggingElement.addClass("draggingStyle"); $draggingElement.width(sourceGrid.GetWidth());//find key rowKey = sourceGrid.GetRowKey($sourceElement.index() - 1);},
- Handle the "drop" event of the "droppable" items and perform a callback to the callback panel that has both grids nested inside to perform the data editing functionality.
Select the "script.js" source file and review the comments to find an illustration of the above steps.
See Also:
How to use jQuery to drag and drop items from one ASPxGridView to another
↧
How to use jQuery to drag and drop items from one ASPxGridView to another
The example demonstrates how to use the jQuery framework to drag an item from one grid to another.
- Use jQuery UI Draggable and Droppable plug-ins;
- Define "draggable" and "droppable" items:
[ASPx]<Styles><TableCssClass="droppableLeft"></Table><RowCssClass="draggableRow left"></Row></Styles>
- Use the invisible ASPxGlobalEvents control and handle its client-side ControlsInitialized/EndCallback events;
- Initialize the defined draggable/droppable items via the corresponding jQuery selectors. The "start" event handler can be used to obtain the key of the dragged row and apply conditional styling to it:
[JScript]start: function(ev, ui){var $sourceElement = $(ui.helper.context);var $draggingElement = $(ui.helper); //style elements $sourceElement.addClass("draggingStyle"); $draggingElement.addClass("draggingStyle"); //find keyvar sourceGrid = ASPxClientGridView.Cast($draggingElement.hasClass("left") ? "gridFrom" : "gridTo"); rowKey = sourceGrid.GetRowKey($sourceElement.index() - 1);}
- Handle the "drop" event of the "droppable" items and perform a callback to the callback panel that has both grids nested inside to perform the data editing functionality.
Select the "script.js" source file and review the comments to find an illustration of the above steps.
See Also:
T116869: GridView - How to drag and drop items from one grid to another
E4582: How to reorder ASPxGridView rows using buttons or drag-and-drop
Question Comments
Added By: Marc Michaels at: 1/16/2013 6:03:17 AM
Where is DX.ashx? I can't find any mention of it anywhere.
Added By: Marc Michaels at: 1/16/2013 6:14:32 AM<div class="draggable"> ??? Can't find this anywhere in the example as well. This example really leaves me in the dark there is no explanation of anything. Sadly it's the closest thing I can find to help me drag from one grid and drop on another. Just going to have to struggle through it.
Added By: Marc Michaels at: 1/16/2013 6:21:13 AMRunning example simply results in "The resource cannot be found".
↧