jQuery UI Widgets Forums Grid Bind Data from Database to Gridview on Buttton click

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • divya


    I have below questions
    1. How to I bind Data to Gridview on Button click not on page load. Used below code but is not binding data on button click

    <script type=”text/javascript”>
    $(document).ready(function () {
    source = {
    datatype: “xml”,
    datafields: [
    { name: ‘EFI_PROJECT_NAME’ },
    { name: ‘PRODUCT_ID’ }
    async: false,
    record: ‘Table’,
    url: ‘Default.aspx/GetPatchList’,
    var dataAdapter = new $.jqx.dataAdapter(source,
    { contentType: ‘application/json; charset=utf-8’ }
    theme: ‘classic’,
    columns: [
    { text: ‘EFI_PROJECT_NAME’, dataField: ‘EFI_PROJECT_NAME’, width: 250 },
    { text: ‘PRODUCT_ID’, dataField: ‘PRODUCT_ID’, width: 150 }

    $(“#btnOEMProductDisplay”).click(function () {

    <form id=”form1″ runat=”server”>
    <asp:Button ID=”btnOEMProductDisplay” runat=”server” Text=”Display Products” CssClass=”btn-primary” ClientIDMode=”Static” />
    <div id=”jqxgrid”></div>


    In Default.aspx.cs page
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Xml)]
    public static string GetPatchList()
    SupportUI.classes.data.UtilityDAL dal = new SupportUI.classes.data.UtilityDAL();
    string query = “SELECT * from products”;

    DataSet dsResult = dal.executeQuery(query);
    // return the Customers table as XML.
    System.IO.StringWriter writer = new System.IO.StringWriter();
    dsResult.Tables[0].WriteXml(writer, XmlWriteMode.WriteSchema, false);
    return writer.ToString();


    2. I have parameter to pass to my database query. The value to pass needs to come from dropdownlist that we create on default.aspx page. How do I achieve this.
    Example Query : “Select * from products where product_id=”Value”



    Hi divya,

    1. Your client-side code seems fine. Are there any errors thrown in your browser’s console? You can also check if there is an error during data retrieval with the loadError callback function:

    var dataAdapter = new $.jqx.dataAdapter(source, {
        contentType: 'application/json; charset=utf-8',
        loadError: function(jqXHR, status, error) {

    2. You can pass whatever parameter you wish to your server side with the source object’s data property, e.g.:

    var selectedItem = $("#jqxDropDownList").jqxDropDownList('getSelectedItem'),
        selectedItemLabel = selectedItem.label,
        selectedItemValue = selectedItem.value;
    source = {
        datatype: "xml",
        datafields: [{
            name: 'EFI_PROJECT_NAME'
        }, {
            name: 'PRODUCT_ID'
        async: false,
        record: 'Table',
        url: 'Default.aspx/GetPatchList',
        data: {
            selectedItemLabel: selectedItemLabel,
            selectedItemValue: selectedItemValue

    I have also send these suggestions to your email.

    Best Regards,

    jQWidgets team

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

You must be logged in to reply to this topic.