1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Grid not displayed when binding to DataTable populated from SQL Stored Procedure

Grid not displayed when binding to DataTable populated from SQL Stored Procedure

Here is the Visual Studio 2008 webform

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SalesOrder.aspx.vb" Inherits="SyncfusionGridTest.SalesOrder" %>
<%@ Register Assembly="Syncfusion.EJ.Web, Version=16.1350.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>
<%@ Register Assembly="Syncfusion.EJ, Version=16.1350.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Models" TagPrefix="ej" %>
 
<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <ej:Grid ID="gvSalesOrders" runat="server">
            <Columns>
                <ej:Column Field="SalesOrder" HeaderText="Sales Order" />
                <ej:Column Field="ikqty" HeaderText="Quantity" />
                <ej:Column Field="Vendor" HeaderText="Vendor" />
                <ej:Column Field="YourProdCode" HeaderText="Supplier Code" />
                <ej:Column Field="pdabbdesc" HeaderText="Description" />
                <ej:Column Field="CustomerCode" HeaderText="Buyer ID" />
                <ej:Column Field="OrderStatus" HeaderText="Current Status" />
            </Columns>        
        </ej:Grid>     
    </div>
    </form>
</body>
</html>

In the Code Behind I bind to a DataTable populated from the SQL database

        Dim AuctionsDB As Bids.AuctionsDB = New Bids.AuctionsDB
        Dim tblSalesOrder As New DataTable

        tblSalesOrder = AuctionsDB.GetSalesOrderStatusByCatNo("Admin", "GFA", 937, 0)
        gvSalesOrders.DataSource = tblSalesOrder
        gvSalesOrders.DataBind()

The Web Form is empty but contains the Data in a CDATA as JSON

    <div>
       <div id="gvSalesOrders"></div><span id="gvSalesOrders"></span>     
    </div>    

//<![CDATA[
$("#gvSalesOrders").ejGrid({"selectedRowIndices":[],"_checkedRowIndices":[],"dataSource":ej.isJSON([{"Vendor":"CHC","AuctionDate":"\/Date(1521600041903)\/","AuctionNo":937,"ikcatdetid":34569,"SalesOrder":574,"OrderlineID":19823,"Customercode":12434,"OurProdcode":4001,"YourProdcode":"WTG","ikqty":6,"ikpriceper":1,"pdabbdesc":"Whiting","OrderStatus":"NEW ORDER","pdcatdesc":"Whiting 15KG - Small - #1"},{"Vendor":"CHC","AuctionDate":"\/Date(1521600041903)\/","AuctionNo":937,"ikcatdetid":34569,"SalesOrder":574,"OrderlineID":19825,"Customercode":12434,"OurProdcode":4001,"YourProdcode":"WTG","ikqty":9,"ikpriceper":1,"pdabbdesc":"Whiting","OrderStatus":"NEW ORDER","pdcatdesc":"Whiting 15KG - Small - #1"},{"Vendor":"CHC","AuctionDate":"\/Date(1521600041903)\/","AuctionNo":937,"ikcatdetid":34562,"SalesOrder":574,"OrderlineID":19821,"Customercode":12434,"OurProdcode":4058,"YourProdcode":"PWK","ikqty":20,"ikpriceper":1,"pdabbdesc":"Prawns - King","OrderStatus":"NEW ORDER","pdcatdesc":"Prawns - King 12kg box - Large - #1"},{"Vendor":"CHC","AuctionDate":"\/Date(1521600041903)\/","AuctionNo":937,"ikcatdetid":34561,"SalesOrder":574,"OrderlineID":19819,"Customercode":12434,"OurProdcode":4079,"YourProdcode":"OCT","ikqty":6,"ikpriceper":1,"pdabbdesc":"OCTOPUS","OrderStatus":"NEW ORDER","pdcatdesc":"OCTOPUS  - 15kg - Small - #1"}]),"cssClass":"","locale":"en-AU","columns":[{"field":"SalesOrder","headerText":"Sales Order"},{"field":"ikqty","headerText":"Quantity"},{"field":"Vendor","headerText":"Vendor"},{"field":"YourProdCode","headerText":"Supplier Code"},{"field":"pdabbdesc","headerText":"Description"},{"field":"CustomerCode","headerText":"Buyer ID"},{"field":"OrderStatus","headerText":"Current Status"}],"clientId":"gvSalesOrders","uniqueId":"gvSalesOrders"});
//]]>











2 Replies
RJ Robert Joiner April 19, 2018 05:31 AM UTC

I had not added the references

    <link rel='nofollow' href="css/web/bootstrap-theme/ej.web.all.min.css" rel="stylesheet" />
    <script src="external/jquery-1.11.3.min.js"></script>
    <script src="external/jquery-1.11.3.min.js"></script>
    <script src="external/jsrender.min.js"></script>
    <script src="scripts/web/ej.web.all.min.js"></script>
    <script src="scripts/common/ej.webform.min.js"></script>

SE Sathyanarayanamoorthy Eswararao Syncfusion Team April 19, 2018 05:06 PM UTC

Hi Robert, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we are unable to reproduce the mentioned issue on our end. We have prepared a sample with the same requirement which can be downloaded from the below location. 

Refer the below code example.  
  
[Default.aspx]  
  
<ej:Grid ID="Grid" ClientIDMode="Static" runat='server' AllowPaging="true">  
          
        <EditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"EditMode="Dialog" />  
        <ToolbarSettings ShowToolbar="true"ToolbarItems="add,edit,delete,update,cancel" />  
        <Columns>  
            <ej:Column Field="OrderID" IsPrimaryKey="true" Width="80" />  
            <ej:Column Field="CustomerID" Width="100" />  
            <ej:Column Field="EmployeeID" EditType="Dropdown" Width="80" />  
            <ej:Column Field="Freight" Format="{0:C2}" Width="80" />  
        </Columns>  
    </ej:Grid>  
      
  
  
[Default.aspx.vb]  
  
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load  
        If Not IsPostBack Then  
            Dim myConnection As NewSqlConnection(ConfigurationManager.ConnectionStrings("SQLConnectionString").ToString())  
            dt = New DataTable("Order")  
            Dim cmd As New SqlCommand()  
            cmd.Connection = myConnection  
            cmd.CommandText = "select * from Orders"  
            cmd.CommandType = CommandType.Text  
            Dim da As New SqlDataAdapter()  
            da.SelectCommand = cmd  
            If myConnection.State = ConnectionState.Closed Then  
                myConnection.Open()  
            End If  
            da.Fill(dt)  
            Session("SqlDataSource") = dt  
           DataBind()  
        End If  
    End Sub  
    Protected Sub DataBind()  
        Grid.DataSource = DirectCast(Session("SqlDataSource"), DataTable)  
        Grid.DataBind()  
  
    End Sub   
  
  
Also in the provided code example we found that you have referred the Jquery files twice in the scripts section which may be the cause of the mentioned issue. The jquery files must be referred only once. If you still face the issue please share the following details. 
 
  1. Screenshot of the mentioned issue.
  2. Share the details of script errors in console(if any).
  3. Essential studio versions.
  4. If possible please try to reproduce the mentioned issue in attached sample
 
Regards, 
Sathyanarayanamoorthy 



Loader.
Up arrow icon