Navigation

	Home Page
	Index
	All Pages

Quick Search

Advanced Search »

Contributor Links

	Create a new Page
	Administration
	File Management
	Login/Logout
	Your Profile

Other Wiki Sections

Software

Page History: Quick Reference - jqGrid

Compare Page Revisions

« Older Revision - Back to Page History - Newer Revision »

Page Revision: Thu, Oct 25, 2012, 10:18 AM

This page is a Draft. Its content is not complete and might contain errors.

Data Provider¶

View Model¶

Create the View Model in the Models folder

public class StaffViewModel : CommonViewModel
{
    public string UserName { get; set; }
    public bool IsApproved { get; set; }
}

Controller¶

{copytext|controller}

public class SecurityController : JQGridController
{
    public ActionResult Index()
    {
        return View(new StaffViewModel());
    }

    [HttpGet]
    public JsonResult GetUsersForManager(string sidx, string sord, int page, int rows)
    {
        string currentUserName = HttpContext.User.Identity.Name;
        DataProvider dp = new DataProvider(Common.Common.RequestContext);
        IQueryable<UserResult> results = dp.GetUsersForManager(currentUserName);
        JsonResult result = JQGridResult<UserResult>(results, sidx, sord, page, rows);
        return result;
    }

    [HttpPost, Authorize]
    public JsonResult MaintainUserForManager(UserResult o, FormCollection formData)
    {
        int id;
        DataProvider dp;

        switch (formData["oper"])
        {
            case "edit":
                o = new UserResult
                {
                    UserName = formData["UserName"],
                    Active = formData.GetBool("Active")
                };

                dp = new DataProvider(Common.Common.RequestContext);
                dp.SaveUser(o);
                break;

            case "del":
                if (formData.TryGetInteger("id", out id))
                {
                    //dp = new DataProvider(Common.Common.RequestContext);
                    //dp.DeleteUser(id);
                }
                break;
        }
        return Json(null, JsonRequestBehavior.AllowGet);
    }

}

Client Side¶

1. Create your view model and view.

2. Add the following code to your ASPX/HTML page

{copytext|html}

<div id="uxUserGridDiv"><table id="uxUserGrid"></table></div>
<div id="uxUserGridPager"></div>

3. Create a new JS file and in the HEAD of your ASPX/HTML file, load it via a SCRIPT tag.

4. In your JS file, add the following code.

{copytext|js}

/*===============================================================================================*/
$(document).ready(function () {

    loadUserGrid();

});
/*===============================================================================================*/
function loadUserGrid() {

    $("#uxUserGrid").jqGrid({
        url: '/Security/GetUsersForManager',
        editurl: '/Security/MaintainUserForManager',
        colModel: [
            {label: 'UserName', name: 'UserName',
                index: 'UserName', jsonmap: 'UserName',
                width: 150, align: 'left', editable: false
            },
            { label: 'Active', name: 'Active', index: 'Active', jsonmap: 'Active',
                width: 50, align: 'center', editable: true, edittype: 'checkbox',
                formatter: 'checkbox'
            },
            { label: 'Actions', name: 'Actions', index: 'Actions', width: 75, sortable: false,
                formatter: actionRowNoDelFormatter
            }
        ],
        pager: jQuery('#uxUserGridPager'),
        sortname: 'UserName',
        sortorder: 'asc',
        imgpath: '/Content/Themes/Redmond/Images',
        rowNum: -1,
        postData: { propertyId: getPropertyID },
        onSelectRow: function (id) { onGridRowSelect('uxUserGrid', id); }
    }).navGrid('#uxUserGridPager',
    {
        edit: false, add: false, del: false, search: false, refresh: true
    },
    updateDialog,
    updateDialog,
    updateDialog
    );
}

Formatting Dates¶

In the colmodel for a date column, include the following, adjusting the newformat as needed.

align: 'center', formatter: 'date', formatoptions: { newformat: 'm/d/Y h:i:s A' },
                editoptions: { dataInit: function (el) { $(el).datepicker(); } }

Jasinski Technical Wiki