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"