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
    Participant

    Hi,

    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’ }
    );
    $(“#jqxgrid”).jqxGrid({
    theme: ‘classic’,
    columns: [
    { text: ‘EFI_PROJECT_NAME’, dataField: ‘EFI_PROJECT_NAME’, width: 250 },
    { text: ‘PRODUCT_ID’, dataField: ‘PRODUCT_ID’, width: 150 }
    ]
    });

    $(“#btnOEMProductDisplay”).click(function () {
    $(“#jqxgrid”).jqxGrid({
    source:dataAdapter
    })
    });
    });
    </script>

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

    </form>
    </body>

    In Default.aspx.cs page
    [System.Web.Services.WebMethod]
    [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”

    Thanks


    Dimitar
    Participant

    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) {
            alert(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,
    Dimitar

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

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

You must be logged in to reply to this topic.