Jqgrid Master Detail don't send the appropriate info

Question

I'm searching about my problem here and find some tips, but doesn't work anyway, my problem is this:

In the jqgrid Javascrip, I send as setGridParam this: {url:'myurl/myfunction/'+ id, page:1, datatype:"json"} but, the Jgqgrid still doesn't sending to my controller the Id for make a selection of the details, It´s always null..... I tried everyting and the problem persist, please help me.

Here's my Javascript:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#list").jqGrid({
        url: '/Master/GridData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Id', 'Descripción'],
            colModel: [
                        { name: 'Id', index: 'Id', width: 50 },
                        { name: 'Descripcion', index: 'Descripcion', width: 80, sortable: true, editable: true, edittype: "text", editoptions: { maxlength: "100"} }
                      ],
            pager: jQuery('#pager'),

            autowidth: true,
            rowList: [5, 10, 20, 50],
            sortname: 'Id',
            sortorder: "asc",
            viewrecords: true,
            caption: '<b>Listado de Masters</b>',
            onSelectRow: function(ids) {
                if (ids != null) {
                    var data = $("#list").getRowData(ids);
                    jQuery("#DetailList").setGridParam({ url: "/Master/DetailGridData/" + data.Id, page: 1, datatype: 'json' })
           .setCaption("<b>Details of Master : " + data.Descripcion+"</b>")
           .trigger('reloadGrid');
                }
            }
        }).navGrid(pager, { edit: false, add: false, del: false, refresh: true, search: false });
        jQuery("#DetailList").jqGrid
        ({
            height: 100,
            datatype: "json",
            colNames: ['Id', 'Descripción', 'Modelo'],
            colModel: [
                        { name: 'Id', index: 'Id', width: 50 },
                        { name: 'Descripcion', index: 'Descripcion', width: 80, sortable: true, editable: true, edittype: "text", editoptions: { maxlength: "100"} },
                        { name: 'Modelo', index: 'Modelo', width: 80, sortable: true, editable: true, edittype: "text", editoptions: { maxlength: "100"} }                            
                      ],
            rowNum: 5,
            rowList: [5, 10, 20],
            pager: jQuery('#DetailPager'),
            sortname: 'Id',
            viewrecords: true,
            sortorder: "desc"
        }).navGrid('#DetailPager', { add: false, edit: false, del: false, search: false });
    });
</script>

And here's my Controller Code:

    public ActionResult GridData(string sidx, string sord, int? page, int? rows)
    {

        List<Master> ms = new List<Master>();
        ms = MasterRepository.GetAll().ToList<Master>();

        int pageIndex = Convert.ToInt32(page) - 1;
        int totalrecords = ms.Count();
        int totalpages = (int)Math.Ceiling((decimal)totalrecords / (decimal)rows);

        var jsonData = new
        {
            sidx = "Id",
            sord = "asc",
            page = 1,
            records = 25,
            rows = (
                    from ch in ms
                    select new
                    {
                        id = ch.Id,
                        cell = new string[] 
                            {
                                ch.Id.ToString(),
                                ch.Descripcion,
                            }
                    }).ToArray(),

        };

        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }



    public ActionResult DetailGridData(string IdMaster, string sidx, string sord, int? page, int? rows)
    {

        int IdCh = Convert.ToInt32(IdMaster);

        IList<Detail> det = new List<Detail>();
        det = DetailRepository.GetByMaster(IdCh).ToList<Detail>();

        int pageIndex = Convert.ToInt32(page) - 1;
        int totalrecords = det.Count();

        var jsonData = new
        {
            sidx = "Id",
            sord = "asc",
            page = 1,
            records = 25,
            rows = (
                    from bah in det
                    select new
                    {
                        id = bah.Id,
                        cell = new string[] 
                            {
                                bah.Id.ToString(),
                                bah.Descripcion,
                                bah.Modelo                                   
                            }
                    }).ToArray(),
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }
}
}

score 1 · Answer 1 · edited May 23 '17 at 11:55

I think you should verify routes.MapRoute which you added to the route table. Do you really use IdMaster parameter or you should rename it to Id? It can be that you just forget to add the custom rule.

Another problem which I could see is the syntax error: you use

.navGrid(pager, {...

instead of

.navGrid('#pager', {...

(the variable pager in undefined).

Another possible problem is possible id duplicates. Be sure that ids of the detail grid has another values as the ids from the master grid. Because ids are strings you can for example use prefixes for the ids: like 'm_'+ch.Id for the master grid and 'd_'+bah.Id for details grid.

Some more remarks:

sidx and sord should not be included in the JSON response of the server. Instead of that total should be included. See here for more information.
I recommend you to use datatype: "local" instead of datatype: "json" for the details grid definition. It will prevent attempt to load data at the grid initialization.
I recommend you to use pager: '#pager' instead of pager: jQuery('#pager').
I recommend you to use key: true in the 'Id' column. In the case you will don't need to send Id values twice. If you would use additionally jsonReader: {cell:''} you can remove cell property like id property from the rows data. So you can use about the following from ch in ms select new { new string[] { ch.Id.ToString(), ch.Descripcion }}).ToList(). See here or here for example.
I recommend you to use error handling on the jqGrid at the beginning of your code. See the UPDATED part of the answer with the demo project. Displaying of error messages can save many time of your debugging. The demo could be interesting for you as a ASP.NET MVC code example which use jqGrid.

score 0 · Accepted Answer · answered Sep 30 '11 at 06:14

0

i think there is a issue in url string format. it should be like

jQuery("#DetailList").setGridParam({ url: "/Master/DetailGridData/?id=" + data.Id, page: 1, datatype: 'json' })

answered Sep 30 '11 at 06:14

aamir sajjad

3,019
1
27
26

Hi aamir.... yes, this was the problem, I tried with this and all works fine..!! thank you a lot. – verofairy Sep 30 '11 at 13:51

score 0 · Answer 3 · answered Sep 30 '11 at 14:05

I have finally found the solution, thanks for the suggestion aamir and Oleg.

I had to do was the following:

First change the name Id in the MasterGrid by IdMaster, so there is no confusion with the Id of the Detail Grid, then correct the line where setGridParam is sent by the following:

jQuery("#DetailList").setGridParam({ datatype: 'json', url: "/Master/DetailGridData?IdMaster=" + data.IdMaster, page: 1 })

That was it and now everything works fine...!! ;)

Thanks again aamir and Oleg... you save my day..!!

Jqgrid Master Detail don't send the appropriate info

3 Answers3