Sunday, January 4, 2015

Gridx using Dojo

  function loadGrid() {
            showLoader();
            var skuStructure = [
           { field: 'Name', name: 'Name' },
           { field: 'Code', name: 'Code' },
           { field: 'Description', name: 'Description' },
           {
               field: 'DepartmentID', sortable: false, name: 'Actions',
               decorator: function (data) {
                   return "<img src='@Url.Content("~/Content/Img/editIcon.png")' class='clickCurosr' onclick='editDept(" + data + ")' />" + '&nbsp;' + "<img src='@Url.Content("~/Content/Img/delete.png")' title='delete' class='clickCurosr' onclick='deleteDept(" + data + ")' />"; //This is a template string.;; //This is a template string.;;
               }
           }
            ];
            require([
            "gridx/Grid",
            "gridx/core/model/cache/Sync",
            "gridx/modules/SingleSort",
            "gridx/modules/Body",
            "dojo/store/Memory",
            "dijit/registry",
            "dojo/ready",
            'gridx/modules/Pagination',
            'gridx/modules/pagination/PaginationBar',
            "dojo/domReady!"],
            function (Grid, Cache, SingleSort, GridBody, Memory, registry, ready) {
                dojo.xhr.get({
                    url: '@Url.Action("GetAllDepartments", "Department")',
                    handleAs: "json",
                    load: function (restData) {
                        var store = new Memory({
                            data: restData,
                            idProperty: 'DepartmentID'
                        }
                            );
                        if (registry.byId('my_gridX')) grid.destroy();
                        grid = new Grid({
                            id: "my_gridX",
                            cacheClass: Cache,
                            store: store,
                            structure: skuStructure,
                            autoHeight: true,
                            pageSize: 10,
                            vScrollerBuffSize: 10,
                            filterBarCloseButton: false,
                            barTop: [
                                                       {
                                                           content: "<b>Departments</b>"
                                                       },
                                                           {
                                                               plugin: new dijit.form.Button({
                                                                   label: "Add new",
                                                                   height: '10px',
                                                                   iconClass: "dijitIconNewTask",
                                                                   onClick: function () {
                                                                       var frmNewBook = registry.byId('addform');
                                                                       frmNewBook.reset();
                                                                       dijit.byId("mdlDepartmet").show();
                                                                       registry.byId('btnSave').set('disabled',false);
                                                                       document.getElementById("DepartmentID").value = 0;

                                                                   }
                                                               }), style: 'text-align:right;'
                                                           }
                            ],
                            modules: [
                                SingleSort,
                                  'gridx/modules/Pagination',
                    'gridx/modules/pagination/PaginationBar',
                            ]
                        });

                        //Put it into the DOM tree.
                        grid.placeAt('gridNode');
                        grid.startup();
                        hideLoader();
                    }

                });
            })
        }
   <div id="gridNode" style="width: 100%;"></div>

No comments:

Post a Comment