CODEWITHSUNDEEP
c#jqgrid-asp.net
smr5
smr5

Reputation: 2793

JQGrid in asp.net not displaying data (not visible)

I'm following this example and I'm having some hard time displaying data in a gridview. When the page is loaded it gets to GetData and returns values.

If in the immediate windows after I fill datatable and see the count ?dtResult.Rows.Count I get 1001. So I know I have data. However, when the I debug the app I just get the three buttons. What am I missing here?

Here's the aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="TestApp.test" %>
<%@ Register Assembly="Trirand.Web" TagPrefix="trirand" Namespace="Trirand.Web.UI.WebControls" %>
<!DOCTYPE html>
<html lang="en-us">
<head id="Head1" runat="server">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/redmond/jquery-ui.css" />
<!-- The jQuery UI theme extension jqGrid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />
<!-- jQuery runtime minified -->
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-2.0.3.min.js" type="text/javascript"></script>
<!-- The localization file we need, English in this case -->
<script src="/js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
<!-- The jqGrid client-side javascript -->
<script src="/js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>    

<style type="text/css">
    body, html { font-size: 80%; }    
</style>
</head>
<body>
<form id="form1" runat="server">
<div>       
   <div id="message">
   
   <script type="text/javascript">

       function addRow() {
           var grid = jQuery("#<%= JQGrid1.ClientID %>");
           grid.editGridRow("new", grid.addDialogOptions);
       }

       function editRow() {
           var grid = jQuery("#<%= JQGrid1.ClientID %>");
           var rowKey = grid.getGridParam("selrow");
           var editOptions = grid.getGridParam('editDialogOptions');
           if (rowKey) {
               grid.editGridRow(rowKey, editOptions);
           }
           else {
               alert("No rows are selected");
           }
       }

       function delRow() {
           var grid = jQuery("#<%= JQGrid1.ClientID %>");
           var rowKey = grid.getGridParam("selrow");
           if (rowKey) {
               grid.delGridRow(rowKey, grid.delDialogOptions);
           }
           else {
               alert("No rows are selected");
           }
       }
   </script>
   
   <input type="button" onclick="addRow()" value="Add" />
   <input type="button" onclick="editRow()" value="Edit" />
   <input type="button" onclick="delRow()" value="Delete" />
  
    <trirand:jqgrid runat="server" ID="JQGrid1"
        OnRowDeleting="JQGrid1_RowDeleting"
        OnRowAdding="JQGrid1_RowAdding"
        OnRowEditing="JQGrid1_RowEditing">         
        <Columns>
            <trirand:JQGridColumn DataField="Addressbookid" Editable="false" PrimaryKey="true" />
            <trirand:JQGridColumn DataField="ClientName" Editable="true" />
            <trirand:JQGridColumn DataField="Clientno" Editable="true" />
            <trirand:JQGridColumn DataField="IndustryName" Editable="true" />             
        </Columns>
        <ToolBarSettings ShowEditButton="true" ShowAddButton="true" ShowDeleteButton="true" />
        <EditDialogSettings CloseAfterEditing="true" Caption="The Edit Dialog"  />
        <AddDialogSettings CloseAfterAdding="true" />              

    </trirand:jqgrid>

   </div>
   <br /><br />
  
   
</div>
</form>

Here's the codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

namespace TestApp
{
public partial class test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        JQGrid1.DataSource = GetData();
        JQGrid1.DataBind();
    }
   

    protected DataTable GetData()
    {
        if (Session["EditDialogData"] == null)
        {
            // Create a new Sql Connection and set connection string accordingly
            SqlConnection sqlConnection = new SqlConnection();
            sqlConnection.ConnectionString = ConfigurationManager.ConnectionStrings["Sandbox"].ConnectionString;
            sqlConnection.Open();

            string sqlStatement = "Select * from voiceportal.dbo.clients_v";

            // Create a SqlDataAdapter to get the results as DataTable
            SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sqlStatement, sqlConnection);

            // Create a new DataTable
            DataTable dtResult = new DataTable();

            // Fill the DataTable with the result of the SQL statement
            sqlDataAdapter.Fill(dtResult);

            Session["EditDialogData"] = dtResult;

            return dtResult;
        }
        else
        {
            return Session["EditDialogData"] as DataTable;
        }
    }
}

}

Any suggestions on how I can fix this?

Thanks

Upvotes: 0

Views: 913

Answers (1)

Csaba Toth
Csaba Toth

Reputation: 10699

My two cents.

  1. Make sure that the grid locale js file is in the right place and served well to your browser. See the related line: <script src="/js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script> Open up your developer console with F12, refresh the page and look for the downloaded files and error messages on the console which can tell if this doesn't go well.

  2. Double check that the data you serve matches the column configuration. Pay special attention to camel casing. .NET properties start with uppercase, they are camel cased, but JSON data often starts with lowercase. That also depends on if you use any transformations (like NewtonSoft and stuff). I don't know what's in your voiceportal.dbo.clients_v table, please specify your schema. In your ASPX code Addressbookid and Clientno are not camel cased. Shouldn't they be AddressbookId and ClientNo? Depends on your schema and what actually comes through the wire.

Upvotes: 1

Related Questions