The trick of the jquery response grid: Dynamic Layout page

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.

Dynamic Layout page

The so-called grid dynamic layout page, refers to when the window is fixed, but the grid content and page elements can be scaled and moved around. This requirement is hardly any problem in desktop applications, but because of CSS media rules, this requirement is difficult to implement in mobile applications. However, you can do this by using a custom pattern configuration of the Ignite UI, specifying the response width in a custom responsive configuration, specifying a pattern parameter or element size (such as specifying the size of the grid element directly, without specifying the window size).

var expanded = []; $.ig.loader (function () {$ (' #grid '). Ighierarchicalgrid ({//... features: [{name: ' Respon Sive ', columnsettings: [{columnkey: ' DepartmentID ', classes: "Ui-hidden-phone
            "}, {columnkey: ' ModifiedDate ', classes:" Ui-hidden-phone "}],
                Responsivemodechanged:function (evt, UI) {expanded = [];
                var Hgrid = ui.owner.element.data ("Ighierarchicalgrid");
                        Ui.owner.grid.allRows (). each (function (index, ROW) {if (hgrid.expanded (row)) {
                    Expanded.push ($ (row). Data ("Row-idx"));
            }
                });
                }], Rowsrendered:function (evt, UI) {if (len = expanded.length) > 0) { for (i = 0; i < len; i++) {Ui.owner.element.data ("Ighierarchicalgrid"). Expand (Ui.owner.rowAt (Expanded.pop ()));
}
            }
        }
    }); });

The following image is a response dialog box that can be moved by built-in elements: