The following example illustrates a gauge control that looks and behaves like a typical 'knob' element of a real-life dashboard. This knob replicates the knob-like appearance and provides the capability to interactively modify its value via mouse clicks.
This example demonstrates how to create a label report at runtime.
A label report is nothing but a report with layout settings adjusted according to a selected label type. Base layout settings include page settings (the width & height, margins), a Detail band's settings (height) and multi-column options. Obviously, a different label report type requires a specific combination of report settings which may be difficult to figure out.
In this example, we implemented a special CustomLabelReportBuilder helper class that replicates the report creation code used internally by our Label Report Wizard. For convenience, we created a CustomLabelReportModel class that provides label report specific settings that are required for building of a label report. These are the following.
LabelWidth and LabelHeight
Specify the width & height of XRPanel placed into the Detail report band;
HorizontalPitch
Used to specify the Detail band's Multi-Column options: MultiColumn.ColumnWidth and MultiColumn.ColumnSpacing.
VerticalPitch
Is assigned to the DetailBand.Height property.
MeasurementUnit
Is assigned to the XtraReport.ReportUnit property.
PaperKindID
Specifies an ID that becomes converted to a corresponding System.Drawing.Printing.PaperKind enumeration value assigned to the XtraReport.PaperKind property.
TopMargin and LeftMargin
Are assigned to the Top and Left report margins.
BottomMargin and RightMargin
These are empty spaces that appear on the resulting report's page as right and bottom spaces. These values are calculated automatically based on other settings.
So, to generate a label report at runtime, call CustomLabelReportBuilder.GenerateLabelReport with a CustomLabelReportModel object or individual settings (listed above) as an argument(s).
Take note of the LabelReportValuesHelper class - it has methods that allow you to fetch label report type settings, such as the Label Products list and Product Details.
Keep in mind that you can provide custom XML with available Label Product values. To do so, pass a path to the custom XML to the LabelReportValuesHelper constructor.
For the default Label Report Wizard to use this custom XML as well, specify the static DevExpress.Data.XtraReports.Labels.LabelWizardCustomization.ExternalLabelProductRepository property at the application startup.
To localize DevExtreme widgets, do the following:
- Link required dictionaries as described in the following help topic:
Link Dictionaries in v16.1
Link Dictionaries in v16.2+
Note that the order of references is important.
- Reference the DevExtreme localization script:
Use Predefined Dictionaries in v16.1
Use Predefined Dictionaries in v16.2+
- Initialize your application after setting the locale:
[JavaScript]$.when(...}).then( Globalize.load).then(function(){ Globalize.locale('de');// Initialize your application here});
For a more detailed description, refer to the following help topic:
To localize DevExtreme widgets, do the following:
- Link required dictionaries as described in the following help topic:
Link Dictionaries in v16.1
Link Dictionaries in v16.2+
Note that the order of references is important.
- Reference the DevExtreme localization script:
Use Predefined Dictionaries in v16.1
Use Predefined Dictionaries in v16.2+
- Initialize your application after setting the locale:
[JavaScript]$.when(...}).then( Globalize.load).then(function(){ Globalize.locale('de');// Initialize your application here ko.applyBindings(viewModel, document.getElementById("demo"));});
Important: Call the ko.applyBindings method only after setting a page locale.
For a more detailed description, refer to the following help topic:
====================================
This example is now obsolete. Instead, refer to the How to: Detect a Lookup List View in Code topic in XAF documentation.
====================================
This example demonstrates how to hide the New Action when it is displayed below the Lookup List View. To determine if the List View is used as Lookup, you should check whether the current Template implements the ILookupPopupFrameTemplate interface.
Run online doesn't work properly - it has Employee.Department has New button in lookup.
Added By: Ad de Rijke at: 4/12/2013 6:41:12 AMThis samples works as expected in the Win app. However, in the Web app the New Action is still there (v2012 vol 2.7).
What goes wrong?
I have updated this example to fix the issue in web
By default, it is impossible to load files on callbacks:
The Concept of Callbacks
However, there's a solution that allows you to overcome this problem. Our ASPxWebControl class has the RedirectOnCallback method that allows redirecting to another page during a callback.
In our situation, we can create a specific "download" page and call a method which loads a file in the Page_Load event handler of this page. This sample shows how to load a file by clicking the custom ASPxGridView button using two approaches:
1. Redirect to the load page on client side using the window.location.href property.
2. Redirect to the load page on server side by the ASPxWebControl.RedirectOnCallback method.
See also:
ASPxTreeList - How to download a file by clicking a custom command button
ASPxGridViewExporter - How to show content document in a new tab
This example is based on the CheckComboBox Emulation demo. It illustrates how to use a combination of the ASPxDropDownEdit and ASPxGridView to emulate a checked combo box that allows end-users to select multiple items within its dropdown list.
In this example, a template of the DropDownWindowTemplate type is created within the ASPxDropDownEdit. This template contains an instance of the ASPxGridView whose ShowSelectCheckbox property is set to true. The ASPxDropDownEdit's Text property stores a list, containing selected items (values, in this scenario). In addition to selecting items within the dropdown list, this example allows end-users to select items by entering a semicolon-separated series of item values into the ASPxDropDownEdit's edit box. If an item text that doesn't exist is entered, it is deleted from the edit box.
See Also:
CheckComboBox filtering in the Auto Filter Row
I think the 2012+ technique for most scenarios would now be to use an ASPxCheckBoxList instead of a nested gridview, specifically if you're just trying to achieve a "CheckBoxList" solution (no need for multiple columns).
Added By: Esther Hazan at: 1/31/2017 12:21:22 PM has this been simplified since 6 years ago?The following example demonstrates how to add a Delete item to the grid cell's context menu.
If the grid is empty a binding error occurs: System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=grid'. BindingExpression:Path=View; DataItem=null; target element is 'BarButtonItem' (HashCode=33829902); target property is 'CommandTarget' (type 'IInputElement')
Added By: Sebastian Wróbel 1 at: 1/7/2014 2:51:32 AMExample is not working, row is not deleted. Ver 13.2
Added By: Artem Dubenko 2 at: 12/22/2016 8:25:42 AM It would be nice if you had a 'DeleteSelectedRows' command too.Added By: Elliot (DevExpress Support) at: 12/22/2016 8:29:35 AMHello Artem ,
I've created a separate ticket on your behalf (T465830: There is no DeleteSelectedRows command in the grid control). It has been placed in our processing queue and will be answered shortly.
Thanks
Elliot
This example illustrates how you can customize the Ribbon toolbar of the Silverlight Report Designer (e.g., remove an existing button or add a custom one).
The RibbonControl's items can be customized via the corresponding actions that are passed to the Report Designer using templates in XAML.
For more details, see Customizing Bars via Actions.
Also, review the improvement of this example created by our customer.
Added By: Bernd Schrenk at: 2/1/2017 1:40:15 AM Hello,his example demonstrates how you can implement a custom editing form that will be invoked instead of the default inplace editor.
See the How to: Customize an Inplace Editor document for a step-by-step guide.
Note that the Agenda view does not provide a default inplace editor and the InplaceEditorShowing event does not occur in this view.
While this functionality is not available out of the box, it is possible to emulate command buttons with HTML element and assign tooltips using default HTML approach (attribute title).
In this example, we created a Data Item Template inside the command column:
[ASPx]<dx:GridViewDataTextColumnName="Command"Caption="#"VisibleIndex="0"><DataItemTemplate><ahref="javascript:grid.AddNewRow();"title="Add new row">New</a><ahref="javascript:grid.StartEditRow('<%#Container.VisibleIndex%>');"title="Start edit row '<%#Container.VisibleIndex%>'">Edit</a><ahref="javascript:grid.DeleteRow('<%#Container.VisibleIndex%>');"title="Delete row '<%#Container.VisibleIndex%>'">Delete</a><ahref="javascript: alert ('This is the custom button');"title="Custom action">Custom action</a></DataItemTemplate></dx:GridViewDataTextColumn>
This example is the third part of the SpreadsheetControl API set of examples that demonstrates how to use the SpreadsheetControl API to programmatically manage spreadsheet documents, without the need for Microsoft Excel to be installed.
This sample introduces API properties and methods used to perform the following operations:
- Apply data validation to control the type of data or the values that users enter into a cell
Starting from v2016 vol.2:
- Remove rows and columns that meet the specified condition
- Custom XML Parts examples
This sample demonstrates how to implement a simple custom binding scenario for the GridView extension by handling only sorting and paging operations in the corresponding Action methods.
To learn more on the GridView's custom data binding feature, please refer to the Custom Data Binding - Overview help topic.
Note that this sample provides a universal implementation approach - it can be easily adopted and used for every data source object that implements the IQueryable interface.
In short, the logic of this custom binding implementation is as follows:
In the GridView's Partial View (Views > Home > GridViewPartial.cshtml), the grid's CustomBindingRouteValuesCollection property is used to define handling actions for sorting and paging operations; the CallbackRouteValues property defines the action to handle all other (standard) grid callbacks.
In the Controller (Controller > HomeController.cs), the specified Action methods are implemented to update a specific grid view model object (GridViewModel that maintains the grid state) with the information of the performed operation (if required). Then, the grid view model's ProcessCustomBinding method is called to delegate a binding implementation to specific model-layer methods pointed by the method's certain parameters.
At the Model layer (Models > CustomBindingModel.cs), the two specified delegates are implemented to populate the grid view mode with the required data. Generally, in the provided implementation of model-level binding delegates, you just need to modify a single code line to point to your particular model object:
[C#]staticIQueryableModel{get{returnNorthwindDataProvider.GetCustomers();}}
Finally, the resulting grid view model object is passed from the Controller to the grid's Partial View as a Model. In the Partial View, the grid binds to the Model via the BindToCustomData method.
Note that when implementing the grid's custom data binding, the DevExpressEditorsBinder must be used instead of the default model binder to correctly transfer values from DevExpress editors back to the corresponding data model fields. In this code example, the DevExpressEditorsBinder is assigned to the ModelBinders.Binders.DefaultBinder property within the Global.asax file, thus overriding the default model binder.
This example demonstrates how to move ASPxGridView rows using buttons or jQuery Drag&Drop.
To keep the order of rows, it is necessary to set up an extra column to store row order indexes. Then, sort ASPxGridView by this column and deny sorting by other columns. This example stores this information in the unbound column and additionally puts a dictionary "row key = row index" to the session. We have implemented this approach only for demo purposes. You can store this information in your DataSource.
Updated:
We updated an example for v.14.2 to show how to save order information to a database and tune the ASPxGridView drag and drop appearance using the UI Draggable and Droppable plug-ins. If you need to check the unbound column implementation, choose the second item in the version build combo box.
See also:
T191258 - How to reorder GridView rows using buttons or drag-and-drop
E1810: How to use jQuery to drag and drop items from one ASPxGridView to another
E3850: How to reorder ASPxTreeList sibling nodes, using buttons or drag-and-drop
E4299: How to move up or down a line a row of ASPxGridView by using external buttons
Hello,
I have seen your example however I have a question from user view point. Once you start to drag a row button you don't have any way to tell which row you are dragging. So unless you remember the row to started with it will be diffcult for users to use this practically. Do you have a way to drag the entire row or have a button with some text to identify the row you are dragging? Please let me know if this is possible.
Added By: Jacob Blumberg at: 8/27/2013 4:05:00 PMI agree, that is what I am looking for too.
Added By: Hiren Joshi (Venture) at: 9/11/2013 10:54:22 AMI was able to use the link tag <a href=""><%#Eval("YourData")%></a> instead of the image; in order to over come the problem of knowing which row is being dragged. So now when I drag the row I can see the text that I am dragging.
Added By: Wouter Stichelbout at: 2/11/2014 7:54:23 AMI there an MVC equivalent?
Added By: Vasily (DevExpress Support) at: 2/11/2014 9:48:17 AMHi Wouter,
I have extracted your question to a separate ticket created on your behalf: Q466606: GridView - How to reorder GridView rows using buttons or drag-and-drop.
Your time and cooperation are appreciated.
Hello,
This approach much more resembles the way Telerik has implemented row dragging and dropping:
function InitalizejQuery() {
var openhand = "url(https://mail.google.com/mail/images/2/openhand.cur), move";
var closedhand = "url(https://mail.google.com/mail/images/2/closedhand.cur), move";
$('.dxgvDataRow, .dxgvFocusedRow').each(function () {
$(this).css({ "cursor": openhand });
});
$('.dxgvDataRow, .dxgvFocusedRow').draggable({
helper: function () {
var result = $("<table class='dxgvTable' cellspacing='0' cellpadding='0' style='opacity:0.7;background-color:#dddddd;'>").append($(this).clone()).append($("</table>"));
$("td", this).each(function (index) {
$("td", result).eq(index).css({ 'width': $(this).width() });
});
return result;
},
axis: "y",
start: function (event, ui) {
$("tr", $(this).parent()).each(function (index) {
$(this).css({ "cursor": closedhand });
$(this).removeClass('dxgvFocusedRow'); // this is the same as removing the focussedrowindex
$(this).addClass('dxgvDataRow');
});
$(this).addClass('dxgvFocusedRow');
},
stop: function (event, ui) {
$(this).css({ "cursor": openhand });
}
});
$('.dxgvDataRow, .dxgvFocusedRow').droppable({
drop: function (event, ui) {
var draggingRowKey = ui.draggable.find("input[type='hidden']").val();
var targetRowKey = $(this).find("input[type='hidden']").val();
gridView.PerformCallback("DRAGROW|" + draggingRowKey + '|' + targetRowKey);
}
, over: function (event, ui) {
var targetRowKey = $(this).find("input[type='hidden']").val();
var rowindex = gridView.keys.indexOf(targetRowKey);
window.setTimeout(function () { gridView.MakeRowVisibleNew(rowindex); }, 100);
$(this).addClass('borderClass');
}
, out: function (event, ui) {
$(this).removeClass('borderClass');
}
});
}
Best Regards,
Ernstjan Freriks
I am having difficulties figuring out how to actually use a field from the datasource to save the sorting order. Any help will be appreciated.
Added By: Artem (DevExpress Support) at: 12/9/2014 12:17:45 AMHello,
To process your post more efficiently, I created a separate ticket on your behalf: T184636: ASPxGridView - How to save sort order to a database using approach from the E4582. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.
Just a suggestion you should also make these for where people load data via datasource in the code behind because trying to translate this sometime to that things get messed up.
Added By: Anthony (DevExpress Support) at: 4/9/2015 1:07:37 PMHi Gregory,
You are always welcome to create a support ticket if you have difficulties in implementing approaches from our examples.
This example does not work if used within a MasterPage. Has anyone tried this?
Added By: Artem (DevExpress Support) at: 9/2/2015 1:14:20 PMHello Michael,
To process your recent post more efficiently, I created a separate ticket on your behalf: T285292: E4582 doesn't work if ASPxGridView in on a MasterPage. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.
Hello,
I've created a separate ticket on your behalf (T427213: How to reorder ASPxGridView rows using buttons or drag-and-drop if several ASPxGridViews are placed on the page ). It has been placed in our processing queue and will be answered shortly.
Hello Petar,
I've created a separate ticket on your behalf (T440888: How to reorder ASPxGridView rows using buttons or drag-and-drop and using List as a data source). It has been placed in our processing queue and will be answered shortly.
Petar,
To prevent discussing different questions in the same thread, I've created a separate ticket on your behalf (T440956: A potentially dangerous Request.Path value was detected from the client error occurs). It has been placed in our processing queue and will be answered shortly.