I have a problem with jqGrid . jqGrid version 4.2.0 – jQuery Grid grid

Question

0

Asked: May 26, 20262026-05-26T15:38:09+00:00 2026-05-26T15:38:09+00:00

I have a problem with jqGrid . jqGrid version 4.2.0 – jQuery Grid grid

0

I have a problem with jqGrid . jqGrid version 4.2.0 – jQuery Grid
grid show loaded data not in tree mode, only grid mode. Why ?
Please help me ! Можно по русски .
Add in header

   <link href="../jqGrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
   <script src="jqGrid/js/i18n/grid.locale-ru.js" type="text/javascript"></script>
   <script src="jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

and my function to get data from web service .

   function getDataSC(pData) {
   $.ajax({
       type: 'POST',
       contentType: "application/json; charset=utf-8",
       url: '<%= ResolveClientUrl("~/FetchData.asmx/bindSCJson") %>',
       dataType: "json",
       success: function(data, textStatus) {
        if (textStatus == "success")
            ReceivedClientDataSC(JSON.parse(getMain(data)).rows);
    },
    error: function(data, textStatus) {
        alert('An error has occured retrieving data!');
    }
});
}
function ReceivedClientDataSC(data) {
    var thegrid = $("#gridSC");
    thegrid.clearGridData();
    for (var i = 0; i < data.length; i++)
        thegrid.addRowData(i + 1, data[i]);
}
function getMain(dObj) {
    if (dObj.hasOwnProperty('d'))
        return dObj.d;
    else
        return dObj;
}

var lastSel;
$("#gridSC").jqGrid({
datatype: function(pdata) { getDataSC(pdata); },

treeGrid: true, 
treeGridModel : 'adjacency',
ExpandColumn: 'Name',
ExpandColClick: true ,
mtype: 'POST',
treeIcons: {plus:'ui-icon-circle-plus',minus:'ui-icon-circle-minus',leaf:'ui-    
 icon-person'},

height: "100%",
width: 900,
     colNames: ['Id', 'Name', 'CountryName', 'Town', 'Adress', 'Phone', 'Email', 
'Url'],
     colModel: [
                    { name: 'Id', index:'id', width:10, hidden:true,key:true},
                    { name: 'Name', index: 'Name', width: 80},
                    { name: 'CountryName',index:'CountryName', width:80},
                    { name: 'Town', index: 'Town', width: 20 },
                    { name: 'Adress', index: 'Adress', width: 90 },
                    { name: 'Phone', index: 'Phone', width: 20},
                    { name: 'Email', index: 'Email', width: 20 },
                    { name: 'Url', index: 'Url', width: 30}
                  ],
       pager: $('#pjmapSC')
       //rowNum:20,
       //viewrecords: true,
       //gridview: true,
       //rowList:[10,20,30,100],
       //sortname: 'Id',
       //sortorder: 'asc'

    })

    }

json from server service (loaded to grid) :

{"d":"{\"total\":1,\"page\":1,\"records\":2,\"rows\":[{\"err\":null,\"Id\":1,\"Parent  
 \":0,\"Name\":\"Сервисные центры\",\"CountryCode\":103,\"Town\":\"Киев\",\"Adress
 \":\"Красных партизан 1\",\"Phone\":\"123-321\",\"Email\":\"mail@mail.ru 
 \",\"CountryName\":\"United Arab Emirates\",\"Url\":\"www.service1\",\"isLeaf\":false,
 \"Expanded\":true,\"Level\":1},{\"err\":null,\"Id\":2,\"Parent\":1,\"Name
 \":\"Сервисный центр 1_1\",\"CountryCode\":103,\"Town\":\"Киев\",\"Adress\":\"Артема
 \",\"Phone\":\"123-321\",\"Email\":\"fert@ukr.net\",\"CountryName\":\"United Arab  
 Emirates\",\"Url\":\"www.service2\",\"isLeaf\":true,\"Expanded\":true,\"Level\":2}],
 \"userData\":null}"}

Help Please ! Thanks.

EDIT:

Thanks Oleg , but i try change my server string to

