I'm trying to add new rows to a webdatagrid in client side. In the grid I do have several TemplateDataField columns with textboxes and labels. I need to add values to those textboxes/labels rather than directly adding it to grid. (I tried to use RowRendering and DataBinding client side events, but neither of them got called after adding new row). Here are my markup and client side functions.
<Infragistics:WebDataGrid ID="gvBarCode" runat="server" AutoGenerateColumns="false" Width="100%" Height="300"> <Columns> <Infragistics:TemplateDataField Key="UnitNoDoorNo" Header-Text="" Width="20%"> <Header Text="Unit/Door"></Header> <ItemTemplate> <asp:Label ID="lblUnitDoorNo" runat="server" Text='<%#Eval("UnitNoDoorNo") %>'></asp:Label> </ItemTemplate> </Infragistics:TemplateDataField> <Infragistics:TemplateDataField Key="ClientRefNo" Width="20%"> <Header Text="Reference"></Header> <ItemTemplate> <asp:Label ID="lblClientRefNo" runat="server" Text='<%# Eval("ClientRefNo") %>'></asp:Label> </ItemTemplate> </Infragistics:TemplateDataField> <Infragistics:TemplateDataField Key="Amount" Width="20%"> <Header Text="Amount"></Header> <ItemTemplate> <Infragistics:WebCurrencyEditor ID="txtAmount" runat="server" Value='<%# Eval("Amount") %>' Width="120" CssClass="selectAmount" data-Amount="selectAmount" ToolTip=""> <ClientEvents ValueChanged="calculateTotal" /> </Infragistics:WebCurrencyEditor> </ItemTemplate> </Infragistics:TemplateDataField> <Infragistics:TemplateDataField Key="Action" Width="20%"> <ItemTemplate> <asp:ImageButton ID="imgbtnDelete" runat="server" CommandName="Delete" ImageUrl="../common/images/delete.gif" ToolTip="Delete" OnClientClick="return confirm('Are you sure you want to delete this record?.')" /> </ItemTemplate> </Infragistics:TemplateDataField> </Columns> <Behaviors> <Infragistics:EditingCore AutoCRUD="False" BatchUpdating="true"> <Behaviors> <Infragistics:RowAdding> </Infragistics:RowAdding> </Behaviors> </Infragistics:EditingCore> </Behaviors> <ClientEvents DataBinding="gvBarCode_DataBinding" RowRendering="gvBarCode_RowRendering" /> </Infragistics:WebDataGrid>
function AddNewGridRow(clientRefNo, amount, propertyId, unitNoDoorNo) {
var oGrid = ig_controls.<%=gvBarCode.ClientID%>; var row = new Array(unitNoDoorNo, clientRefNo, amount); oGrid.get_rows().add(row);
}
function gvBarCode_DataBinding(webDataGrid, evntArgs) {
//var a = evntArgs;
function gvBarCode_RowRendering(webDataGrid, evntArgs) {
Hello,
Thank you for contacting us.
You can use the client events which are provided by the editingCore behavior. There you can find client event for cell and row editing, adding and deleting and also for the Batch Updating feature.
Code snippet:
<Behaviors> <ig:ColumnFixing FixLocation="Right"> </ig:ColumnFixing> <ig:EditingCore> <EditingClientEvents RowAdded="WebDataGrid1_Editing_RowAdded" /> <Behaviors> <ig:RowAdding></ig:RowAdding> </Behaviors> </ig:EditingCore> </Behaviors>
Let me know if I may be of further assistance.
Thanks for quick reply. Can you please help me with one more thing. how can i add values to textboxes inside new row? (something like findControl in server side)
You can set static id to the textbox and use jQuery in order to find it within the cell.
$(ig_controls.WebDataGrid1.get_rows().get_row(0).get_cellByColumnKey("Freight").get_element()).find("#tbInput")
.....
<ig:TemplateDataField Key="Freight" VisibleIndex="1"> <Header Text="Redirect"> </Header> <ItemTemplate>
<asp:TextBox runat="server" ID="tbInput" Text='<%# Eval("OrderID") %>' ClientIDMode="Static"></asp:TextBox>
this solution seems working only if we need to change value of textbox already rendered from server side. $(ig_controls.WebDataGrid1.get_rows().get_row(0) returns null when i try to add a row for the first time. what i'm looking for is rendering TemplateDataField in client side. is that possible with infragistics?
Unfortunately currently it is not possible, you will need to wait until the new row is rendered and then to get or set the values from any control within the TemplateField.