Show/hide column based on ComboBox selection

[Sonia Alvarado]

Hello,
Hopefully someone can help me.  I have a RadComboBox inside an EditItemTemplate.  When in Edit mode, I need to display a date column when the users select a specific item in the combo box.  I need the code on how to do this in Javascript.  Thanks in advance for any help.

Sonia

 

<telerik:GridTemplateColumn HeaderText="Agenda Status" UniqueName="Agenda Status">
<EditItemTemplate>
<telerik:RadComboBox ID="RadComboBox1" Height="200px" runat="server" Skin="WebBlue" 
  DataTextField="description" DataValueField="description" DataSourceID="SqlDataSource3"  
  SelectedValue='<%# Bind("AgendaStatus") %>'>
</telerik:RadComboBox>
</EditItemTemplate>
<ItemTemplate>
<%#Eval("AgendaStatus") %>
</ItemTemplate>
</telerik:GridTemplateColumn>

 

[Princy]

Hello Sonia,

Try the client side code for hiding the column of RadGrid according to the selected item in RadComboBox whixh is placed inside EditItemTemplate.

ASPX:

<telerik:GridTemplateColumn HeaderText="Action" UniqueName="TemplateColumn" >
   <EditItemTemplate>
       <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">
           <Items>
                <telerik:RadComboBoxItem Text="Hide Column" />
                <telerik:RadComboBoxItem Text="Show Column" />
           </Items>
       </telerik:RadComboBox>
   </EditItemTemplate>
</telerik:GridTemplateColumn>

JavaScript:

<script type="text/javascript">
function OnClientSelectedIndexChanged(sender, args)
{
    var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
    var column = masterTable.getColumnByUniqueName("Description");
    if(sender.get_text()== 'Hide Column')
    {

        masterTable.hideColumn(column.get_element().cellIndex);
    }
    else
    {
        masterTable.showColumn(column.get_element().cellIndex);
    }
}
</script>

Thanks,
Princy.

[Sonia Alvarado]

Hello Princy,

Thank you for the reply.  I tried the code and it kinda works but it's doing something weird.  When I choose an option that will hide the column I want to hide it works but then if I change the option again to something that will also hide the column, the rest of the columns start shifting to either the left or the right and eventually (after choosing different options from the combo box) all my other fields are NOT visible.  I don't know if it's because it's shifting or what it's doing.  Thank you for your time.

ASPX (Column I want to hide is Date):

<telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Left" UniqueName="Date">
    <EditItemTemplate>
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server"
            DbSelectedDate='<%# Bind("HFFMdate") is DBNull ?null:Bind("HFFMdate") %>'
            MinDate="2008/1/1" Skin="WebBlue" Width="100Px">
        </telerik:RadDatePicker>
    </EditItemTemplate>
    <ItemTemplate>
        <%#Eval("HFFMdate") %>
    </ItemTemplate>
    <HeaderStyle Width="10%" />
</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Comments" HeaderText="Comments"
    SortExpression="Comments" UniqueName="Comments">
    <HeaderStyle HorizontalAlign="Center" Width="40%" />
    <ItemStyle HorizontalAlign="Center" Width="400px" />
</telerik:GridBoundColumn>

<telerik:GridEditCommandColumn ButtonType="ImageButton"
    EditImageUrl="~/Images/Edit.png" ItemStyle-HorizontalAlign="Right"
    UniqueName="EditCommandColumn">
</telerik:GridEditCommandColumn>

 
javascript:

        function OnClientSelectedIndexChanged(sender, args) {
            var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
            var dateCol = masterTable.getColumnByUniqueName("Date");
            if (sender.get_text() == 'Approved' || sender.get_text() == 'Failed' || sender.get_text() == 'In Progress') {

                masterTable.hideColumn(dateCol.get_element().cellIndex);

            }
            else {

                masterTable.showColumn(dateCol.get_element().cellIndex);
            }
        }

 

 

Sonia