Data not shown in jQGrid

Question

1.60/5 (2 votes)

See more:

Hello Everyone,
I am using jQgrid in an application, everything is working fine, it is also getting the value (which I had find by debugger) but data is not displayed when debugger stops.

Here is my code:
JQUERY CODE:

C#

<script type="text/javascript">
        jQuery(document).ready(function () {
            $('#btn1').click(function () {
                debugger;
                $.extend($.jgrid.defaults,
                  { datatype: 'json' },
                  {
                      ajaxGridOptions: {
                          contentType: "application/json",
                          success: function (data, textStatus) {
                              debugger;
                              if (textStatus == "success") {
                                  debugger;
                                  var thegrid = $("#contactsList")[0];
                                  var output = eval(data.d.rows);
                                  $.map(output, function (obj) {
                                      debugger;
                                      thegrid.addJSONData(eval(obj.cell));
                                      thegrid.grid.hDiv.loading = false;
                                  });
                                  switch (thegrid.p.loadui) {
                                      case "disable":
                                          break;
                                      case "enable":
                                          $("#load_" + thegrid.p.id).hide();
                                          break;
                                      case "block":
                                          $("#lui_" + thegrid.p.id).hide();
                                          $("#load_" + thegrid.p.id).hide();
                                          break;
                                  }
                              }
                          }
                      }
                  });
                $("#contactsList").jqGrid({
                    mtype: 'POST',
                    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                    url: 'WebForm2.aspx/GetDataTable',
                    datatype: 'json',
                    serializeGridData: function (postData) {
                        return JSON.stringify(postData);
                    },
                    jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
                    colModel: [
                        { name: 'Recognition_Type', width: 60, align: "center", hidden: false },
                        { name: 'Recognition_Number', width: 80, sortable: false, hidden: false }
                    ],
                    rowNum: 10,
                    rowList: [10, 20, 300],
                    pager: "#gridpager",
                    viewrecords: true,
                    gridview: true,
                    rownumbers: true,
                    height: 230,
                    caption: 'Reports'
                }).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: false, search: true });
            })
        });
    </script>

aspx.cs code is this:

public struct s_GridResult
        {
            public int page;
            public int total;
            public int record;
            public s_RowData[] rows;

        }
        public struct s_RowData
        {
            public int id;
            public string[] cell;
        }
        [WebMethod]
        public static s_GridResult GetDataTable(string _search, string nd, int rows, int page, string sidx, string sord)
        {

            int startindex = (page - 1);
            int endindex = page;
            string sql = "select Recognition_Type,Recognition_No from SIRO";

            DataTable dt = new DataTable();
            SqlConnection conn = new SqlConnection(@"Data Source=DT00432\SQLEXPRESS;Initial Catalog=testreport;Integrated Security=True");
            SqlDataAdapter adapter = new SqlDataAdapter(sql, conn);
            adapter.Fill(dt);
            s_GridResult result = new s_GridResult();
            List<s_RowData> rowsadded = new List<s_RowData>();
            int idx = 1;
            foreach (DataRow row in dt.Rows)
            {
                s_RowData newrow = new s_RowData();
                newrow.id = idx++;
                newrow.cell = new string[2];  //total number of columns  
                newrow.cell[0] = row[0].ToString();
                newrow.cell[1] = row[1].ToString();
                rowsadded.Add(newrow);
            }
            result.rows = rowsadded.ToArray();
            result.page = page;
            result.total = dt.Rows.Count;
            result.record = rowsadded.Count;
            return result;
        }

Please help as soon as possible

Posted 12-Jun-14 1:00am

Anubhav689

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Jun-14 7:05am

Do you see any error in Developer Tool console window?

Anubhav689 12-Jun-14 7:23am

No

Nirav Prabtani 12-Jun-14 7:40am

same question is on

http://www.codeproject.com/Questions/599602/whyplusjqgridplusnotplusshowingplusanyplusdata-f?arn=19
how is it possible?? with another member?? is it your's question??

3 solutions

Solution 1

i have seen one mistake in it. You have called method GetDataTable of WebForm2.aspx
but you have declared webmethod , s_GridResult GetDataTable so you can not call it.

Update your code like that.

JavaScript

url: 'WebForm2.aspx/GetDataTable',

c#

C#

[WebMethod]
       public static GetDataTable(string _search, string nd, int rows, int page, string sidx, string sord)
       {
        }

and Check all parameters that you have passed.
for further information see my trip and trick regarding Ajax

Expandable Table like Gridview[^]

Bind Gridview using AJAX [^]

It is not exactly as you need but you can get idea from it.. :)

Posted 12-Jun-14 1:26am

Nirav Prabtani

Comments

