Geek Answers Handbook

Sort jqGrid in ASP.NET MVC client view using jQuery and LINQ-to-Entities

I am jQuery noob, so I'm sure I am missing something simple here.

I have jqGrid working with an action that creates JSON data from a LINQ-to-Entities operation. But when I click on the column headers in the browser, the rows are not sorted. An up / down indicator appears, but nothing else happens.

The necessary JavaScript and CSS links are in the header of the main page:

<script src = "/ Scripts / jquery-1.3.2.min.js" type = "text / javascript"> </script>
<! - CSS and JavaScript files for jqGrid to display on Details pages ->
<link rel = "stylesheet" type = "text / css" href = "/ scripts / jQuery / jqGrid-3.4.4 / themes / green / grid.css" title = "green" media = "screen" />
<script src = "/ Scripts / jQuery / jqGrid-3.4.4 / jquery.jqGrid.js" type = "text / javascript"> </script>
<script src = "/ Scripts / jQuery / jqGrid-3.4.4 / js / jqModal.js" type = "text / javascript"> </script>
<script src = "/ Scripts / jQuery / jqGrid-3.4.4 / js / jqDnR.js" type = "text / javascript"> </script>

Here is my initialization code:

// jqGrid setup.
$ ("# gridlist"). jqGrid ({
    url: '/ Contact / GridData',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['ID', 'First Name', 'Last Name', 'Organization'],
    colModel: [
        {name: 'id', index: 'id', width: 40, align: 'left', resizable: true},
        {name: 'first_name', index: 'first_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text"},
        {name: 'last_name', index: 'last_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text"},
        {name: 'organization', index: 'organization', width: 300, align: 'left', resizable: true, sortable: true, sorttype: "text"}],
    pager: jQuery ('# pager'),
    rowNum: 5,
    rowList: [5, 10, 20, 50],
    repeatitems: false,
    viewrecords: true,
    imgpath: '/scripts/jQuery/jqGrid-3.4.4/themes/green/images',
    caption: 'Contacts'
});

HTML:

    <h3>My Grid Data</h3>
    <table id="gridlist" class="scroll" cellpadding="0" cellspacing="0">
    </table>
    <div id="pager" class="scroll" style="text-align:center;">
    </div>

, , :

public ActionResult GridData()
{
    var page = new { page = 1 };

    IEnumerable contacts = _db.ContactSet;
    int i = 0;
    var rows = new object[contacts.Count()];

    foreach (Contact contact in contacts)
    {
        rows[i] = new { id = contact.ID, cell = new[] { contact.ID.ToString(), contact.First_Name, contact.Last_Name, contact.Organization } };
        i++;
    }

    var result = new JsonResult();
    result.Data = new { page = 1, records = 2, rows, total = 1 };

    return result;
}

, ?

+5
4

. . , , . , , , . , .

, sidx sord ( ) . sidx . sord , asc desc.

, , ( LINQ to Objects). LINQ to Entities ; LINQ / . - .

+4
  I think below example should do it. 2 important points make sure your sort column has "it" keyword as prefix. (thats for linq to know). second you load only the number of objects array element as the rows the query can read.

  var context = new HaackOverflowDataContext();

    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = context.Question.Count();
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

    var questions = context.Question.OrderBy("it."+ sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);

    int i = 0;
    var rowsObj = new object[pageSize>totalRecords ?  totalRecords : pageSize];

    foreach (Question q in questions)
    {
        rowsObj[i] = new { id = q.Id, cell = new object[] { q.Id, q.Votes, q.Title } };
        i++;
    }

    var result = new JsonResult();
    result.Data = new
    {
        total = totalPages,
        page = page,
        records = totalRecords,
        rows = rowsObj
    };

    return result;

www.anuj.co.in

... , :)

+2

, , , . LINQ to Entities, . -, jqGrid ( , ):


$(document).ready(function() {

    // Set up jqGrid for the report search results table.
    // This is displayed in a tab in the bottom section of the master page.
    $("#searchResultList").jqGrid({
        url: '/Report/GetResultsL2E/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['', 'ID', 'Title', 'Post_Date', 'Start_Date', 'End_Date', 'Summary'],
        colModel: [
          { name: 'act', index: 'act', width: 75, sortable: false },
          { name: 'ID', index: 'ID', width: 40, align: 'left', hidden: true },
          { name: 'Title', index: 'Title', width: 150, align: 'left' },
          { name: 'Post_Date', index: 'Post_Date', width: 80, align: 'left', formatter: 'date' },
          { name: 'Start_Date', index: 'Start_Date', width: 80, align: 'left', formatter: 'date' },
          { name: 'End_Date', index: 'End_Date', width: 80, align: 'left', formatter: 'date' },
          { name: 'Summary', index: 'Summary', width: 240, align: 'left' }
        ],
        pager: jQuery('#searchResultPager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'Title',
        sortorder: "asc",
        viewrecords: true,
        imgpath: '/Scripts/jqGrid/themes/green/images',
        caption: 'Report Search Results', 
        editurl: "/Report/Edit",
        scroll: true,
        height: 'auto',
        recordtext: ' Reports',
        pgtext: ' of ',
        multiselect: true, 
        multiboxonly: true, //adds check box column
        altRows: true,
        loadComplete: function() {
            var ids = jQuery("#searchResultList").getDataIDs();
            for (var i = 0; i ";
                se = "";
                ce = "";
                jQuery("#searchResultList").setRowData(ids[i], { act: be + se + ce })
            }
        }
    }).navGrid('#searchResultPager',
    { edit: false, add: false, del: false, search: false }, //options 
    {height: 280, reloadAfterSubmit: false }, // edit options 
    {height: 280, reloadAfterSubmit: false }, // add options 
    {reloadAfterSubmit: false }, // del options 
    {} // search options 
    );
});

:

/// 
/// Query the ReportSet to return a paged, sorted set of Report entity properties in response to a call from a view.
/// 
/// The name of the column to use for sorting.
/// The order of the sort (ascending or descending).
/// The number of the page to return to the calling process.
/// The number of rows to return for the page.
/// This ActionResult returns a JSON result to be used by a jqGrid using the jQuery library.
/// jQuery requires a script tag linking the jQuery.js script.
/// jqGrid requires stylesheet links to the following scripts and stylesheets:
/// 
/// jQuery/themes/base/ui.all.css
/// jqGrid/themes/green/grid.css (or other theme CSS file)
/// jqGrid/jquery.jqGrid.js
/// jqGrid/grid.base.js
/// jqGrid/js/jqModal.js
/// jqGrid/js/jqDnR.js
/// 
public ActionResult GetResultsL2E(string sidx, string sord, int page, int rows)
{
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = _db.ReportSet.Count();
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
    int startRecord = pageIndex * pageSize;

    List rowStrings = new List();
    // Get all of the reports in the model in a fixed order (for comparison).
    //var reports = from item in _db.ReportSet
    //              orderby item.Start_Date, item.Title
    //              select new { item.ID, item.Title, item.Post_Date, 
    //              item.Start_Date, item.End_Date, item.Summary };
    // Get all of the reports in the model in a dynamic order passed from jqGrid.
    string orderBytext = "";
    orderBytext = string.Format("it.{0} {1}", sidx, sord);
    var reports = _db.ReportSet
                   .OrderBy(orderBytext);

    List stringList = new List();

    int counter = reports.Count();
    foreach (var report in reports)
    {
        var rowString = new
        {
            id = report.ID,
            cell = new[] {
                    "",
                    report.ID.ToString(),
                    report.Title,
                    report.Post_Date.ToShortDateString(),
                    report.Start_Date.ToShortDateString(),
                    report.End_Date.ToString(),
                    report.Summary.ToString()}
        };
        stringList.Add(rowString);
    }

    var rowsOut = new object[counter];
    for (int i = 0; i

, , , PredicateBuilder, # Albaharis # Nutshell . , MSDN PredicateBuilder LINQ to Entities

+1
source

I had the same problem in which the jqGrid frame appeared, but there were no rows. My solution was to add the following code.

**jsonData.JsonRequestBehavior = JsonRequestBehavior.AllowGet;**
         return jsonData;
0
source

More articles:


All Articles