jQuery UI Widgets Forums Grid update grid to sql with xml

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 7 years, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • update grid to sql with xml #79448

    holuda
    Participant

    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

    update grid to sql with xml #79453

    Dimitar
    Participant

    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/

    update grid to sql with xml #79556

    holuda
    Participant

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

    update grid to sql with xml #79563

    Dimitar
    Participant

    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/

    update grid to sql with xml #79633

    holuda
    Participant

    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

    update grid to sql with xml #79911

    Dimitar
    Participant

    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/

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

You must be logged in to reply to this topic.