Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • jqGrid with asp.net MVC

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.30k
    Comment on it

    To bind jqGrid with asp.net MVC please see below steps.

    step 1: Download latest jqGrid from

    http://olex.openlogic.com/packages/jqgrid/

    http://www.trirand.com/blog/?page_id=6

    step 2: Add downloaded folder into your project's Script folder.

    step 3: Include latest jquery and jqGrid js files in your page.

    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.4.1.js")" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.6.custom.min.js")" />
    <script src="@Url.Content("~/Scripts/jquery3.8.2/src/i18n/grid.locale-en.js") " type="text/javascript"/>
    <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.base.js")" type="text/javascript" />
    <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.common.js")" type="text/javascript" />
    <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.formedit.js")" type="text/javascript" />
    <script src="@Url.Content("~/Scripts/jquery3.8.2/src/inlineEdit.js")" type="text/javascript" />
    <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.custom.js")" type="text/javascript" />
    <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.jquery.fmatter.js")" type="text/javascript" />
    <script src="@Url.Content("~/Scripts/jquery3.8.2/src/jqueryUI.js")" type="text/javascript" />
    <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.setcolumns.js")" type="text/javascript" />
    <script src="@Url.Content("~/Scripts/jquery3.8.2/src/jqModal.js")" type="text/javascript" />
    <script src="@Url.Content("~/Scripts/jquery3.8.2/src/jqDnR.js")" type="text/javascript" />
    

    step 4: Include jqGrid css in you page.

    <link href="@Url.Content("~/Scripts/jquery3.8.2/css/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
    

    step 5: Include below code in your page to initialize jqGrid component.

    $(document).ready(function () {
    
        var lastSel = 0;
        var countryId;
    
        var grid = jQuery("#list");
        $('#list').jqGrid({
            colNames: ['', 'Block', 'State', '', 'District', 'Created Date', 'Modified Date'],
    
            colModel: [
            { name: 'id', index: 'id', hidden: true, editable: false },
           { name: 'Name', index: 'Name', width: 162, align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 55, size: 33 }, editrules: { required: true, edithidden: true }, formoptions: { elmsuffix: '*' }, sortable: true },
           { name: 'StateName', index: 'StateName', align: 'left', width: 90, editable: true, edittype: 'select', editoptions: { dataUrl: _dirpath + 'Admin/StateSelect',
                dataEvents: [
                        {
                            type: 'change',
                            fn: function (e) {
    
                                getDistrict(this, 'DistrictId')
                            }
                        }]
            }, editrules: { required: true }, formoptions: { elmsuffix: '*' }
                },
              { name: 'StateId', index: 'StateId', align: 'left', editable: true, hidden: true, edittype: 'text', sortable: true },
                { name: 'DistrictId', index: 'DistrictId', width: 90, align: 'left', editable: true, edittype: 'select', editoptions: { dataUrl: _dirpath + 'Admin/DistrictSelectByState/00000000-0000-0000-0000-000000000000' }, editrules: { required: true }, formoptions: { elmsuffix: '*'} },
              { name: 'Created', index: 'Created', width: 210, align: 'left', datefmt: 'dd/mm/yyyy hh:mm:ss', editable: false, sortable: true },
            { name: 'Modified', index: 'Modified', width: 210, align: 'left', datefmt: 'dd/mm/yyyy hh:mm:ss', editable: false, sortable: true }
                 ],
            pager: jQuery('#pager'),
            sortname: 'Name',
            rowNum: 25,
            rowList: [10, 25, 50, 75, 150],
            sortorder: "asc",
            height: '100%',
            datatype: 'json',
    
            caption: 'Block Information',
            viewrecords: true,
            mtype: 'GET',
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                userdata: "userdata",
                loadonce: true
            },
            onSelectRow: function (id) {
                var row = $('#list').getRowData(id);
                StateId = row.StateId;
                var myurl = _dirpath + 'Admin/DistrictSelectByState/' + StateId;
                $("#list").jqGrid('setColProp', 'DistrictId', { editoptions: { dataUrl: myurl} });
    
                if (id && id != lastSel) {
                    jQuery('#list').restoreRow(lastSel);
                    lastSel = id;
    
                }
            },
            url: _dirpath + "Admin/GetAllBlocks"
        }).navGrid('#pager', { view: false, del: true, add: true, edit: true, search: false },
           { url: _dirpath + "Admin/UpdateBlock", closeAfterEdit: true, recreateForm: true }, // default settings for edit
           {url: _dirpath + "Admin/AddBlock", closeAfterAdd: true, recreateForm: true }, // default settings for add
           {url: _dirpath + "Admin/DeleteBlock", recreateForm: true }, // delete instead that del:false we need this
           {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
           {} /* view parameters*/
         );
    });
    

    step 6: Now include below html to your page to render jqGrid. Remember table id should be same as above jqGrid component initialized.

    <div>    
             <!-- the grid definition in html is a table tag with class 'scroll' -->
            <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
            <!-- pager definition. class scroll tels that we want to use the same theme as grid -->
            <div id="pager" class="scroll" style="text-align: center;"></div>
     </div>
    

    step 7: Create a controller and action. In my case controller is "AdminController" and action is "GetAllBlocks" as you can see in step 5 there is a code snippet as below. "_dirpath" is my dynamic path variable. This code will call your action when your page will be loaded.

    url: _dirpath + "Admin/GetAllBlocks"
    

    step 8: The code will be on your controller's action should like below in my case. Please note that column names as in below "row" should be same as in above step 5 jqGrid initialization.

    public JsonResult GetAllBlocks(GridSettings grid)
            {
                //get data from database to bind with gqGrid
                var query = objBlockService.GetAllBlocks();
    
                //count
                var count = query.Count();
    
                //paging
                var data = query.Skip((grid.PageIndex - 1) * grid.PageSize).Take(grid.PageSize).ToArray();
    
                //converting in grid format
                var result = new
                {
                    total = (int)Math.Ceiling((double)count / grid.PageSize),
                    page = grid.PageIndex,
                    records = count,
    
                    //below name should be same as used in jqGrid coloumn names
                    rows = (from block in data
                            select new
                            {
                                id = block.Id,
                                Name = block.Name,
                                DistrictId = block.District.Name,
                                StateName = block.District.State.Name,
                                StateId = block.District.StateId,
                                Modified = block.Modified.ToString("dd/MM/yyyy hh:mm:ss"),
                                Created = block.Created.ToString("dd/MM/yyyy hh:mm:ss")
                            }).ToArray()
                };
    
                //convert to JSON and return to client
                return Json(result, JsonRequestBehavior.AllowGet);
            }
    

    step 9: For Add, Edit and Delete set urls accordingly in my case as in step 5 see below code snippet.

    { url: _dirpath + "Admin/UpdateBlock", closeAfterEdit: true, recreateForm: true }, // default settings for edit
           {url: _dirpath + "Admin/AddBlock", closeAfterAdd: true, recreateForm: true }, // default settings for add
           {url: _dirpath + "Admin/DeleteBlock", recreateForm: true }, // delete instead that del:false we need this
           {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
           {} /* view parameters*/
         ); 
    

    wtep 10: Create actions for Add/Edit/Delete in your controller. For my case see below code.

    public void AddBlock(Block objBlock)
    {
       objBlock.Modified = DateTime.Now;
       objBlock.Created = DateTime.Now;
       objBlockService.AddBlock(objBlock);
    }
    
    public void UpdateBlock(Guid Id, Block obj)
    {
       objBlockService.UpdateBlock(Id, obj);
    }
    
    public void DeleteBlock(Guid Id)
    {
         objBlockService.DeleteBlock(Id);
    }
    

    See output below:

    jqGrid View:

    alt text

    jqGrid Add:

    alt text

    jqGrid Edit:

    alt text

    jqGrid Delete;

    alt text

    Enjoy great coding experience..... :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: