Skip to content Skip to sidebar Skip to footer

How To Use Datatable From Code Behind In Jqxgrid

Hi i have DataTable which is binding to Gridview. But in need to bind that know to jqxgrid or jqxdatatable. After googling so many times i didn't got proper solution for this.

Solution 1:

.aspx code -->>

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

<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><titleid='Description'></title><linkrel="stylesheet"href="../JQWidgets/jqwidgets/styles/jqx.base.css"type="text/css" /><scripttype="text/javascript"src="../JQWidgets/scripts/jquery-1.11.1.min.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxcore.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxbuttons.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxscrollbar.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxmenu.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxgrid.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxgrid.selection.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxgrid.columnsresize.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxdata.js"></script><scripttype="text/javascript"src="../JQWidgets/scripts/demos.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxdata.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxlistbox.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxdropdownlist.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxgrid.pager.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxgrid.edit.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxnumberinput.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxpanel.js"></script><scripttype="text/javascript"src="../JQWidgets/jqwidgets/jqxgrid.sort.js"></script><scripttype="text/javascript">
        $(document).load(function () {


        });

    </script><scripttype="text/javascript">

        $(document).ready(function () {
            $("#button").jqxButton({
                theme: 'energyblue',
                height: 30
            });
            $("#button").click(function () {
                var cells = $('#jqxgrid').jqxGrid('getselectedcells');
                var cellInfo = "";
                for (var i = 0; i < cells.length; i++) {
                    var cell = cells[i];
                    cellInfo += "\nRow: " + cell.rowindex + ", " + cell.datafield;
                }
                alert(cellInfo);
            });
            //GetDatavar data = {};
            var dataFelds = {};
            var dataCols = {};
            GetDatas();
            GetCol_Datafeilds();
            GetCol_Columns();
            functionGetDatas() {
                $.ajax({
                    url: '<%=ResolveUrl("~/Project/Service.aspx/GridValues")%>',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false,
                    cache: false,
                    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);

                    }
                });
            }
            functionGetCol_Datafeilds() {
                $.ajax({
                    url: '<%=ResolveUrl("~/Project/Service.aspx/Col_Datafeilds")%>',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false,
                    cache: false,
                    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);

                    }
                });
            }
            functionGetCol_Columns() {
                $.ajax({
                    url: '<%=ResolveUrl("~/Project/Service.aspx/Col_Columns")%>',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false,
                    cache: false,
                    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 datavar source =
        {
            datatype: "json",
            datafields: dataFelds,
            updaterow: function (rowid, rowdata, commit) {
                // synchronize with the server - send update command// call commit with parameter true if the synchronization with the server is successful // and with parameter false if the synchronization failder.commit(true);
            },
            localdata: data
        };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 1000,
                source: dataAdapter,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columnsresize: true,
                columns: dataCols
            });
           // $('#jqxgrid').jqxGrid('pincolumn', 'From_KG');//$("#jqxgrid").jqxGrid('enablehover', event.args.checked);
        });

        <%--$("#<%=btn_SelectCells.ClientID%>").click(function () {
            var cells = $('#jqxgrid').jqxGrid('getselectedcells');
            var cellInfo = "";
            for (var i = 0; i < cells.length; i++) {
                var cell = cells[i];
                cellInfo += "\nRow: " + cell.rowindex + ", " + cell.datafield;
            }
            alert(cellInfo);
        });--%>

    </script></head><bodyclass='default'><formid="form1"runat="server"><div><divid='jqxWidget'><divid="jqxgrid"></div></div><divstyle="margin-top: 10px;"><inputid="button"type="button"value="Get the selected cells" />
                <%--<asp:ButtonID="btn_SelectCells"runat="server"Text="Get the selected cells"UseSubmitBehavior="False" />--%>
            </div></div></form></body></html>

.aspx.cs or Web Service 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;
publicpartialclassProject_Service : System.Web.UI.Page
{

    protectedvoidPage_Load(object sender, EventArgs e)
    {

    }

    #region Testing
    [WebMethod]
    publicstatic String GridValues()
    {
        String Qry = "SELECT [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]
    publicstatic String Col_Datafeilds()
    {
        String Qry = "SELECT [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 = "";
        int counter = 0;
        foreach (DataColumn col in dt.Columns)
        {
            if (counter < 2)
            {
                row = new Dictionary<string, object>();
                row.Add("name", col.ColumnName);
                row.Add("type", "string");
                rows.Add(row);
            }
            elseif (counter >= 2)
            {
                row = new Dictionary<string, object>();
                row.Add("name", col.ColumnName);
                row.Add("type", "number");
                rows.Add(row);
            }
            counter += 1;
        }
        Col = serializer.Serialize(rows);
        //Col = JsonConvert.SerializeObject(rows);if (Col != "")
        {
            return (Col);
        }
        else
        {
            return"Error";
        }
    }
    [WebMethod]
    publicstatic String Col_Columns()
    {
        String Qry = "SELECT [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 = "";
        int counter = 0;
        foreach (DataColumn col in dt.Columns)
        {
            if (counter < 2)
            {
                row = new Dictionary<string, object>();
                row.Add("text", col.ColumnName.ToUpper());
                row.Add("datafield", col.ColumnName);
                row.Add("columntype", "textbox");
                row.Add("width", "100");
                row.Add("cellsalign", "left");
                //row.Add("pinned", "true");
                rows.Add(row);
            }
            elseif (counter >= 2)
            {
                row = new Dictionary<string, object>();
                row.Add("text", col.ColumnName.ToUpper());
                row.Add("datafield", col.ColumnName);
                row.Add("columntype", "textbox");
                row.Add("width", "25");
                row.Add("cellsalign", "right");
                rows.Add(row);
            }
        }
        Col = serializer.Serialize(rows);
       // Col = JsonConvert.SerializeObject(rows);if (Col != "")
        {
            return (Col);
        }
        else
        {
            return"Error";
        }
    }

    #endregion
}

Paste it ......

Replace the Query by your Query.....

Donot Supply Datafeild and Column Def. in the .aspx page

It's Fully Dynamic Solution !!!

Post a Comment for "How To Use Datatable From Code Behind In Jqxgrid"