Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
840
WebDataGrid Client side binding using PageMethods
posted

hai,

Can anyone let me know how to bind data to webdatagrid from clientside using PageMethods.

 

Thanks in advance

Parents
  • 37874
    Verified Answer
    posted

    Hello anilkoomar_1202,

     

    You could use the following function to handle the client-side Initialize event of the grid, using jQuery:

     

    function WebDataGrid1_Grid_Initialize(sender, eventArgs)

    {

        $.ajax({

            type: "POST",

            url: "Default.aspx/GetData",

            data: "{}",

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function (dataSource) {

                var grdPipeline = $find("WebDataGrid1");

                grdPipeline.set_dataSource(dataSource);

                grdPipeline._pi.show(grdPipeline);

                grdPipeline.applyClientBinding();

                grdPipeline._pi.hide(grdPipeline);

            }

        });

    }

     

    The GetData method should return the data source for the grid:

     

    [WebMethod]

        public static List<Product> GetData()

        {

            List<Product> list = new List<Product>();

            list.Add(new Product(1, "Product1", 123.4f));

            list.Add(new Product(2, "Product2", 234.123f));

            list.Add(new Product(3, "Product3", 432.342f));

            list.Add(new Product(4, "Product4", 23.23f));

            list.Add(new Product(5, "Product5", 1346.2f));

            return list;

        }

     

    You would also have to define the grid columns in the markup:

            <Columns>

                <ig:BoundDataField DataFieldName="ID" Header-Text="iD" Key="ID"> </ig:BoundDataField>

                <ig:BoundDataField DataFieldName="Name" Header-Text="Product" Key="Name"> </ig:BoundDataField>

                <ig:BoundDataField DataFieldName="Price" Header-Text="Price" Key="Price"> </ig:BoundDataField>

            </Columns>

     

    Please let me know if you have any further questions.

Reply Children
No Data