Ordenando jqGrid en la vista del cliente ASP.NET MVC con jQuery y LINQ-to-Entities

Question

Soy un novato de jQuery, así que estoy seguro de que me falta algo simple aquí.

Tengo el jqGrid trabajando con una acción que crea datos JSON desde una operación LINQ-a-Entidades. Pero cuando hago clic en los encabezados de las columnas en el navegador, las filas no se ordenan. Aparece el indicador ascendente/descendente, pero no sucede nada más.

La JavaScript necesario y enlaces CSS se encuentran en la cabecera de la página principal:

 
<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> 

Aquí está mi código de inicialización:

 
// 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' 
});     

Y aquí está el código 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> 

Y, sólo para completar, el método de acción:

 
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; 
} 

¿Alguna idea de qué configuración obvia me falta aquí?

Answer 1

Hay dos formas básicas de manejar esto. La grilla puede ordenar los datos en sí. No recuerdo cómo activar esto, porque nunca uso esta opción. En general, trabajo con conjuntos de datos que son demasiado grandes para regresar a la página, así que uso las funciones de paginación de la cuadrícula. Esto requiere hacer esta clase en el servidor, ya que la cuadrícula no verá todo el conjunto de datos.

Para realizar la búsqueda en el servidor, agregue un sidx y un argumento sord (ambas cadenas) a su acción. sidx será el nombre de la columna para ordenar. sord será la dirección, asc o desc.

Tengo a demo project que muestra cómo hacerlo (usando LINQ to Objects). Pero usar LINQ to Entities es casi idéntico; Uso LINQ to Entities en mi código de producción/no de demostración. Descargue la solución de demostración y búsquela usted mismo.

Answer 2

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; 

Gracias Anuj Pandey www.anuj.co.in

que él ... ¿quiere esto decir que sé de programación :)

Answer 3

OK, yo debería haber publicado esto cuando me di afuera, pero terminé quedándome atrapado en otras tareas. Esto es lo que hice que funcionó con LINQ to Entities, implementado para una entidad de informe. En primer lugar, el código para cargar el jqGrid con una búsqueda por defecto era simple (una vez me di cuenta de lo que había perdido):

$(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 
    ); 
}); 

El método para cargar el conjunto de búsqueda predeterminada devuelve la primera página del conjunto total de informes disponibles:

 
/// 
/// 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

más tarde añadió otro método para responder al usuario seleccionar las columnas para ordenar, mediante el PredicateBuilder discutido desde el Albaharis' libro de C# en la sección de cáscara de nuez en un Dynamically Composing Expression Predicates. Discutí mi solución a eso en una pregunta que comencé en MSDN en PredicateBuilder fails on nested predicates with LINQ to Entities

Answer 4

Tuve el mismo problema donde se mostraba el marco jqGrid pero las filas no. Mi solución fue agregar el siguiente código.

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