jQWidgets Forums

Hi,

We are using jqwidgets jqxgrid with inline editing and bind the data using json format in server side, it is working fine for us. I would like to get the edited data from jqxgrid in asp.net server side. How can i achieve this.

We are using following code.

Client Side:
<script type=”text/javascript”>
$(document).ready(function () {

//URL to the service
url = “JobPopupControl4.aspx/GetCustomers”,
//Initializing the source property
source = {
datatype: “json”,
datafields: [
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘date’, type: ‘date’ }
]
};
//Getting the source data with ajax GET request
$.ajax({
type: ‘GET’,
dataType: ‘json’,
async: false,
url: ‘JobPopupControl4.aspx/GetCustomers’,
cache: false,
contentType: ‘application/json; charset=utf-8’,
success: function (data) {
source.localdata = data.d;
},
error: function (err) {
alert(‘Error’);
}
});
//Preparing the data for use
var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
editable: true,
enabletooltips: true,
selectionmode: ‘multiplecellsadvanced’,
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 120 },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 120 },
{ text: ‘Product’, columntype: ‘dropdownlist’, datafield: ‘productname’, width: 195 },
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, width: 67 },
{
text: ‘Ship Date’, datafield: ‘date’, columntype: ‘datetimeinput’, width: 110, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘d’,
validation: function (cell, value) {
if (value == “”)
return true;

var year = value.getFullYear();
if (year >= 2015) {
return { result: false, message: “Ship Date should be before 1/1/2015” };
}
return true;
}
},
{
text: ‘Quantity’, datafield: ‘quantity’, width: 70, align: ‘right’, cellsalign: ‘right’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value < 0 || value > 150) {
return { result: false, message: “Quantity should be in the 0-150 interval” };
}
return true;
},
createeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
}
},
{ text: ‘Price’, datafield: ‘price’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value < 0 || value > 15) {
return { result: false, message: “Price should be in the 0-15 interval” };
}
return true;
},
createeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ digits: 3 });
}

}
]
});

// events
$(“#jqxgrid”).on(‘cellbeginedit’, function (event) {
var args = event.args;
$(“#cellbegineditevent”).text(“Event Type: cellbeginedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});

$(“#jqxgrid”).on(‘cellendedit’, function (event) {
var args = event.args;
$(“#cellendeditevent”).text(“Event Type: cellendedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});
});

</script>

Server Side:

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public static string GetCustomers()
{
// Create two DataTable instances.
DataTable table1 = new DataTable();
table1.Columns.Add(“firstname”);
table1.Columns.Add(“lastname”);
table1.Columns.Add(“productname”);
table1.Columns.Add(“available”);
table1.Columns.Add(“quantity”);
table1.Columns.Add(“price”);
table1.Columns.Add(“date”);
table1.Rows.Add(“manivannan”, “s”, “mobile”, true , 4, 43.23, DateTime.Now);
table1.Rows.Add(“mani”, “r”, “laptop”, true, 4, 43.23, DateTime.Now);

//// Create a DataSet and put both tables in it.
//DataSet set = new DataSet();
//set.Tables.Add(table1);

//string SS = set.GetXml();

//records.DataSet = GetProduct;
if (table1 != null)
{
// return the Customers table as XML.
//System.IO.StringWriter writer = new System.IO.StringWriter();
//set.Tables[0].WriteXml(writer, XmlWriteMode.WriteSchema, false);
//return writer.ToString();

//convert object to json string
string result = GetJSONString(table1);
return result;
}
else
{
// return empty string
return String.Empty;
}
}

public static string GetJSONString(DataTable Dt)
{

string[] StrDc = new string[Dt.Columns.Count];
string HeadStr = string.Empty;

for (int i = 0; i < Dt.Columns.Count; i++)
{

StrDc[i] = Dt.Columns[i].Caption;

HeadStr += “\”” + StrDc[i] + “\” : \”” + StrDc[i] + i.ToString() + “¾” + “\”,”;
}

HeadStr = HeadStr.Substring(0, HeadStr.Length – 1);

StringBuilder Sb = new StringBuilder();
Sb.Append(“{\”” + Dt.TableName + “\” : [“);

for (int i = 0; i < Dt.Rows.Count; i++)
{

string TempStr = HeadStr;
Sb.Append(“{“);

for (int j = 0; j < Dt.Columns.Count; j++)
{

TempStr = TempStr.Replace(Dt.Columns[j] + j.ToString() + “¾”, Dt.Rows[i][j].ToString());
}

Sb.Append(TempStr + “},”);
}

Sb = new StringBuilder(Sb.ToString().Substring(0, Sb.ToString().Length – 1));
Sb.Append(“]}”);

return Sb.ToString();
}