hai,
Can anyone let me know how to bind data to webdatagrid from clientside using PageMethods.
Thanks in advance
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.
Hi Nikolay,
Thanks for your response,but can u let me know how to bind the grid using the dataset from page method .
Thanks in Advance.
Hi anilkoomar_1202,
In order to bind the grid to a DataSet you would have to serialize it in the page method, which is passed to the ajax() function. To serialize a DataTable to JSON string you could use code, similar to the following:
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row = default(Dictionary<string, object>);
foreach (DataRow dr in table.Rows)
row = new Dictionary<string, object>();
foreach (DataColumn col in table.Columns)
row.Add(col.ColumnName, dr[col]);
rows.Add(row);
return serializer.Serialize(rows);
And here is the ajax() function:
grdPipeline.set_dataSource(dataSource.d);
Notice that the parameter of set_dataSource() function is different from the previous example - “dataSource.d”.
Please let me know if this helps.
Hi ,
Thanks for your response,
i have tried as you specified but i am getting the error "Microsoft JScript runtime error: Object doesn't support this property or method" At " grdPipeline.set_dataSource(dataSource.d);"
Data i was binding is in this format "[{"idCompany":"870f273c-178b-4f72-bd9c-05066b673bb4","strCompanyName":"Test","strCompanyType":"Fc","strCity":"","strAddress1":"","strAddress2":"","strZip":"","strState":"Not Assigned","Parent":"Test ing","CompanyName":"Test "}]"
WebDataGrid
<ig:WebDataGrid ID="gvCompany" runat="server" DataKeyFields="idCompany,strCompanyName" AutoGenerateColumns ="false"
StyleSetName="Pear" Width="100%" Height="425px">
<ClientEvents Initialize="WebDataGrid1_Grid_Initialize" />
<Behaviors>
<ig:Paging PageSize="20">
</ig:Paging>
<ig:Filtering Alignment="Top" FilterRuleDropDownItemCssClass="FilterItems" Visibility="Visible"
Enabled="true" AnimationEnabled="true" />
</Behaviors>
<EmptyRowsTemplate>
No Companies Found</EmptyRowsTemplate>
<ig:BoundDataField DataFieldName="CompanyName" Key="CompanyName" Width="20%">
<Header CssClass="Header" Text="Facility Name" />
</ig:BoundDataField>
<ig:BoundDataField DataFieldName="strCompanyName" Key="strCompnayName" Width="20%">
<Header CssClass="Header" Text="Company NAme" />
<ig:TemplateDataField Key="actions" Header-Text="Actions" Width="190px">
<ItemTemplate>
<table width="100%">
<tr>
<td>
<asp:LinkButton ID="lkEdit" runat="server" Text=" | Edit" CausesValidation="false"
CommandName="EditCompany" CommandArgument='<% # Eval("idCompany") %>' ></asp:LinkButton>
</td>
<asp:LinkButton ID="lkDelete" runat="server" Text=" | Delete" CausesValidation="false"
CommandArgument='<% # Eval("idCompany") %>' CommandName="DeleteCompany"
></asp:LinkButton>
</tr>
</table>
</ItemTemplate>
<Header Text="Actions" />
</ig:TemplateDataField>
</ig:WebDataGrid>
Thanks in Advance
I was unable to reproduce this issue. However, I would suggest that you try setting the data source like this :
In order to be able to investigate this issue further, I would need a small sample project, replicating the behavior you have described. I am attaching my sample, replicating your scenario.
Please let me know if you have any questions.