{"d":{"__type":"_admin.JqGridData","total":3,"page":1,"records":26,"rows":        [{"id":1,"cell":["1","Сервисные центры","United Arab Emirates","Киев","Красных партизан 1","123-321","mail@mail.ru","www.service1","0",null,"False","False"]},{"id":2,"cell":["2","Сервисный центр 1_1","United Arab Emirates","Киев","Артема","123-321","fert@ukr.net","www.service2","1","1","True","False"]},{"id":4,"cell":["4","Сервисный центр 1_2","United Arab Emirates","Донецк","Артема","123-321","fert@ukr.net","www.service2","1","1","True","False"]},{"id":5,"cell":["5","Сервисный центр 1_3","United Arab Emirates","Одесса","Артема","123-321","fert@ukr.net","www.service3","1","1","True","False"]},

and

   $("#gridSC").jqGrid({
   url: '<%= ResolveClientUrl("~/FetchData.asmx/bindSC") %>',
   datatype: 'json',
   mtype: 'POST',
   treeGridModel: 'adjacency',
   ExpandColumn: 'Name',
   ExpandColClick: true,
   ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
   serializeGridData: function (postData) {
     if (postData.searchField === undefined) postData.searchField = null;
     if (postData.searchString === undefined) postData.searchString = null;
     if (postData.searchOper === undefined) postData.searchOper = null;
    //if (postData.filters === undefined) postData.filters = null;
     return JSON.stringify(postData);
  },
 jsonReader: {
     root: function (obj) { return obj.d.rows; },
     page: function (obj) { return obj.d.page; },
     total: function (obj) { return obj.d.total; },
     records: function (obj) { return obj.d.records; }
  },
  colNames: ['Id', 'Name', 'CountryName', 'Town', 'Adress', 'Phone', 'Email', 'Url'],
  colModel: [
                { name: 'Id', index: 'id', width: 10, hidden: true, key: true },
                { name: 'Name', index: 'Name', width: 80 },
                { name: 'CountryName', index: 'CountryName', width: 80 },
                { name: 'Town', index: 'Town', width: 20 },
                { name: 'Adress', index: 'Adress', width: 90 },
                { name: 'Phone', index: 'Phone', width: 20 },
                { name: 'Email', index: 'Email', width: 20 },
                { name: 'Url', index: 'Url', width: 30 }
              ],
  rowNum: 10,
  rowList: [10, 20, 300],
  sortname: 'Name',
  sortorder: "asc",
  pager: "#pjmapSC",
  viewrecords: true,
  gridview: true,
  rownumbers: true,
  height: "100%",
  caption: ''
  })

and test
treeReader : {
level_field: “level”,
parent_id_field: “parent”,
leaf_field: “isLeaf”,
expanded_field: “expanded”
},
nothing change in grid (not tree grid) . In server side my method

        int startIndex = (page - 1) * rows;
        int endIndex = (startIndex + rows < recordsCount) ?
                       startIndex + rows : recordsCount;
        List<TableRow> gridRows = new List<TableRow>(rows);

        for (int i = startIndex; i < endIndex; i++)
        {
             gridRows.Add(new TableRow()
               {
                id = lsc[i].Id,
                cell = new List<string>(11) {
                    lsc[i].Id.ToString(), 
                    lsc[i].Name, 
                    lsc[i].CountryName,
                    lsc[i].Town,
                    lsc[i].Adress,
                    lsc[i].Phone,
                    lsc[i].Email,
                    lsc[i].Url,
                    lsc[i].level.ToString(),
                    lsc[i].parent,
                    lsc[i].isLeaf.ToString(),
                    lsc[i].expanded.ToString()

if i change to this
//string.Format(“Name:{0}”, lsc[i].Name)
my grid load incorrectly data

Help please.

Thanks Oleg , but i try change my server string to

{“d”:{“__type”:”_admin.JqGridData”,”total”:3,”page”:1,”records”:26,”rows”: [{“id”:1,”cell”:[“1″,”Сервисные центры”,”United Arab Emirates”,”Киев”,”Красных партизан 1″,”123-321″,”mail@mail.ru”,”www.service1″,”0″,null,”False”,”False”]},{“id”:2,”cell”:[“2″,”Сервисный центр 1_1″,”United Arab Emirates”,”Киев”,”Артема”,”123-321″,”fert@ukr.net”,”www.service2″,”1″,”1″,”True”,”False”]},{“id”:4,”cell”:[“4″,”Сервисный центр 1_2″,”United Arab Emirates”,”Донецк”,”Артема”,”123-321″,”fert@ukr.net”,”www.service2″,”1″,”1″,”True”,”False”]},{“id”:5,”cell”:[“5″,”Сервисный центр 1_3″,”United Arab Emirates”,”Одесса”,”Артема”,”123-321″,”fert@ukr.net”,”www.service3″,”1″,”1″,”True”,”False”]},

and

   $("#gridSC").jqGrid({
   url: '<%= ResolveClientUrl("~/FetchData.asmx/bindSC") %>',
   datatype: 'json',
   mtype: 'POST',
   treeGridModel: 'adjacency',
   ExpandColumn: 'Name',
   ExpandColClick: true,
   ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
   serializeGridData: function (postData) {
     if (postData.searchField === undefined) postData.searchField = null;
     if (postData.searchString === undefined) postData.searchString = null;
     if (postData.searchOper === undefined) postData.searchOper = null;
    //if (postData.filters === undefined) postData.filters = null;
     return JSON.stringify(postData);
  },
 jsonReader: {
     root: function (obj) { return obj.d.rows; },
     page: function (obj) { return obj.d.page; },
     total: function (obj) { return obj.d.total; },
     records: function (obj) { return obj.d.records; }
  },
  colNames: ['Id', 'Name', 'CountryName', 'Town', 'Adress', 'Phone', 'Email', 'Url'],
  colModel: [
                { name: 'Id', index: 'id', width: 10, hidden: true, key: true },
                { name: 'Name', index: 'Name', width: 80 },
                { name: 'CountryName', index: 'CountryName', width: 80 },
                { name: 'Town', index: 'Town', width: 20 },
                { name: 'Adress', index: 'Adress', width: 90 },
                { name: 'Phone', index: 'Phone', width: 20 },
                { name: 'Email', index: 'Email', width: 20 },
                { name: 'Url', index: 'Url', width: 30 }
              ],
  rowNum: 10,
  rowList: [10, 20, 300],
  sortname: 'Name',
  sortorder: "asc",
  pager: "#pjmapSC",
  viewrecords: true,
  gridview: true,
  rownumbers: true,
  height: "100%",
  caption: ''
  })

and test
treeReader : {
level_field: “level”,
parent_id_field: “parent”,
leaf_field: “isLeaf”,
expanded_field: “expanded”
},
nothing change in grid (not tree grid) . In server side my method

        int startIndex = (page - 1) * rows;
        int endIndex = (startIndex + rows < recordsCount) ?
                       startIndex + rows : recordsCount;
        List<TableRow> gridRows = new List<TableRow>(rows);

        for (int i = startIndex; i < endIndex; i++)
        {
             gridRows.Add(new TableRow()
               {
                id = lsc[i].Id,
                cell = new List<string>(11) {
                    lsc[i].Id.ToString(), 
                    lsc[i].Name, 
                    lsc[i].CountryName,
                    lsc[i].Town,
                    lsc[i].Adress,
                    lsc[i].Phone,
                    lsc[i].Email,
                    lsc[i].Url,
                    lsc[i].level.ToString(),
                    lsc[i].parent,
                    lsc[i].isLeaf.ToString(),
                    lsc[i].expanded.ToString()

if i change to this
//string.Format(“Name:{0}”, lsc[i].Name)
my grid load incorrectly data

Help please.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-26T15:38:09+00:00

You main error is in the wrong case of the column names of Tree Grid which you use. It should be level, parent, expanded instead of Level, Parent, Expanded which you use in the JSON input. Only isLeaf you use correctly. So you should either correct the column which use your web service or add parameter treeReader which describes the names which you use:

treeReader = {
   level_field: "Level",
   parent_id_field: "Parent",
   leaf_field: "isLeaf",
   expanded_field: "Expanded"
}

Additionally I would recommend you to change your code so that you use datatype: 'json' instead of datatype as function.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have a problem with jqGrid . jqGrid version 4.2.0 – jQuery Grid grid

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply