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.