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.
Peter, this still isn't working. Below is my content pane with the script in the head and my table. This is displayed in a masterpage. I have to be missing something, I just don't know what it would be. Please take a look and see if you see anything.
<asp:Content ID="Content1" runat="Server" ContentPlaceHolderID="ContentPlaceHolder1"> <head> <title>Processers</title>
<script type="text/javascript" language="javascript"> function igGrid_BeforeRowTemplateOpenHandler(gridName, rowId, templateId){ if (igtbl_getRowById(rowId).getIndex() == 4){ igtbl_getElementById(templateId).children["divGridControls"].children["tblGridControls"].rows[1].cells[0].children["lblValue1"].text = "New Text"; igtbl_getElementById(templateId).children["divGridControls"].children["tblGridControls"].rows[2].style.display = "none"; igtbl_getElementById(templateId).children["divGridControls"].children["tblGridControls"].rows[3].style.display = "none"; igtbl_getElementById(templateId).children["divGridControls"].children["tblGridControls"].rows[4].style.display = "none"; } else if (igtbl_getRowById(rowId).getIndex() == 5) { igtbl_getElementById(templateId).children["divGridControls"].children["tblGridControls"].rows[1].cells[0].children["lblValue1"].text = "Old Text"; igtbl_getElementById(templateId).children["divGridControls"].children["tblGridControls"].rows[2].style.display = ""; igtbl_getElementById(templateId).children["divGridControls"].children["tblGridControls"].rows[3].style.display = ""; igtbl_getElementById(templateId).children["divGridControls"].children["tblGridControls"].rows[4].style.display = ""; } } </script> </head>
<igtbl:UltraWebGrid ID="igGrid" runat="server" DisplayLayout-AutoGenerateColumns="false" EnableAppStyling="True" StyleSetName="Office2007Blue" StyleSetPath="~/ig_res/" DisplayLayout-CellPaddingDefault="5" DisplayLayout-AllowSortingDefault="No"> <Bands> <igtbl:UltraGridBand> <Columns> <igtbl:UltraGridColumn BaseColumnName="ID" Key="ID" Hidden="true"> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="PROCESSER" Key="PROCESSER" Hidden="true" > <Header Caption="Processer"> <RowLayoutColumnInfo OriginX="2" /> </Header> <HeaderStyle HorizontalAlign="Left" /> <CellStyle HorizontalAlign="Left" /> <Footer> <RowLayoutColumnInfo OriginX="2" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="MEASURE" Key="MEASURE"> <Header Caption="Measure"> <RowLayoutColumnInfo OriginX="3" /> </Header> <HeaderStyle HorizontalAlign="Left" /> <CellStyle HorizontalAlign="Left" /> <Footer> <RowLayoutColumnInfo OriginX="3" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="GOAL" Key="GOAL"> <Header Caption="Goal"> <RowLayoutColumnInfo OriginX="4" /> </Header> <HeaderStyle HorizontalAlign="Center" /> <CellStyle HorizontalAlign="Center" /> <Footer> <RowLayoutColumnInfo OriginX="4" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="VALUE1" Key="VALUE1"> <Header Caption="Value1"> <RowLayoutColumnInfo OriginX="5" /> </Header> <HeaderStyle HorizontalAlign="Left" /> <CellStyle HorizontalAlign="Left" /> <Footer> <RowLayoutColumnInfo OriginX="5" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="VALUE2" Key="VALUE2"> <Header Caption="Value2"> <RowLayoutColumnInfo OriginX="6" /> </Header> <HeaderStyle HorizontalAlign="Left" /> <CellStyle HorizontalAlign="Left" /> <Footer> <RowLayoutColumnInfo OriginX="6" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="VALUE3" Key="VALUE3"> <Header Caption="Value3"> <RowLayoutColumnInfo OriginX="7" /> </Header> <HeaderStyle HorizontalAlign="Left" /> <CellStyle HorizontalAlign="Left" /> <Footer> <RowLayoutColumnInfo OriginX="7" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="VALUE4" Key="VALUE4"> <Header Caption="Value4"> <RowLayoutColumnInfo OriginX="8" /> </Header> <HeaderStyle HorizontalAlign="Left" /> <CellStyle HorizontalAlign="Left" /> <Footer> <RowLayoutColumnInfo OriginX="8" /> </Footer> </igtbl:UltraGridColumn> </Columns> <RowEditTemplate > <div id="divGridControls" style="background-color: #E5ECFD;"> <p align="left" style="padding: 2px 2px 2px 2px; border-color: Lightgray; border-width: 1px; border-style: solid;"> </p> <asp:Table ID="tblGridControls" runat="server" ClientIDMode="Static" > <asp:TableRow> <asp:TableCell Width="85px"> <asp:Label ID="lblGridID" runat="server" Visible="false">ID</asp:Label> </asp:TableCell> <asp:TableCell> <asp:TextBox ID="txtGridID" 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" ClientIDMode="Static" >Value1</asp:Label> </asp:TableCell> <asp:TableCell> <asp:TextBox ID="txtValue1" runat="server" ClientIDMode="Static" ToolTip="Value1" Width="85px" columnkey="VALUE1"></asp:TextBox> </asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Width="155px"> <asp:Label ID="lblValue2" runat="server">Value2</asp:Label> </asp:TableCell> <asp:TableCell> <asp:TextBox ID="txtValue2" runat="server" ToolTip="Value2" Width="85px" columnkey="VALUE2"></asp:TextBox> </asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Width="155px"> <asp:Label ID="lblValue3" runat="server">Value3</asp:Label> </asp:TableCell> <asp:TableCell> <asp:TextBox ID="txtValue3" runat="server" ToolTip="Value3" Width="85px" columnkey="VALUE3"></asp:TextBox> </asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Width="155px"> <asp:Label ID="lblValue4" runat="server">Value4</asp:Label> </asp:TableCell> <asp:TableCell> <asp:TextBox ID="txtValue4" runat="server" ToolTip="Value4" Width="85px" columnkey="VALUE4"></asp:TextBox> </asp:TableCell> </asp:TableRow> </asp:Table> <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="ibtnGridOK" runat="server" ImageUrl="~/Images/oknew.png" OnClick="ibtnGridOK_Click" /> <asp:ImageButton ID="ibtnGridCancel" runat="server" ImageUrl="~/Images/cancelnew.png" /> </p> </div> </RowEditTemplate> <RowTemplateStyle Wrap="true" > </RowTemplateStyle> <AddNewRow View="NotSet" Visible="NotSet"> </AddNewRow> </igtbl:UltraGridBand> </Bands> <DisplayLayout Name="igGrid" AllowDeleteDefault="No" AllowSortingDefault="No" AllowUpdateDefault="RowTemplateOnly" BorderCollapseDefault="Separate" CellPaddingDefault="5" AutoGenerateColumns="false" RowSelectorsDefault="Yes" RowHeightDefault="20px" AllowAddNewDefault="No" NoDataMessage="No Measures to Display" Version="4.00" CellClickActionDefault="Edit" SelectTypeRowDefault="Single" EnableProgressIndicator="true"> <FrameStyle> </FrameStyle> <ActivationObject BorderColor="" BorderWidth=""> </ActivationObject> </DisplayLayout></igtbl:UltraWebGrid>
</asp:Content>
Hi dbishop9,
Here is a similar apporach for accessing and modifying your row edit template on the fly:
function UltraWebGrid1_BeforeRowTemplateOpenHandler(gridName, rowId, templateId) { if (igtbl_getRowById(rowId).getIndex() % 2 == 0) { igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[1].cells[0].children["lblValue1"].text = "New Text"; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[2].style.display = "none"; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[3].style.display = "none"; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[4].style.display = "none"; } else { igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[1].cells[0].children["lblValue1"].text = "Old Text"; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[2].style.display = ""; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[3].style.display = ""; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[4].style.display = ""; } }
function UltraWebGrid1_BeforeRowTemplateOpenHandler(gridName, rowId, templateId) {
if (igtbl_getRowById(rowId).getIndex() % 2 == 0) { igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[1].cells[0].children["lblValue1"].text = "New Text"; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[2].style.display = "none"; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[3].style.display = "none"; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[4].style.display = "none"; } else { igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[1].cells[0].children["lblValue1"].text = "Old Text"; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[2].style.display = ""; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[3].style.display = ""; igtbl_getElementById(templateId).children["divControls"].children["tblControls"].rows[4].style.display = ""; } }
Please let me know if this helps.
Thanks, Peter. I'm not showing a ClientIDMode property for the table or any of the controls.
Thank you for your reply.
As you are using asp controls in your row edit template, perhaps the most straightforward approach would be to set the ClientIDMode of your table and relevant Label,TextBox etc elements to Static. This way in the BeforeRowTemplateOpenHandler you would be able to access the elements directly and set their visibility. For instance you could hide the second row in your asp table using:
$get("tblControls").rows[1].style.display = "none";
Similarly, if for example you want to change the text of your first Label - lblValue1, you could do this using something similar to:
$get("lblValue1").text = "New Text";
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>