jQWidgets Forums

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

Tagged: , , , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Bind Data from Database to Gridview on Buttton click Posts
  • September 14, 2015 at 4:26 pm Bind Data from Database to Gridview on Buttton click #75822

    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

    September 15, 2015 at 11:06 am Bind Data from Database to Gridview on Buttton click #75851

    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/

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

You must be logged in to reply to this topic.