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.