Anubhav689 12-Jun-14 7:44am

Hey Nirav,
Thanks for your reply, firstly if I remove s_GridResult then it's "return" will provide an error, secondly the links which you had provided I have already used similar things to get the data. Actually it's not getting any error, it's making the outer pattern also of jQgrid, it's also providing the ID of first two array's but it's not showing the data

Solution 2

From your code you have passed 'colModel' but column names array also needs to be set which i did not find in your jQuery code.
Ex :-

JavaScript

var colNames = ['Recognition_Type','Recognition_No'];

If the above does not fix your error you can find the exact error in HTML developer tool for any browser :-

i) Open the page you are displaying the data or where the JQGrid is being bounded.
ii) Press F12 and it will open the Developers Tool, open the Console tab here.
iii) Now do the operation to fetch data, here you can see the exact error which causing the fail.

Also i have pasted below a working copy of the jQuery method to bind a JQGrid you can try this out :-

JavaScript

function BindGrid(containerId, data, pgSize, colNames, colModel, pagerId, isScroller, height, isPagerVisible, pagerSize, width) {
    jQuery('#' + containerId).GridUnload();
    jQuery('#' + containerId).jqGrid({
        data: data,
        datatype: "local",
        rowNum: pgSize,
        colNames: colNames,
        colModel: colModel,
        pager: $('#' + pagerId),
        toppager: true,
        autowidth: true,
        gridview: true,
        scrollerbar: isScroller,
        height: height,
        width: width,
        rowList: [10, 20, 30],
        cache: false,
        loadonce: false,
        pgbuttons: true,
        pgtext: null,
        viewrecords: true,
        recordtext: "Showing {0} - {1} of {2} ",
        loadComplete: function (data) {
            // to be called after grid data load completion
        },
    }).setGridWidth(jqGridWidth);
}

Hope this will definitely of help to you.

Posted 12-Jun-14 1:30am

SRS(The Coder)

Updated 12-Jun-14 1:33am

v2

Comments

SRS(The Coder) 12-Jun-14 7:40am

Parameters Explained :-
containerId : ID of the table in which data needs to be rendered
data : Data to bind as JSON format
pgSize : Records per page in int
colNames : Column Names in array
colModel : Column models as json array list
pagerId : Pager div ID to view pager
isScroller : Bool value whether to view scroll bar
height : Grid height in int
isPagerVisible : Whether to view the pager as boolean
pagerSize : pager size as integer
width : width of grid as integer

Anubhav689 12-Jun-14 7:41am

Where is the "URL:"

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Anubhav689 · Accepted Answer · 2014-06-19T00:48:00

I have Solved this problem, I fetch the data in an array and then bind that array with JQGRID.

Here is the solution:

C#

<script type="text/javascript">
    jQuery(document).ready(function () {
        $('#btn1').click(function () {
            debugger;
            $.extend($.jgrid.defaults,
              { datatype: 'json' },
              {
                  ajaxGridOptions: {
                      contentType: "application/json",
                      success: function (data, textStatus) {
                          debugger;
                          if (textStatus == "success") {
                              debugger;
                              var thegrid = $("#contactsList")[0];
                              var gr = thegrid.rows;
                              var output = eval(data.d.rows);
                              var trying;
                              var newArr = [];
                              for (trying = 0; trying < output.length; trying++) {
                                  debugger;
                                  newArr.push({
                                      Recognition_Type: output[trying].cell[0],
                                      Recognition_Number: output[trying].cell[1]
                                  });
                              }
                              thegrid.addJSONData(newArr);
                              thegrid.grid.hDiv.loading = false;
                              switch (thegrid.p.loadui) {
                                  case "disable":
                                      break;
                                  case "enable":
                                      $("#load_" + thegrid.p.id).hide();
                                      break;
                                  case "block":
                                      $("#lui_" + thegrid.p.id).hide();
                                      $("#load_" + thegrid.p.id).hide();
                                      break;
                              }
                          }
                      }
                  }
              });
            $("#contactsList").jqGrid({
                mtype: 'POST',
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                url: 'WebForm2.aspx/GetDataTable',
                datatype: 'json',
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
                colNames: ['Recognition_Type', 'Recognition_Number'],
                colModel: [
                    { name: 'Recognition_Type', width: 180, align: "center", hidden: false },
                    { name: 'Recognition_Number', width: 200, sortable: false, hidden: false }
                ],
                rowNum: 5,
                rowList: [5, 20, 300],
                pager: "#gridpager",
                viewrecords: true,
                gridview: true,
                rownumbers: true,
                height: 230,
                caption: 'Reports'
            }).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: false, search: true });
        })
    });
</script>

Data not shown in jQGrid

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us