update grid to sql with xml

[holudaParticipant]

hi
I have a grid of which code is listed below.
default.aspx.cs

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.Web.Script.Services;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Script.Serialization;

namespace BANGKENTNN2016
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Xml)]
public static string GetTen()
{
string query = “SELECT ten, dvt,maso FROM Tbl_DMTHN”;
SqlCommand cmd = new SqlCommand(query);

// Populate the DataSet.
DataSet data = GetData(cmd);
// return the Customers table as XML.
System.IO.StringWriter writer = new System.IO.StringWriter();
data.Tables[0].WriteXml(writer, XmlWriteMode.WriteSchema, false);
return writer.ToString();
}
private static DataSet GetData(SqlCommand cmd)
{
string strConnString = ConfigurationManager.ConnectionStrings[“Bangke_NTNNTS2016ConnectionString”].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}
}
}

default.aspx:

<%@ Page Title=”Home Page” Language=”C#” MasterPageFile=”~/Site.master” AutoEventWireup=”true”
CodeBehind=”Default.aspx.cs” Inherits=”BANGKENTNN2016._Default” %>

<asp:Content ID=”HeaderContent” runat=”server” ContentPlaceHolderID=”HeadContent”>
<link href=”Styles/jqx.base.css” rel=”stylesheet” type=”text/css” />
<link href=”Styles/jqx.classic.css” rel=”stylesheet” type=”text/css” />
<script src=”Scripts/jquery-2.0.2.min.js” type=”text/javascript”></script>
<script src=”Scripts/jqxcore.js” type=”text/javascript”></script>
<script src=”Scripts/jqxbuttons.js” type=”text/javascript”></script>
<script src=”Scripts/jqxdata.js” type=”text/javascript”></script>
<script src=”Scripts/jqxgrid.js” type=”text/javascript”></script>
<script src=”Scripts/jqxgrid.edit.js” type=”text/javascript”></script>
<script src=”Scripts/jqxgrid.selection.js” type=”text/javascript”></script>
<script src=”Scripts/jqxmenu.js” type=”text/javascript”></script>
<script src=”Scripts/jqxscrollbar.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function () {
//Getting the source data with ajax GET request

source = {

datatype: “xml”,
datafields: [
{ name: ‘ten’ },
{ name: ‘dvt’ },
{ name: ‘maso’ },
{ name: ‘tongso’ },
],
async: false,
record: ‘Table’,
url: ‘Default.aspx/GetTen’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
commit(true);
}
};
var dataAdapter = new $.jqx.dataAdapter(source,
{ contentType: ‘application/json; charset=utf-8’ }
);

$(“#jqxgrid”).jqxGrid({
source: dataAdapter,
theme: ‘classic’,
editable: true,
selectionmode: ‘singlecell’,
editmode: ‘click’,
columns: [
{ text: ”, dataField: ‘ten’, width: 250 },
{ text: ‘Đơn vị tính’, dataField: ‘dvt’, width: 60 },
{ text: ‘Mã số’, datafield: ‘maso’, width: 40 },
{ text: ‘Tổng số’, datafield: ‘tongso’, width: 60 },
]
});
$(“#update”).jqxButton();
});
</script>
<style type=”text/css”>
.style1
{
width: 481px;
}
</style>
</asp:Content>
<asp:Content ID=”BodyContent” runat=”server” ContentPlaceHolderID=”MainContent”>
<table border=0>
<tr>
<td class=”style1″>Tỉnh/thành phố:</td>
<td class=”jqx-docking-layout-overlay-inner-square-header-horizontal”><asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td class=”style1″>Huyện/quận/thị xã/thành phố:</td>
<td class=”jqx-docking-layout-overlay-inner-square-header-horizontal”><asp:TextBox ID=”TextBox2″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td class=”style1″>Xã/phường/thị trấn:</td>
<td class=”jqx-docking-layout-overlay-inner-square-header-horizontal”><asp:TextBox ID=”TextBox3″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td class=”style1″>Thôn ấp bản/tổ dân phố:</td>
<td class=”jqx-docking-layout-overlay-inner-square-header-horizontal”><asp:TextBox ID=”TextBox4″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td class=”style1″>Địa bàn điều tra số:</td>
<td class=”jqx-docking-layout-overlay-inner-square-header-horizontal”><asp:TextBox ID=”TextBox5″ runat=”server”></asp:TextBox></td>
</tr>
</table>
<br />
<br />

<br />
<div id=”jqxgrid”></div>
<div style=”margin-top: 10px;”>
<input id=”update” type=”button” value=”Update” />
</div>
</asp:Content>

then grid is edited, i want save to sql, how to do ?
thank

[DimitarParticipant]

Hello holuda,

The synchronisation with the database should be implemented in the source object’s updaterow callback function. You can see a sample solution presented in the help topic CRUD with jqxGrid, ASP.NET MVC3 and SQL.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[holudaParticipant]

thank Dimitar
if i dont use mvc, can i update sql ?

[DimitarParticipant]

Hi holuda,

Yes, your client-side code should be similar to the one in the aforementioned example, but the server-side code would have to be in accordance with the technology you are using. In our ASP .NET Integration section we have several non-MVC help topics, too, such as Bind jqxGrid to SQL Database using ASP.NET.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[holudaParticipant]

i read a lot of topics,include topic which you gave, but they display only data in grid, not update.
can yuy help me more ?
thank

[DimitarParticipant]

Hi holuda,

Whether you are using MVC or not, the client-side part of the update functionality has to be implemented in the source callback function updaterow, where an Ajax call to your server-side has to be made. As I have already stated, this is demonstrated in the tutorial CRUD with jqxGrid, ASP.NET MVC3 and SQL.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts