Loading jqGrid from Ajax Post action

Question

I have simple report page- a couple of text boxes where when data is entered and submitted I want to load the jqgrid on the same page asynchronously. I am using the MVC version of JQGrid.

without a jqgrid I am able to load a table data and my view looks like below

@using (Ajax.BeginForm("GetReport", new AjaxOptions {UpdateTargetId = "result", HttpMethod = "Post" }))
{
        <div class="editor-label">Start Date</div>
    <div class="editor-field">@Html.Editor("StartDate", "DateTime")</div>

    <div class="editor-label">End Date</div>
    <div class="editor-field">@Html.Editor("EndDate", "DateTime")</div>

    <input type="submit" value="Submit" />
}


<div id="result"></div>

instead of a result being a table I want to display a jqGrid in its place. A jqGrid which is defined as below.

@Html.Trirand().JQGrid(Model.ReportGrid, "ReportGrid")

How do I achieve this?

Answer 1

After much struggling here is what I did.I have a main view and a partial view. Initially the main view does not contain the partial view. When data is submitted , the partial view is loaded.

MyReport.cshtml

@{
    ViewBag.Title = "Report";
}
<h2>Report</h2>  
<br />    
@using (Ajax.BeginForm("GetReportData", new AjaxOptions { UpdateTargetId = "result", HttpMethod = "Post", InsertionMode = InsertionMode.Replace}))
{

     <div class="editor-label">Start Date</div>
    <div class="editor-field">@Html.Editor("StartDate", "DateTime")</div>

    <div class="editor-label">End Date</div>
    <div class="editor-field">@Html.Editor("EndDate", "DateTime")</div>

    <input type="submit" value="Submit" />
}

<div id="result">

</div> 

Then I have a partial view of the Grid- MyReportPartial.cshtml

@model MyGridModel
@using Trirand.Web.Mvc    
<link href="@Url.Content("~/Content/theme/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/trirand/i18n/grid.locale-en.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/trirand/jquery.jqGrid.min.js")"></script>

<br />
 @Html.Trirand().JQGrid(Model.Grid, "ReportGrid")

My Controller has the following

 public ActionResult MyReport()
        {
            var gridModel = new Models.Grid.EmpHeadcountGridModel();
            var grid = gridModel.MyGrid;
            SetupHeadCountGrid(grid, DateTime.Now.ToShortDateString(), DateTime.Now.ToShortDateString());
            return View(gridModel);
        }
        public ActionResult GetReportData(string startdate ,string enddate)
        {
            var gridModel = new Models.Grid.MyGridModel();
            var grid = gridModel.EmpHeadcountGrid;
            SetupHeadCountGrid(grid,costcenterid,startdate,enddate);

            return PartialView("MyReportPartial",gridModel);


        }


        private void SetupHeadCountGrid(JQGrid grid,int costcenterid,string startdate,string enddate)
        {
            grid.ID = "ReportGrid";
            grid.DataUrl = Url.Action("GetHeadcountData") + "?startdate=" + startdate + "&enddate=" + enddate;
        }

       public JsonResult GetHeadcountData(string startdate, string enddate)
        {
            DateTime startdt = DateTime.Parse(startdate);
            DateTime enddt = DateTime.Parse(enddate + " 23:59:59");

            var gridModel = new Models.Grid.MyGridModel();

            var query= { soem query using date criteria}
            gridModel.MyGrid.DataSource = query;
            return gridModel.MyGrid.DataBind();
        }

Answer 2

I'll step out how I would do it, which I think would work for you as well (I build a number of jqGrids with a MVC3 backend.

You already have the HTML component, or you could use something like this.

<div id="ExampleGridContainer" >
    <table id="ExampleGridName"  class="scroll" cellpadding="0" cellspacing="0" ></table>
    <div id="ExampleGridPager" class="scroll" style="text-align:center;"></div>
</div>

Then for your Javascript you would need to include a reference to both (in this example I"m using English as my location)

<script src="@Url.Content("~/Scripts/trirand/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/trirand/jquery.jqGrid.min.js")" type="text/javascript"></script>

You could include this on your page if it was a one of or in your _Layout.chtml

Then inside your script portion on the view you could build somthing similar to

<script type="text/javascript">
    $(document).ready(function () {

    //initalize jqGrid
    $('#ExampleGridName').jqGrid({
        datatype: 'json',
        url: '/ControllerName/ActionName',
        colNames: [ 'ColumnOneName', 'ColumnTwoName']
        colModel: [
        { name: 'ColumnOneName', //etc}
        { name: 'ColumnTwoName', //etc}
        ],
        pager: $('#ExampleGridPager'),
        rowNum: 5,
        rowList: [5,10,20],
        sortname: 'ColumnOneName',
        //etc
        //rest of grid settings
    });
});
</script>

Now in the example above with the datatype: 'json', and the url: property filled out when the view is displayed and the ready event is processed your grid will go out to the URL and look for data. If you want to do this later on after another action, or repeat it dynamically you can start off with the datatype: 'local', and no url: property.

When it comes time to set these properties and reload the grid you would either:

//set the `datatype:` and `url:` properties and load the grid
$('#ExampleGridName').jqGrid('setGridParam', { datatype: 'json', url: '/ControllerName/ActionName' }).trigger('reloadGrid', [{ page: 1}]);

//reload the grid if the `datatype:` and `url:` properties are already configured
$('#ExampleGridName').jqGrid().trigger('reloadGrid', [{ page: 1}]);

On your Controller you would have an action that would be able to respond to the requests for data and produce the results in a JSON format. This by no means is anything beyond a basic example of how to get up and running with a MVC3 jqGrid with dynamic loading, and there are many more advanced filtering, searching, etc options.

public ActionResult ActionName(string sidx, string sord, int page, int rows, bool _search, string filters)
{
 //load data from somthing, 
IQuerable<Object> results = database.getresults //whatever you want to populate a set of data really

int totalRecords = results.Count();

var pagedResults = results.OrderBy(sidx + " " + sord).Skip((page -1) * rows).Take(rows);

    var jsonData = new
    {
        total = (totalRecords + rows - 1) / rows,
        page = page,
        records = totalRecords,
        rows = (
            from tempValue in pagedResults.ToList()                    
            select new
            {
                cell = new string[] {       
                    tempValue.ColumnOneValue,
                    tempValue.ColumnTwoIntValue.ToString(),
                    //Etc
            }).ToArray()

    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}//ActionName

That would be a very basic way to display a jqGrid and then dynamically interact with it after other actions/events. enter code here