jquery response Grid tips: Grid editing in mobile phones

The interface Control Package NetAdvantage Ultimate provides a control set--ignite UI dedicated to JQUERY/HTML5 development, with the greatest feature of stable data visualization and rapid performance for HTML5. Its application to any browser, any platform, any Device response web design has caused our attention, after a period of testing, Hui is going to share with you, Ignite UI proud of the jquery response grid Some of the development tips.

The function of grid editing in mobile phone

This feature comes from the development of an app, we find that the editing function is not well implemented, and the problem is how to provide a better and more complete grid editing experience for users on such small-screen phones. The general implementation is to Exchange columns and all the visible editing of the grid, this is the desktop application of the more common experience of the grid, and this is clearly not appropriate in the phone. The grid editing function in mobile app should consist of dialog box, page and navigation. This can be accomplished by the row Edit template provided by the Ignite UI. This template provides an inline Edit dialog box that allows developers to skip the hidden fields and make the response grid user experience very good. Because the template allows many values to be false in JavaScript, you can also work with more than one hidden column without having to modify the state with the index back and forth. Developers can reuse code to implement this feature:

{
    name: ' Updating ',
    Roweditdialogopening:function (event, UI) {
        var columns = Ui.owner.grid.options.columns;
        for (i = 0; i < columns.length. ++i) {
            //use 0 instead of false to is able to differentiate when restoring state
  if (columns[i].hidden) Columns[i].hidden = 0
        }
    },
    Roweditdialogopened:function (event, UI) {
        var columns = Ui.owner.grid.options.columns;
        for (i = 0; i < columns.length; ++i) {
            if (Columns[i].hidden = = 0) Columns[i].hidden = true;
        }
    }
}
//..

Another problem that affects the user experience is that the dialog box is too small to make the dialog box as large as possible without causing scrolling to be displayed, which requires the dialog to be adaptive. Using roweditdialogopening, you can implement this requirement with the following code:

//...
Roweditdialogopening:function (event, UI) {
    if ($ (ui.owner.element). Iggridresponsive ("Getcurrentresponsivemode ")!=" desktop ") {
        ui.owner.options.rowEditDialogWidth = document.body.clientWidth * 0.9;
        Ui.owner.options.rowEditDialogHeight = Ui.owner.grid.element.height ();
        Ui.dialogElement.children ('. Ui-dialog-content '). CSS

(' Height ', ui.owner.grid.element.height ()--);
    var columns = ui.owner.grid.options.columns;
    for (i = 0; i < columns.length. ++i) {
        //use 0 instead of false to is able to differentiate when restoring state
  if (columns[i].hidden) Columns[i].hidden = 0
    }
},
//...