jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by SSS 10 years, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Grid Is not Populating with Dynamic JSON Data,Columns and Datafeilds Posts

November 4, 2014 at 10:58 am Grid Is not Populating with Dynamic JSON Data,Columns and Datafeilds #62099

SSS

Participant

What I did is this ….
Create a Simple asp.net Web Page
Code –>


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestCellSelection.aspx.cs" Inherits="CourierApp.Project.TestCellSelection" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title id='Description'>This example shows how to create a Grid from JSON string.</title>
    <link rel="stylesheet" href="../JQWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../JQWidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../JQWidgets/scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //GetData
            var data = {};
            var dataFelds = {};
            var dataCols = {};
            GetDatas();
            GetCol_Datafeilds();
            GetCol_Columns();
            function GetDatas() {
                $.ajax({
                    url: '<%=ResolveUrl("~/Project/Service.aspx/GridValues")%>',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (dataa) {
                        var response = dataa.d;
                        if (response != "Error") {
                            data = response;
                            console.log(data);
                        }
                        else {
                            alert("Retrive Error !!");
                        }
                    },
                    failure: function (data) {
                        alert(response.d);
                    },
                    error: function (error) {
                        console.log("Error : " + error.responseText);

                    }
                });
            }
            function GetCol_Datafeilds() {
                $.ajax({
                    url: '<%=ResolveUrl("~/Project/Service.aspx/Col_Datafeilds")%>',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (dataa) {
                        var response = dataa.d;
                        if (response != "Error") {
                            dataFelds = $.parseJSON(response);
                            console.log(dataFelds);
                        }
                        else {
                            alert("Retrive Error !!");
                        }
                    },
                    failure: function (data) {
                        alert(response.d);
                    },
                    error: function (error) {
                        console.log("Error : " + error.responseText);

                    }
                });
            }
            function GetCol_Columns() {
                $.ajax({
                    url: '<%=ResolveUrl("~/Project/Service.aspx/Col_Columns")%>',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (dataa) {
                        var response = dataa.d;
                        if (response != "Error") {
                            dataCols = $.parseJSON(response);
                            console.log(dataCols);
                        }
                        else {
                            alert("Retrive Error !!");
                        }
                    },
                    failure: function (data) {
                        alert(response.d);
                    },
                    error: function (error) {
                        console.log("Error : " + error.responseText);

                    }
                });
            }
            // prepare the data
            var source =
        {
            datatype: "json",
            datafields: dataFelds,
            localdata: data
        };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 1300,
                source: dataAdapter,
                columnsresize: true,
                columns: dataCols
            });
        });
    </script>
</head>
<body class='default'>
    <form id="form1" runat="server">
            <div id='jqxWidget'>
                <div id="jqxgrid">
                </div>
            </div>
    </form>
</body>
</html>

Next Create Three WebMethod For That….

Code —–>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Collections;
using System.Web.Script.Serialization;
using System.Web.Helpers;
using BL;
using DAL;
using Newtonsoft.Json;
public partial class Project_Service : System.Web.UI.Page
{
   
    protected void Page_Load(object sender, EventArgs e)
    {

    }

[WebMethod]
    public static String GridValues()
    {
        String Qry = "SELECT top 10 [From Kgs] as From_Kg,[To kgs] as To_Kg,[1] as Zone1,[2] as Zone2,[3] as Zone3,[4] as Zone4,[5] as Zone5,[6] as Zone6,[7] as Zone7,[8] as Zone8,[9] as Zone9  FROM Tnt_Rate";
        DataTable dt = DbAccess.FetchDatatable(Qry);
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
        Dictionary<string, object> row;
        foreach (DataRow dr in dt.Rows)
        {
            row = new Dictionary<string, object>();
            foreach (DataColumn col in dt.Columns)
            {
                row.Add(col.ColumnName, dr[col]);
            }
            rows.Add(row);
        }
        String Val = serializer.Serialize(rows);
        if (Val != "")
        {
            return (Val);
        }
        else
        {
            return "Error";
        }
    }
    [WebMethod]
    public static String Col_Datafeilds()
    {
        String Qry = "SELECT top 10 [From Kgs] as From_Kg,[To kgs] as To_Kg,[1] as Zone1,[2] as Zone2,[3] as Zone3,[4] as Zone4,[5] as Zone5,[6] as Zone6,[7] as Zone7,[8] as Zone8,[9] as Zone9  FROM Tnt_Rate";
        DataTable dt = DbAccess.FetchDatatable(Qry);
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
        Dictionary<string, object> row = new Dictionary<string, object>();
        String Col = "";
        foreach (DataColumn col in dt.Columns)
        {
                row = new Dictionary<string, object>();
                row.Add("name", col.ColumnName.ToUpper());
                row.Add("type", "number");
                rows.Add(row);
        }
        Col = serializer.Serialize(rows);
        //Col = JsonConvert.SerializeObject(rows);
        if (Col != "")
        {
            return (Col);
        }
        else
        {
            return "Error";
        }
    }
    [WebMethod]
    public static String Col_Columns()
    {
        String Qry = "SELECT top 10 [From Kgs] as From_Kg,[To kgs] as To_Kg,[1] as Zone1,[2] as Zone2,[3] as Zone3,[4] as Zone4,[5] as Zone5,[6] as Zone6,[7] as Zone7,[8] as Zone8,[9] as Zone9  FROM Tnt_Rate";
        DataTable dt = DbAccess.FetchDatatable(Qry);
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
        Dictionary<string, object> row;
        String Col = "";
        foreach (DataColumn col in dt.Columns)
        {
            row = new Dictionary<string, object>();
            row.Add("text", col.ColumnName.ToUpper());
            row.Add("datafield", col.ColumnName);
            row.Add("columntype", "textbox");
            rows.Add(row);
        }
        Col = serializer.Serialize(rows);
       // Col = JsonConvert.SerializeObject(rows);
        if (Col != "")
        {
            return (Col);
        }
        else
        {
            return "Error";
        }
    }

}

Now the Data is not Populating in the Grid …..The Data comming is all Numeric Data …..Example :


[
{"From_Kg":0.001,"To_Kg":0.5,"Zone1":3342,"Zone2":3520,"Zone3":3736,"Zone4":3779,"Zone5":4020,"Zone6":4502,"Zone7":4615,"Zone8":4809,"Zone9":4988},
{"From_Kg":0.501,"To_Kg":1,"Zone1":3342,"Zone2":3520,"Zone3":3736,"Zone4":3779,"Zone5":4020,"Zone6":4502,"Zone7":4615,"Zone8":4809,"Zone9":4988},
{"From_Kg":1.001,"To_Kg":1.5,"Zone1":3342,"Zone2":3520,"Zone3":3736,"Zone4":3779,"Zone5":4020,"Zone6":4502,"Zone7":4615,"Zone8":4809,"Zone9":4988},
{"From_Kg":1.501,"To_Kg":2,"Zone1":3342,"Zone2":3520,"Zone3":3736,"Zone4":3779,"Zone5":4020,"Zone6":4502,"Zone7":4615,"Zone8":4809,"Zone9":4988},
{"From_Kg":2.001,"To_Kg":2.5,"Zone1":3342,"Zone2":3520,"Zone3":3736,"Zone4":3779,"Zone5":4020,"Zone6":4502,"Zone7":4615,"Zone8":4809,"Zone9":4988},
{"From_Kg":2.501,"To_Kg":3,"Zone1":3342,"Zone2":3520,"Zone3":3736,"Zone4":3779,"Zone5":4020,"Zone6":4502,"Zone7":4615,"Zone8":4809,"Zone9":4988},
{"From_Kg":3.001,"To_Kg":3.5,"Zone1":3342,"Zone2":3520,"Zone3":3736,"Zone4":3779,"Zone5":4020,"Zone6":4502,"Zone7":4615,"Zone8":4809,"Zone9":4988},
{"From_Kg":3.501,"To_Kg":4,"Zone1":3342,"Zone2":3520,"Zone3":3736,"Zone4":3779,"Zone5":4020,"Zone6":4502,"Zone7":4615,"Zone8":4809,"Zone9":4988},
{"From_Kg":4.001,"To_Kg":4.5,"Zone1":3342,"Zone2":3520,"Zone3":3736,"Zone4":3779,"Zone5":4020,"Zone6":4502,"Zone7":4615,"Zone8":4809,"Zone9":4988},
{"From_Kg":4.501,"To_Kg":5,"Zone1":3342,"Zone2":3520,"Zone3":3736,"Zone4":3779,"Zone5":4020,"Zone6":4502,"Zone7":4615,"Zone8":4809,"Zone9":4988}
]

