I have a grid that has a description and 4 value columns. There are only 6 rows of records for this grid. In the first 4 rows, all 4 values are used with a label name. In the last two rows, only the 1rst value is used with a different label name. My question is If you click on one of the first 4 rows, I want the RowEditTemplate to display the labels and textboxes for editing all 4 columns, if one of the last two rows are clicked, I want to display only the labels & textboxes for editing the first column. Can I have more than one RowEditTemplate and, if so, how do I determine which one to use for the row clicked. If not, is there a way to do this, like if row 1-4 is clicked show such-and-such labels and textboxes, and if row 5-6 is clicked show only those labels and textboxes? This is a program requirement that I was able to do with a different third-party grid control in the past, but don't know how to do this with the UltraWebGrid. Thanks much for anyone who can help with this.
Hi dbishop9,
Thank you for posting in the community.
In this scenario I would suggest hiding/showing the relevant elements inside your row editing template in the BeforeRowTemplateOpen client-side handler. For instance here is some sample code which would hide the first textbox in a (default) edit template for all even indexed rows:
function UltraWebGrid1_BeforeRowTemplateOpenHandler(gridName, rowId, templateId) { if (igtbl_getRowById(rowId).getIndex() % 2 == 0) { igtbl_getElementById(templateId).children[0].children[0].style.display = "none"; } else { igtbl_getElementById(templateId).children[0].children[0].style.display = ""; } }
if (igtbl_getRowById(rowId).getIndex() % 2 == 0) { igtbl_getElementById(templateId).children[0].children[0].style.display = "none"; } else { igtbl_getElementById(templateId).children[0].children[0].style.display = ""; } }
This assumes that the created by default row edit template is used:
<RowEditTemplate > <p align="right"> ProductID <input id="igtbl_TextBox_0_0" columnkey="ProductID" style="width: 150px;" type="text"> <br> ProductName <input id="igtbl_TextBox_0_1" columnkey="ProductName" style="width: 150px;" type="text"> <br> SupplierID <input id="igtbl_TextBox_0_2" columnkey="SupplierID" style="width: 150px;" type="text"> <br> CategoryID <input id="igtbl_TextBox_0_3" columnkey="CategoryID" style="width: 150px;" type="text"> <br> </br> </input> </br> </input> </br> </input> </br> </input> </p> <br> <p align="center"> <input id="igtbl_reOkBtn" onclick="igtbl_gRowEditButtonClick(event);" style="width: 50px;" type="button" value="OK"> <input id="igtbl_reCancelBtn" onclick="igtbl_gRowEditButtonClick(event);" style="width: 50px;" type="button" value="Cancel"> </input> </input> </p> </br> </RowEditTemplate>
Please let me know if this helps.
I'm not having much luck since I am not using basic input controls. This is my RowEditTemplate. I am using a table with labels and textboxes. If I select a specific row in the grid (4 or 5), I need to hide the controls(or rows) for Value2, Value3, & Value4, but leave the Value1 controls(or row) visible, and change the Value1 description label text.
<RowEditTemplate > <div id="divControls" style="background-color: #E5ECFD;"> <p align="left" style="padding: 2px 2px 2px 2px; border-color: Lightgray; border-width: 1px; border-style: solid;"> <asp:Table ID="tblControls" runat="server"> <asp:TableRow> <asp:TableCell Width="85px"> <asp:Label ID="lblID" runat="server" Visible="false">ID</asp:Label> </asp:TableCell> <asp:TableCell> <asp:TextBox ID="txtID" runat="server" Enabled="false" ToolTip="ID" columnkey="ID" BorderStyle="none" BackColor="#E5ECFD" ForeColor="#E5ECFD" Font-Size="0"></asp:TextBox> </asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Width="155px"> <asp:Label ID="lblValue1" runat="server" >Not Eligible For Renewal</asp:Label> </asp:TableCell> <asp:TableCell> <asp:TextBox ID="txtValue1" runat="server" ToolTip="Not Eligible For Renewal" Width="85px" columnkey="VALUE1"></asp:TextBox> </asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Width="155px"> <asp:Label ID="lblValue2" runat="server">Voluntary Termination</asp:Label> </asp:TableCell> <asp:TableCell> <asp:TextBox ID="txtValue2" runat="server" ToolTip="Voluntary Termination" Width="85px" columnkey="VALUE2"></asp:TextBox> </asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Width="155px"> <asp:Label ID="lblValue3" runat="server">Involuntary Termination</asp:Label> </asp:TableCell> <asp:TableCell> <asp:TextBox ID="txtValue3" runat="server" ToolTip="Involuntary Termination" Width="85px" columnkey="VALUE3"></asp:TextBox> </asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Width="155px"> <asp:Label ID="lblValue4" runat="server">Pct Renewed On Time</asp:Label> </asp:TableCell> <asp:TableCell> <asp:TextBox ID="txtValue4" runat="server" ToolTip="Pct Renewed On Time" Width="85px" columnkey="VALUE4"></asp:TextBox> </asp:TableCell> </asp:TableRow> </asp:Table> </p> <p align="center" style="background-color: #D5DDEA; vertical-align: middle; padding: 2px 2px 0px 2px; border-color: Gray; border-width: 1px; border-style: solid;"> <asp:ImageButton ID="ibtnOK" runat="server" ImageUrl="~/Images/oknew.png" OnClick="ibtnOK_Click" /> <asp:ImageButton ID="ibtnCancel" runat="server" ImageUrl="~/Images/cancelnew.png" /> </p> </div></RowEditTemplate>