This is the project that you will get if you go though the DevExtreme SPA Framework - App Orientation video tutorial.
↧
DevExtreme SPA - How to define different view HTML templates for portrait and landscape device orientation
↧
How to allow an end-user to move the rows in a grid up and down if the grid is bound to a DataTable
This example demonstrates how to swap two rows to move a specific row up or down
Question Comments
Added By: dsk96m at: 9/19/2013 9:07:54 AM
This code is great, but does not work if you delete a row. If I have 6 items in the list and I delete item 2, this code doesnt work. How do we make it work in that case. Also, the ordering doesnt work, the numbers change to like 10.5, etc.
Added By: dsk96m at: 9/19/2013 9:09:05 AMNevermind the second part of that. But how do we make this work so i can delete a row.
↧
↧
How to reorder ASPxGridView rows using buttons or drag-and-drop
This example demonstrates how to move ASPxGridView rows using buttons or jQuerry 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.
See also:
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
Question Comments
Added By: Hiren Joshi (Venture) at: 8/20/2013 3:03:21 PM
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
↧
How to enable unobtrusive validation for GridView using the EditForm template
Note. Starting with DevExpress 14.1, the ASP.NET MVC GridView extension fully supports the unobtrusive client validation for built-in edit forms. Refer to the Support unobtrusive validation for the GridView's built-in edit form thread to learn more.
The example illustrates how to implement unobtrusive validation for GridView editors. Create an Edit Form template that contains a form and all necessary editors. Corresponding validation attributes will be rendered for the template.
The main requirement is that the updating should be performed using a helper script. In the script block, we prepare validation conditions and check them for the form (that is located within the Edit Form template). If all editors are valid, the grid's UpdateEdit command is invoked.
[JScript]function UpdateGridView(){ PrepareValidationScripts();var validator = $.data($('#frmProduct')[0], 'validator');if(validator.form()) grid.UpdateEdit();}function PrepareValidationScripts(){var form = $('#frmProduct');if(form.executed)return; form.removeData("validator"); $.validator.unobtrusive.parse(document); form.executed = true;}
GridView - EditForm template - How to enable Microsoft MVC validation
GridView - How to perform a custom client side unobtrusive validation for the EditForm template using a custom attribute
Question Comments
Added By: K R at: 6/14/2013 5:30:59 AM
Unable to download this example, error below
ICAP Error (icap_error)
An error occurred while performing an ICAP operation: Maximum file size exceeded; File: GetExample; Sub File: Content\Site.css; Vendor: Kaspersky Labs; Engine error code: 0x00000000; Engine version: 8.1.8.79; Pattern version: 130614.102700.10398212; Pattern date: 2013.06.14 10:27:00
There could be a network problem, the ICAP service may be misconfigured, or the ICAP server may have reported an error.
For assistance, contact your network support team.
Added By: Vasily (DevExpress Support) at: 6/17/2013 8:00:14 AMHi,
We detected that you have posted the same question to ticket Q502783 (ICAP Error occurs when downloading example:"An error occurred while performing an ICAP operation: Maximum file size exceeded"). We kindly ask you to avoid posting duplicated issues in the future. This will save time, and will allow us to provide better service.
We will post our answer in ticket Q502783 (ICAP Error occurs when downloading example:"An error occurred while performing an ICAP operation: Maximum file size exceeded").
↧
How to force the grid to stay in Edit mode
This example demonstrates how to programmatically switch the grid into edit mode, and to save changes when the row focus moves.
See Also:
How to implement a single cell editing feature in the ASPxGridView
ASPxGridView - Multi-Row Editing
How to implement instant editing in the ASPxTreeList
Question Comments
Added By: Sushant Deshpande at: 6/23/2014 11:00:42 AM
Hi,
I have used this piece of code. but I have to click on the row to go into edit mode.
Is there any way to keep all the editable fields always into edit mode, so that i don't have to click on the row to go into edit mode?
Thanks
↧
↧
How to get all GridView selected keys and pass them to a Controller
This example illustrates how to collect all selected values (for example, keys) on the client side via the ASPxClientGridView.GetSelectedFieldValues method and pass them to:
- The GridView callback action via the e.customArgs dictionary (Passing Values to Controller Action Through Callbacks);
- Any controller post action via a hidden input element.
Question Comments
Added By: hernan bogantes at: 12/6/2013 7:28:25 AM
I checked your sample against my code and the only difference is the line below. But if when I added it, it grid crash., which means the screens do not render the grid.
settings.ClientSideEvents.SelectionChanged = "OnSelectionChanged";
----------------------------------------------
I am still having the same issue.
Maybe I don't understand the example correctly, but I would have expected, that in GridViewEditingPartial.cshtml is a line "settings.ClientSideEvents.BeginCallback = "OnBeginCallback";" passing the selected values to the controller. But there is none. Maybe this example is broken?
Added By: Anthony (DevExpress Support) at: 6/23/2014 12:19:48 PM Hi Rufus,We will provide you with an answer in the http://www.devexpress.com/Support/Center/Example/Details/E20065 seems to be broken ticket.
↧
ASPxTextBox - How to attach the jQuery AutoComplete plugin
This example illustrates how to attach the jQuery AutoComplete plugin to the ASPxTextBox editor.
Usually when it is necessary to attach jQuery selectors to any existing HTML content, it is recommended to use the $(document).ready function that can be employed for handling the state when DOM is fully loaded.
When using DevExpress ASP.NET Controls, it is recommended to handle the client-side ASPxClientGlobalEvents.ControlsInitialized event that is raised after client object models of all DevExpress web controls contained within the page have been initialized or the client-side ASPxClientControl.Init event (rather than the use of the jQuery $(document).ready function) of the required DevExpress ASP.NET control to ensure that a corresponding client-side control's programmatic object is initialized.
GlobalEvents.aspx:
This example illustrates how to use an invisible ASPxGlobalEvents component to initialize the required DevExpress ASP.NET control on the client side:
To get access to the client-side programmatic object of a particular DevExpress ASP.NET control, use the ClientInstanceName property (refer to the Client-Side API Availability for a Web Control topic in our documentation to learn more about the client-side API availability).
ControlEvents.aspx:
This example demonstrates how to use the control's client-side Init event where the client-side control's programmatic object is available directly via the "s" (sender) object (refer to the Client-Side Events topic in our documentation to learn more about common concepts of how to use client-side events of the DevExpress ASP.NET Controls).
Question Comments
Added By: Nathaniel M Nelson at: 4/25/2013 5:36:08 PM
Had troubles attaching to an ASPxTextBox in a GridView popup form. Make sure to add a high z-index so that the autocomplete dropdown shows up on top of the form instead of behind it. Something like :
.ui-autocomplete
{
z-index: 999999 !important;
}
Would you please create a new ticket in our Support Center regarding this issue and share your current progress with us?
Added By: Nathaniel M Nelson at: 4/29/2013 11:35:00 AMSure Mike, I've created a ticket here:
http://www.devexpress.com/Support/Center/Question/Details/Q491906
Added By: Waqar Ahmed 3 at: 6/23/2014 3:41:41 PMHi,
do you know why I get following error?
JavaScript runtime error: 'OnControlsInitialized' is undefined
Thanks
Waqar
↧
ASPxGridView - How to update total summaries on the client side in Batch Edit mode
Question Comments
Added By: Dhaval.Shah at: 6/23/2014 5:25:31 PM
Hi Larry,
Good example for us, I must admit.
I noticed one thing:
I modify C2 value and press TAB, the total updates correctly.
However, when I "cancel changes" the total does not revert to the previous (unchanged) one.
Thought I'd let you know.
Best regards
↧
How to validate Captcha using $.ajax
This example demonstrates how to implement Model and Captcha validation using $.ajax.The main idea is to use the jQuery serialize function to manually collect values from all inputs inside form. Then pass them to the Controller using $.ajax.
↧
↧
ColorPickEdit - How to modify boundaries of the color box that shows the selected color
This example demonstrates how to modify the boundaries of a rectangle that shows the selected color.
![]()
↧
How to determine the page number of a clicked PDF page
This example demonstrates how to identify a PDF page in the document by using the GetDocumentPosition method of the PdfViewer.
↧
Custom GridControl - How to create a vertical embedded Navigator
This example demonstrates how to create a custom GridControl that supports a vertical navigator.
↧
How to save callback state in the Session object
The ASPxPivotGrid stores its intermediate state in a hidden CallbackState field. In some cases, especially when the ASPxPivotGrid is connected to a large OLAP cube, this state can have a significant size. If the CallbackState field affects your web application performance, you can store it in the Session object or a static variable. This example demonstrates how to do this.
↧
↧
How to configure dxMenu
This is the project that you will get if you go though the HTML5 Menu video tutorial.
↧
How to connect different ORM data models to several databases within a single application
Scenario
This example demonstrates how to create custom XAF modules with custom business objects and logic that would work with separate databases. These modules do not depend on each other and thus can be reused in other applications as a whole.
Usually, the connection to the database is set up in the executable application project. Typically, it is performed in the configuration file or directly in the code of the application's designer or within the Main function/Global application class. To learn more, please check out this help topic: Connect an XAF Application to a Database Provider In this example, you will learn how to establish a connection to the database directly from your module projects.
Steps to implement
0. Create a new XAF solution using one of predefined project templates;
1. Add two XAF modules into this solution using the DevExpress vXX.X XAF Module project template;
2. Add required persistent classes into these modules as shown in the ClassLibraryN/PersistentClassN.xx files of this example solution;
3. Add service ModuleInfo classes into these modules as shown in the ClassLibraryN/ModuleInfoN.xx files of this example solution;
4. In YourModuleName/Module.xx files, override the Setup(XafApplication application) methods of the ModuleBase descendants to handle the CreateCustomObjectSpaceProvider event of the XafApplication class as shown in the ClassLibraryX/XafModuleN.xx files of this example solution;
5. Build the solution, invoke the Module Designer for the platform-agnostic module (YourSolutionName.Module/Module.xx), and drag the created custom modules from the Toolbox:
Alternatively, you can add the same modules via the Application Designer invoked for the executable projects (as demonstrated in this example).
6. Declare connection strings in the configuration files of your application as shown in the TwoXpoModelsForDifferentDatabases.Web\Web.config and TwoXpoModelsForDifferentDatabases.Win\App.config files (see ConnectionStringDatabaseX under the <connectionStrings/> element). These connection strings are used in the modules via the ConfigurationManager.ConnectionStrings API, but you can always modify the way your modules obtains this data.
Important notes
1. Each module has a single static XPObjectSpaceProvider instance, which is initialized only once during the application life cycle.
2. Each ModuleUpdater class checks the ObjectSpace property to determine whether it is valid to create initial data of a certain type from this module.
3. Business classes linked to different ObjectSpaceProviders are considered to be isolated from each other and thus cannot have any links between them (e.g., have an association). Consider using the How to prevent altering the legacy database schema when creating an XAF application or alternative solutions if you need interlinks between classes from different data stores.
See also:
How to prevent altering the legacy database schema when creating an XAF application
↧
OBSOLETE - How to setup a connection to the database from a Module project instead of an executable application project
=====================================
This example is now obsolete. Instead, refer to the How to connect different ORM data models to several databases within a single application one.
=====================================
Usually, the connection to the database is set up in the executable application project. Usually, it is performed in the configuration file or directly in the code of the application's designer or within the Main function/Global application class. To learn more, please check out this help topic: Connect an XAF Application to a Database Provider
In this example, you will learn how to establish a connection to the database directly from your Module project. To do this, you will have to override the Setup method of your Module class and handle the CreateCustomObjectSpaceProvider event of the XafApplication class.
See Also:
How to implement XPO data models connected to different databases within a single application
↧
How to: Adjust the size of pop up dialogs
The complete description is available in the How to: Adjust the Size of Pop up Dialogs displayed in ASP.NET Applications topic.
↧
↧
How to set the size of the popup window shown via the PopupWindowShowAction in WinForms
==========================================
This example is now obsolete. Instead, refer to the How to: Adjust the size of pop up dialogs example.
==========================================
To accomplish this you can handle the CustomizeTemplate event of the PopupWindowShowAction or XafApplication classes and access the actual template to set its size as needed.
See Also:
How to Show a Window via an Action
Question Comments
Added By: Mario Blatarić at: 7/30/2013 5:08:24 AM
Could you create Web example as well?
It seems this is not as straightforward for Web.
Thanks for the feedback, we will consider updating this example to include a solution from the http://documentation.devexpress.com/#Xaf/CustomDocument3456 help article.
Added By: Hitha at: 6/24/2014 3:31:43 AMHi,
I have set the size as per your code but that is not the size I see when the pop window is shown.
((PopupForm)e.Template).Size = new System.Drawing.Size(400, 130);
Added to that if I have enabled IsSizeable then the window size is properly set(but not set to 400,130) without empty space and if IsSizeable is disabled then it is set to some random value with empty space below/above.
Please suggest a way around this. thanks
Added By: Dennis (DevExpress Support) at: 6/24/2014 7:03:06 AM @Hitha: I suggest you additionally handle the HandleCreated event as demonstrated in the How to define the size of a popup ticket. I hope this helps.↧
ASPxNavBar - How to access controls contained within an ItemTemplate on the client side
This sample demonstrates how a check box editor, contained within a navbar's ItemTempate, can be accessed on the client side by using the editor's ClientInstanceName property value generated dynamically.
See Also:
How to refer to a client-side control within a UserControl
How to access and manipulate controls, contained within a data bound NavBar's ItemTemplate, on the client side
Question Comments
Added By: Rory Pratt at: 6/24/2014 3:19:46 PM
I am trying something similar ... A ASPxTreeList inside the DetailRow of a gridview.
The script for adding to the cbItems array ...<script type='text/javascript'>cbItems.push(new Array(" + GetGroupIndex(Container) etc will not add to the items in the array...but if i put the JS in the <dataRow> tags it will.
Any ideas to why this is happening?
Thanks Rory
↧
How to create a BandedGridView descendant class and register it for design-time use
This is an example of a custom BandedGridView and a custom control that inherits the DevExpress.XtraGrid.GridControl. Make sure to build the project prior to opening Form1 in the designer.
To obtain general information about creating and registering a custom view descendant class at design time, refer to the following Knowledge Base article: How to create a GridView descendant class and register it for design-time use.
↧