why jqgrid not showing any data?

Question

0.00/5 (No votes)

See more:

default2.aspx.cs

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Web.Services;
using System.Web.Script.Services;
using MySql.Data.MySqlClient;

public partial class getdata : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    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 Code,CardCode,EmployeeName FROM processeddata_table";

        DataTable dt = new DataTable();
        MySqlConnection conn = new MySqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
        MySqlDataAdapter adapter = new MySqlDataAdapter(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[3];  //total number of columns  
            newrow.cell[0] = row[0].ToString();
            newrow.cell[1] = row[1].ToString();
            newrow.cell[2] = row[2].ToString();
            rowsadded.Add(newrow);
        }
        result.rows = rowsadded.ToArray();
        result.page = page;
        result.total = dt.Rows.Count;
        result.record = rowsadded.Count;
        return result;
    }


}

default2.aspx

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="getdata" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
     <link rel="Stylesheet" type="text/css" media="screen" href="Themes/jquery-ui-1.8.2.custom.css" />
     <link rel="Stylesheet" type="text/css" media="screen" href="Themes/ui.jqgrid.css" />
     <link rel="Stylesheet" type="text/css" media="screen" href="Themes/style.css" />


     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
     <script type="text/javascript" src="js/jquery.json-2.2.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
     <script type="text/javascript" src="js/grid.locale-en.js"></script>
     <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>




      <script type="text/javascript" >
          $(document).ready(function () {
              $.extend($.jgrid.defaults,
                  { datatype: 'json' },
                  { ajaxGridOptions: { contentType: "application/json",
                      success: function (data, textStatus) {
                          if (textStatus == "success") {
                              var thegrid = $("#Grid1")[0];
                              thegrid.addJSONData(data.d);
                              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;
                              }
                          }
                      }
                  }




                  });


              jQuery("#Grid1").jqGrid({
                  url: 'Default2.aspx/GetDataTable',
                  datatype: 'json',
                  mtype: 'POST',
                  colNames: ['Code', 'CardCode', 'EmployeeName'],
                  colModel: [{ name: 'Code', index: 'Code', width: 200 },
                   { name: 'CardCode', index: 'CardCode', width: 300 },
                    { name: 'EmployeeName', index: 'EmployeeName', width: 300}],
                  pager: '#pager', sortname: 'id',
                  viewrecoreds: true,
                  imgpath: 'Themes/images',
                  serializeGridData: function (data) {
                      return $.toJSON(data);
                  }


              });
          });






     </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="Grid1" class="scroll" align="center" width="100%"></table>
    <div id="pager" class="scroll" style="text-align:center;">






    </div>
    </form>
</body>
</html>

Posted 28-May-13 20:08pm

navin ks

Updated 28-May-13 20:27pm

vijay__p

v2

Add a Solution

Comments

navin ks 29-May-13 2:10am

empty table is coming. no errors. help me

kumar2413 29-May-13 2:15am

u miss this i guess
myGridView.DataSource = ds
myGridView.DataBind()

navin ks 29-May-13 2:16am

this is jquery grid. no binding and all

King Fisher 12-Jun-14 8:34am

Why no binding and All?

http://www.trirand.net/demo/aspnet/webforms/jqgrid/

4 solutions

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)

renish patel · Answer 1 · 2013-05-28T20:49:00

Solution 1

Here i mention one post for you..may be it solve your problem...

http://www.aspdotnet-suresh.com/2012/03/bind-data-to-gridview-with-jquery-or.html[^]

Posted 28-May-13 20:49pm

renish patel

Updated 28-May-13 20:52pm

v2

Comments

Member 10464267 20-Dec-13 4:04am

It says here MySQL not SQL

Anubhav689 · Answer 2 · 2014-06-12T00:46:00

I am facing the same problem, did u get any solution for this!

But I had found that it is not showing the data because we are providing "data.d" in

thegrid.addJSONData(data.d);

but data is coming in "data->d->rows->array->cell", now how to get data from here is a problem,

I had tried something to get the data i.e.

var output = eval(data.d.rows);
                                  $.map(output, function (obj) {
                                      debugger;
                                      thegrid.addJSONData(eval(obj.cell));
                                      thegrid.grid.hDiv.loading = false;
                                  });

Now it's getting the data which can be seen by using the debugger but it is not shown in the Grid. So, if any one can help us please help.

Murali Vijay · Answer 3 · 2014-06-12T02:29:00

C#

public string GetJson(DataTable dt, DataTable dt1, int currentPage, int rownum)
        {
            System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            List<dictionary><string,>> rows = new List<dictionary><string,>>();
            JQGridResults res = new JQGridResults();
            Dictionary<string,> row;

            foreach (DataRow dr in dt.Rows)
            {
                row = new Dictionary<string,>();
                foreach (DataColumn col in dt.Columns)
                {
                    row.Add(col.ColumnName, dr[col]);
                }
                rows.Add(row);
            }

            DataRow dr1 = dt1.Rows[0];
            serializer.MaxJsonLength = int.MaxValue;
            res.rows = rows;
            res.page = currentPage;
            res.records = Convert.ToInt32(dr1[0]);
            res.total = Convert.ToInt32(Convert.ToInt32(dr1[0]) / rownum);
            return serializer.Serialize(res);
        }


In aspx page 
after your  success function, add jsonReader property
jQuery("#Grid1").jqGrid({
                  url: 'Default2.aspx/GetDataTable',
                  datatype: 'json',
                  mtype: 'POST',
                  colNames: ['Code', 'CardCode', 'EmployeeName'],
                  colModel: [{ name: 'Code', index: 'Code', width: 200 },
                   { name: 'CardCode', index: 'CardCode', width: 300 },
                    { name: 'EmployeeName', index: 'EmployeeName', width: 300}],
                  pager: '#pager', sortname: 'id',
                  viewrecoreds: true,
                  imgpath: 'Themes/images',
                  loadonce:false,
                  jsonReader:  {
                      repeatItems:false,
                     root:function(obj){return obj.rows},
                     page:function(obj){return obj.page},
                     total:function(obj){return obj.total},
                     records:function(obj){return obj.records},

                  }
 

              });

try this....

Anubhav689 · Answer 4 · 2014-06-19T00:50:00

I have solved this problem and 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>

why jqgrid not showing any data?

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0