jquery response Grid tips: Grid editing in mobile phones

Source: Internet
Author: User
Tags implement

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
    }
},
//...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.