Download multiple jqgrid on one page

I am trying to use two different jqgrid on the same page with the mvc application, the tables use different URLs to load data and different names. It is possible to use several jqgrid on one page!?!?

Thanks in advance

UPDATED : first thanks for the quick reply

The problem continues after I changed the identifiers, as you told me! Here is my code:

Javasrcipt:

First grid:

jQuery("#listMedicosTODO").jqGrid({
    url: '/Medico/LoadToDoMedicos/',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['Cod.', 'Titulo', 'Estado', 'Ultima Actualização'],
    colModel: [
        { name: 'CodRelatorio', index: 'CodRelatorio', width: 50, align: 'center', hidden: true, sortable: false },
        { name: 'TituloRelatorio', index: 'TituloRelatorio', width: 100, align: 'center', sortable: true },
        { name: 'EstadoRelatorio', index: 'EstadoRelatorio', width: 100, align: 'left', sortable: false },
        { name: 'DataUltimaActualizao', index: 'DataUltimaActualizao', width: 100, align: 'left', hidden: false, sortable: false }
    ],
    pager: jQuery('#pager1'),
    rowNum: 50,
    rowList: [50],
    sortname: 'Id',
    sortorder: "asc",
    viewrecords: true,
    imgpath: '/scripts/themes/steel/images',
    caption: 'Tarefas Pendentes Médicos',
    onSelectRow: function (id) {
        var data = $("#listMedicosTODO").getRowData(id);
        alert("select row " + data.CodRelatorio);
    },
    loadComplete: function (data) {
        alert("Load Complete");
        //$('#list').setGridParam({ url: '/PesquisarRelatorios/GetGridData/' });
    },
    gridComplete: function () { alert("Grid Complete"); },
    beforeRequest: function () { },
    viewrecords: true,
    autowidth: true,
    autoheight: true
}).navGrid(pager, { edit: false, add: true, del: true, refresh: true, search: false });

Second grid:

jQuery("#listaAssistentesTODO").jqGrid({
    url: '/Medico/LoadToDoAssistentes/',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['Cod.', 'Titulo', 'Assistente', 'Estado', 'Ultima Actualização'],
    colModel: [
        { name: 'CodRelatorio', index: 'CodRelatorio', width: 50, align: 'center', hidden: true, sortable: false },
        { name: 'TituloRelatorio', index: 'TituloRelatorio', width: 100, align: 'center', sortable: true },
        { name: 'Assistente', index: 'Assistente', width: 100, align: 'center', sortable: false },
        { name: 'EstadoRelatorio', index: 'EstadoRelatorio', width: 100, align: 'left', sortable: false },
        { name: 'DataUltimaActualizao', index: 'DataUltimaActualizao', width: 100, align: 'left', hidden: false, sortable: false }
    ],
    pager: jQuery('#page2'),
    rowNum: 50,
    rowList: [50],
    sortname: 'CodRelatorio',
    sortorder: "asc",
    viewrecords: true,
    imgpath: '/scripts/themes/steel/images',
    caption: 'Tarefas Pendentes Assistentes',
    onSelectRow: function (id) {
        var data = $("#listaAssistentesTODO").getRowData(id);
        alert("select row " + data.CodRelatorio);
    },
    loadComplete: function (data) {
        alert("Load Complete");
         //$('#list').setGridParam({ url: '/PesquisarRelatorios/GetGridData/' });
    },
    gridComplete: function () { alert("Grid Complet"); },
    beforeRequest: function () { },
    viewrecords: true,
    autowidth: true,
    autoheight: true
}).navGrid(pager, { edit: false, add: true, del: true, refresh: true, search: false });

Server Endpoint:

if(list != null)
{
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords =  list.Count ;
    var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);

    var jsonData = new
                       {
                           total = totalPages,
                           page,
                           records = totalRecords,
                           rows = (from item in list
                                   select new
                                              {
                                                  i ="a" + item.CodRelatorio,
                                                  cell = new[]
                                                             {
                                                                item.CodRelatorio ,
                                                                item.TituloRelatorio,
                                                                item.Assistente ,
                                                                "Em Elaboração",
                                                                item.DataUltimaActualizao
                                                             }

                                             }).ToArray()
                        };


    return Json(jsonData,JsonRequestBehavior.AllowGet);
}

2º end point

if (list != null)
{
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = list.Count;
    var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);

    var jsonData = new
    {
        total = totalPages,
        page,
        records = totalRecords,
        rows = (from item in list
                select new
                {
                    i = "b"+ item.CodRelatorio,
                    cell = new[]
                                 {
                                    item.CodRelatorio ,
                                    item.TituloRelatorio,
                                    "Em Elaboração",
                                    item.DataUltimaActualizao
                                 }

                }).ToArray()
    };

    return Json(jsonData, JsonRequestBehavior.AllowGet);

This code contains your recommendations.

thank

+3
source share
2 answers

jqGrid . , , , id, , . , id = 1234 , "a1234" "b1234" .

, ( JavaScript) JSON XML-, .

. , id . i, . id jqGrd, : "1", "2",... . "id-fix" , .

