[Solved] Show hide row inside edit template of a RADGrid

[Sabyasachi Dechaudhari]

Hi,
  I have rad grid with an edit template.
  The edit temlate has a table.
  The second row of this table had a RadComboBox.
  Based on the value in this combobox, I need to show or hide the next row. (e.g. If its a mobile chosen in the first dropdown, I want to show a dropdown for various mobile companies, however if the user choses houses, the company drop down should go away).
  It would be preferable to show or hide this row using javascript rather than an ajax postback.

[Shinu]

Hello Sabyasachi,

Attach OnClientLoad event to the second combobox and thus get reference to it by using the first parameter which is 'sender'. Now youcan easily set the visibility of this dropdown in 'OnClientSelectedIndexChanged' event handler. Use the set_visible() method for setting the visibility from client side. Here is an example.

aspx:

    <EditItemTemplate>
        <table>
            <tr>
                <td>
                    <telerik:RadComboBox OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"
                        ID="RadComboBox2" runat="server">
                        <Items>
                            <telerik:RadComboBoxItem Text="Mobiles" />
                            <telerik:RadComboBoxItem Text="Houses" />
                        </Items>
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td>
                    <telerik:RadComboBox OnClientLoad="OnClientLoad" ID="mobileCombo" runat="server">
                    </telerik:RadComboBox>
                </td>
            </tr>
        </table>
    </EditItemTemplate>

javascript:

    var MobCombo;
    function OnClientLoad(sender, args) {
        MobCombo = sender; // get refrence to combo
    }
    function OnClientSelectedIndexChanged(sender, args) {
        var text = args.get_item().get_text(); // Get the text
        if (text == "Mobiles") {
            MobCombo.set_visible(false);  // Hide the combo
        }
    }

Best wishes,
Shinu.

[Sabyasachi Dechaudhari]

Thanks for the idea of using the on client load. This however hides only the Combobox and not the entire <tr> ...</tr>... Is there  a clean way of doing it ...

Also, I need to set the visibility of the tr from the grdProductGroup_ItemDataBound when the record is selected for editing.
Currently,
in my grdPG_ItemDataBound for Edit Item

if

 

(((PG)item.DataItem).ProductGroupType == "mobile")

 

{

 

 

HtmlTableRow tr = (HtmlTableRow)item.FindControl("trMobile");

 

tr.Style.Clear();

tr.Style.Add(

 

HtmlTextWriterStyle.Display, "");

 

}

& in my aspx page

 

<tr>
<td align="right">
<asp:Label ID="Label3" runat="server" CssClass="label"
Text=" Product Type:"></asp:Label><span
class="requiredFieldIndicator">*</span>
</td>
<td align="left" colspan="3">
<telerik:RadComboBox ID="cboPG" runat="server" Skin="Vista" MarkFirstMatch="True"
AppendDataBoundItems="true" AutoPostBack="false"
OnClientSelectedIndexChanged = "ShowHidetrMobile" Font-Names="Verdana"
Font-Size="8" >
</telerik:RadComboBox>
</td>
</tr>
<tr id="trMobile" style="display:none" runat="server" >
<td align="right">
<asp:Label ID="Label1" runat="server" CssClass="label"
Text="Mobile Company:"></asp:Label><span
class="requiredFieldIndicator">*</span>
</td>
<td align="left" colspan="3">
<telerik:RadComboBox ID="cboMobileCompany" runat="server" Skin="Vista" MarkFirstMatch="True"
AppendDataBoundItems="true" AutoPostBack="false"
Font-Names="Verdana"
Font-Size="8" >
</telerik:RadComboBox>
</td>
</tr>

all fine till here...
But how do i get the client Id of the TR in the javascript
Here is my Javascript

function ShowHidetrMobile(obj,args)
{
if (obj._text=="Mobile")
    $get("ctl00_ContentPlaceHolder1_grdProductGroup_ctl00_ctl05_trMobile").style.display="";  //Although i dont like this way
else
    $get("ctl00_ContentPlaceHolder1_grdProductGroup_ctl00_ctl05_trMobile").style.display="none";
}

 

 

 

[Sabyasachi Dechaudhari]

Any solution for the above mentioned problem that i am facing