Please help me to Populate the Grid !!!!
Please !!!

November 4, 2014 at 11:01 am Grid Is not Populating with Dynamic JSON Data,Columns and Datafeilds #62100

SSS

Participant

The Columns I Am generating is —>
[Object { text="FROM_KG", datafield="From_Kg", columntype="textbox"}, Object { text="TO_KG", datafield="To_Kg", columntype="textbox"}, Object { text="ZONE1", datafield="Zone1", columntype="textbox"}, Object { text="ZONE2", datafield="Zone2", columntype="textbox"}, Object { text="ZONE3", datafield="Zone3", columntype="textbox"}, Object { text="ZONE4", datafield="Zone4", columntype="textbox"}, Object { text="ZONE5", datafield="Zone5", columntype="textbox"}, Object { text="ZONE6", datafield="Zone6", columntype="textbox"}, Object { text="ZONE7", datafield="Zone7", columntype="textbox"}, Object { text="ZONE8", datafield="Zone8", columntype="textbox"}, Object { text="ZONE9", datafield="Zone9", columntype="textbox"}]

The Datafeild I am generating is —–>

 [
 Object { name="FROM_KG", type="number"},
 Object { name="TO_KG", type="number"}, 
 Object { name="ZONE1", type="number"}, 
 Object { name="ZONE2", type="number"}, 
 Object { name="ZONE3", type="number"},
 Object { name="ZONE4", type="number"},
 Object { name="ZONE5", type="number"},
 Object { name="ZONE6", type="number"},
 Object { name="ZONE7", type="number"},
 Object { name="ZONE8", type="number"}, 
 Object { name="ZONE9", type="number"}
 ]

November 4, 2014 at 11:19 am Grid Is not Populating with Dynamic JSON Data,Columns and Datafeilds #62103

Peter Stoev

Keymaster

Hi SSS,

I think it should be without “Object”. It should be JSON in the format shown in our demos and documentation.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 4, 2014 at 11:58 am Grid Is not Populating with Dynamic JSON Data,Columns and Datafeilds #62108

SSS

Participant

I am receiving Data in JSON format …the format is —->

[{ “name”=”FROM_KG”, “type”=”number”},
{ “name”=”TO_KG”, “type”=”number”},
{ “name”=”ZONE1”, “type”=”number”},
{ “name”=”ZONE2”, “type”=”number”},
{ “name”=”ZONE3”, “type”=”number”},
{ “name”=”ZONE4”, “type”=”number”},
{ “name”=”ZONE5”, “type”=”number”},
{ “name”=”ZONE6”, “type”=”number”},
{ “name”=”ZONE7”, “type”=”number”}]

which is not working….
How to Convert { “name”=”TO_KG”, “type”=”number”} format to
{ name=’TO_KG’, type=’number’} dynamically ….

or plz help me to bind

dynamically …I mean I donot know the number of columns as well as row ….

How to achive that….pls suggest…

November 4, 2014 at 12:15 pm Grid Is not Populating with Dynamic JSON Data,Columns and Datafeilds #62110

Peter Stoev

Keymaster

Hi SSS,

It should be valid JSON, i.e something like below:
` var source =
{
datatype: “xml”,
datafields: [
{ name: ‘ProductName’, type: ‘string’ },
{ name: ‘QuantityPerUnit’, type: ‘int’ },
{ name: ‘UnitPrice’, type: ‘float’ },
{ name: ‘UnitsInStock’, type: ‘float’ },
{ name: ‘Discontinued’, type: ‘bool’ }
],
root: “Products”,
record: “Product”,
id: ‘ProductID’,
url: url
};`

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 4, 2014 at 1:16 pm Grid Is not Populating with Dynamic JSON Data,Columns and Datafeilds #62112

SSS

Participant

I have Successfully achieved ..what I wanted Thanks …… but the solution given is not to the point…..

Again Thanks …thanks for responding….

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.