, i ="a" + item.CodRelatorio i = "b"+ item.CodRelatorio id ="a" + item.CodRelatorio id = "b"+ item.CodRelatorio.

, , , 06, 2011 (. ).

, ,

  • jqGrid imgpath. .
  • autowidth: true autoheight: true , , height:'auto'.
  • pager:'#page1' pager:'#page2' pager: '#page1' pager: '#page2'.
  • 'Id'. sortname: 'Id' jqGrid, , sortname: 'CodRelatorio'.

"" . .

+6

, Jqgrid , Jqgrid.

. . ,

jQuery(document).ready(function () {

        $("#datagrid").jqGrid({    //////////// 1st Grid
            url: "service url",
            //url: "service url",
            type: "GET",
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            datatype: "json",
            //colNames:['Id','MID','Status','DocNo','VendorID','InvoiceNo','VendorName','Amount','Type','DocDate','DueDate','ClDoc','Texxt','UserName','Currency','ConCode','Region','Stat','Comb','Comments'],

            colNames:['Id','MID','Status','VendorID','VendorName','InvoiceNo','DocDate','Amount','DocNo','Type','DueDate','ClDoc','Text','UserName','Currency','ConCode','Region','Stat','Process','Comb','Comments'],
            colModel:[
    {name:'id',index:'id', width:50,sortable:true},
    {name:'mid',index:'mid', width:50, sortable:true},
    {name:'status',index:'status', width:70, sortable:true},
    {name:'vendorid',index:'vendorid', width:90, sortable:false,align:"left"},
    {name:'vendorname',index:'vendorname', width:170, sortable:false,align:"left"},
    {name:'invoiceno',index:'invoiceno', width:130, sortable:false,align:"left"},   
    {name:'docdate',index:'docdate', width:100, sortable:false},
    {name:'amount',index:'amount', width:80, sortable:false,align:"Right"},
    {name:'docno',index:'docno', width:100, sortable:false},
    {name:'typee',index:'typee', width:50, sortable:false},
    {name:'duedate',index:'duedate', width:100, sortable:false},
    {name:'cldoc',index:'cldoc', width:80, sortable:false},
    {name:'text',index:'texxt', width:70, sortable:false},
    {name:'username',index:'username', width:100, sortable:false},
    {name:'currency',index:'currency', width:80, sortable:false},
    {name:'concode',index:'concode', width:80, sortable:false},
    {name:'region',index:'region', width:70, sortable:false},
    {name:'stat',index:'stat', width:60, sortable:false},
    {name:'process',index:'process', width:60, sortable:false},
    {name:'combination',index:'combination', width:60, sortable:true},
    {name:'comments',index:'comments', width:150, height:20, edittype:'textarea', sortable:false, editable: true,
            editoptions: {disabled: false, size:50, resizable:true}}
    ],
viewrecords: true
});


       $("#datagrid1").jqGrid({               ///////////////2nd Grid

            url: "service url",
            type: "GET",
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            datatype: "json",
            //colNames:['Id','MID','Status','DocNo','VendorID','InvoiceNo','VendorName','Amount','Type','DocDate','DueDate','ClDoc','Texxt','UserName','Currency','ConCode','Region','Stat','Comb','Comments'],
            colNames:['Id','MID','Status','VendorID','VendorName','InvoiceNo','DocDate','Amount','DocNo','Type','DueDate','ClDoc','Text','UserName','Currency','ConCode','Region','Stat','Process','Comb','Comments'],
            colModel:[
    {name:'id',index:'id', width:50,sortable:true},
    {name:'mid',index:'mid', width:50, sortable:true},
    {name:'status',index:'status', width:70, sortable:true},
    {name:'vendorid',index:'vendorid', width:90, sortable:false,align:"left"},
    {name:'vendorname',index:'vendorname', width:170, sortable:false,align:"left"},
    {name:'invoiceno',index:'invoiceno', width:130, sortable:false,align:"left"},   
    {name:'docdate',index:'docdate', width:100, sortable:false},
    {name:'amount',index:'amount', width:80, sortable:false,align:"Right" },
    {name:'docno',index:'docno', width:100, sortable:false},
    {name:'typee',index:'typee', width:50, sortable:false},
    {name:'duedate',index:'duedate', width:100, sortable:false},
    {name:'cldoc',index:'cldoc', width:80, sortable:false},
    {name:'text',index:'texxt', width:70, sortable:false},
    {name:'username',index:'username', width:100, sortable:false},
    {name:'currency',index:'currency', width:80, sortable:false},
    {name:'concode',index:'concode', width:80, sortable:false},
    {name:'region',index:'region', width:70, sortable:false},
    {name:'stat',index:'stat', width:60, sortable:false},
    {name:'process',index:'process', width:60, sortable:false},
    {name:'combination',index:'combination', width:60, sortable:true},
    {name:'comments',index:'comments', width:150, edittype:'textarea', sortable:false, editable: true,
            editoptions: {disabled: false, size:50, resizable:true}}
        ]
viewrecords: true
});

});
0
source

All Articles