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>
Thanks, Peter. I'm not showing a ClientIDMode property for the table or any of the controls.
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 = ""; } }
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>
Thank you for the sample code.
I have tested your setup in a content page of a master page and the javascript function seems to be operating as expected. Please note that in the moment you are reverting the the "initial" row edit template only after editing the row with index 5. Apart from that the elements in your template seem to accessed and modified correctly. Can you confirm for me that igtbl_getElementById(templateId) is returning the template ?
After more thought on the matter I can offer you a perhaps more straightforward approach - instead of accessing and modifying individual elements in your template, have a second main div in the template which contains its "modified" version for your 4th row. Then on the BeforeRowTemplateOpenHandler you can choose which div to display to the user.
<RowEditTemplate > <div id="divGridControls" > ........ </div> <div id="modifiedTemplateView" > </div> </RowEditTemplate>
<RowEditTemplate > <div id="divGridControls" >
........
</div>
<div id="modifiedTemplateView" >
</RowEditTemplate>
Please let me know if you have any questions.
Hi Peter, thanks much. I'm not having any luck hiding the appropriate div though. Below is my javascript.
function igStop031_BeforeRowTemplateOpenHandler(gridName, rowId, templateId) { if (igtbl_getRowById(rowId).getIndex() == 4) { igtbl_getElementById(templateId).children["divGridControls_A"].style.dipslay='none'; igtbl_getElementById(templateId).children["divGridControls_B"].style.dipslay=''; } else if (igtbl_getRowById(rowId).getIndex() == 5){ igtbl_getElementById(templateId).children["divGridControls_A"].style.dipslay='none'; igtbl_getElementById(templateId).children["divGridControls_B"].style.dipslay=''; } }
Thank you for your replies and for sharing your solution. Please feel free to contact me if you have any further questions.
Last followup. I have resolved the issue on my own. While this may not be the "best" way to do it, it is the only one so far that works for me. What I did was, in the BeforeRowTemplateOpenHandler, just before I assign the cell's date value to the WebDateChooser, I manually format the UTC date by using a bit of free javascript from the following link rather than spending time building my own formatting function.(I don't know if it's okay to include an outside link or not).
http://blog.stevenlevithan.com/archives/date-time-format
So my code is now as follows:
function igMyGrid_BeforeRowTemplateOpenHandler(gridName, rowId, templateId) { var row = igtbl_getRowById(rowId); var currentValDueDate = row.getCell(1).getValue(); var currentValueCompletedDate = row.getCell(6).getValue(); currentValDueDate = dateFormat(currentValDueDate, "mm/dd/yyyy"); currentValueCompletedDate = dateFormat(currentValueCompletedDate, "mm/dd/yyyy"); dateChooserDueDate.value = currentValDueDate; dateChooserDueDate.inputBox.value = currentValDueDate; dateChooserCompletedDate.value = currentValueCompletedDate; dateChooserCompletedDate.inputBox.value = currentValueCompletedDate;}
function igMyGridDueDate_InitializeDateChooser(oDateChooser) { dateChooserDueDate = oDateChooser;}function igMyGridCompletedDate_InitializeDateChooser(oDateChooser) { dateChooserCompletedDate = oDateChooser;
}
This now makes the WebDateChooser display the initial date value as 02/01/2012, as it is supposed to. Again, I'm still not sure what I have set/notset that was causing the previous methods to fail, but this overrides that and gives me the expected result I need, my project can continue now.
Hi Petar, another followup. I didn't know I had to specifically register the client-side events. I've never had to do that in other controls. Now that I've done that, the events are firing just fine. I still can't get the display format to be correct. The edit format is fine, and once you select a date, the format is fine, but that initial value is not displayed correctly. I have the control set to "d" and I've tried setting it in the server-side initalization of the row and the control itself, with no luck. How can I set it client-side?
This is a followup. I am able to debug javascript, however, NONE of the infragistics javascript is firing. If I create my own function for an input button like
alert(
"hi this is a test");
It fires and debugs. But my Infragistics scripts don't. such as
function igMyGrid_BeforeRowTemplateOpenHandler(gridName, rowId, templateId) {
"hi_BeforeRowTemplateOpenHandler");
var row = igtbl_getRowById(rowId);
var currentVal = row.getCell(2).getValue();
dateChooser.value = currentVal;
dateChooser.inputBox.value = currentVal;
var dateChooser = null;
function igMyGridDueDate_InitializeDateChooser(oDateChooser) {
//Add code to handle your event here.
"hi_InitializeDateChooser");
dateChooser = oDateChooser;
These do not fire! Is there some setting in the grid or otherwise to enable them to work? I don't see any mis-spellings in the naming. But I can't figure out what would keep them from firing.
Thanks, Petar. Apparently, the javascript isn't firing. I have set IE8 to allow debugging javascript, change the config mgr to Debug in VS2008. I put a debugger; call in the function, as well as alert('something here');, but neither will fire. I'm not used todebugging javascript in the IDE, so I may not have something still set right to debug it. But even so, the alert() call should fire, so I don't think my javascript is firing. Below is the script. I have to get this working and I'm not sure if VS2008 is even allowing me to debug the javascript. Is there a step to turning on javascript debugging Ive missed?
<script type="text/javascript">function igStop031_BeforeRowTemplateOpenHandler(gridName, rowId, templateId) { if (igtbl_getRowById(rowId).getIndex() < 4){igtbl_getElementById(templateId).children["divStop031Controls_A"].style.setAttribute('display','');igtbl_getElementById(templateId).children["divStop031Controls_B"].style.setAttribute('display','none');}else if (igtbl_getRowById(rowId).getIndex() == 4) {igtbl_getElementById(templateId).children["divStop031Controls_A"].style.setAttribute('display','none');igtbl_getElementById(templateId).children["divStop031Controls_B"].style.setAttribute('display','');} else if (igtbl_getRowById(rowId).getIndex() == 5){ igtbl_getElementById(templateId).children["divStop031Controls_A"].style.setAttribute('display','none');igtbl_getElementById(templateId).children["divStop031Controls_B"].style.setAttribute('display','');} } </script>