Working with Telerik RadGrid

I have a Rad combo box and a 2 RadGrids - grvUser and grvRole

grvUser RadGrid is as follows...

<telerik:RadGrid ID="grvUser" runat="server" EnableEmbeddedSkins="False"  Skin="skn_RadGrid" SkinsDir="|CurrentTheme|/" SkinsPath="|CurrentTheme|/"
            OnItemCreated="grvUser_ItemCreated" OnItemCommand="grvUser_ItemCommand" OnItemDataBound="grvUser_ItemDataBound" OnNeedDataSource="grvUser_NeedDataSource" GroupHeaderItemStyle-CssClass="rgGroupPanel">
            <MasterTableView TableLayout="Fixed" OverrideDataSourceControlSorting="true" NoMasterRecordsText ="No Records Found, Please Refine Search To Display "> 
                <Columns>
                    <telerik:GridBoundColumn FilterControlAltText="Filter column column" DataField="UserId"
                        UniqueName="UserId" HeaderText="User Id" HeaderStyle-Width="120px" FilterControlWidth="70px"
                        AutoPostBackOnFilter="true">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterControlAltText="Filter column column" DataField="UserName" AllowFiltering="true" ShowFilterIcon="true"
                        UniqueName="UserName" HeaderText="User Name" HeaderStyle-Width="120px" FilterControlWidth="70px"
                        AutoPostBackOnFilter="true">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            </telerik:RadGrid>

grvRole RadGrid is as follows...

<telerik:RadGrid ID="grvRole" runat="server" EnableEmbeddedSkins="False"  Skin="skn_RadGrid" SkinsDir="|CurrentTheme|/" SkinsPath="|CurrentTheme|/"
            OnItemCreated="grvRole_ItemCreated" OnItemCommand="grvRole_ItemCommand" OnItemDataBound="grvRole_ItemDataBound" OnNeedDataSource="grvRole_NeedDataSource" GroupHeaderItemStyle-CssClass="rgGroupPanel">
            <MasterTableView TableLayout="Fixed" OverrideDataSourceControlSorting="true" NoMasterRecordsText ="No Records Found, Please Refine Search To Display "> 
                <Columns>
                    <telerik:GridBoundColumn FilterControlAltText="Filter column column" DataField="RoleId"
                        UniqueName="RoleId" HeaderText="Role Id" HeaderStyle-Width="120px" FilterControlWidth="70px"
                        AutoPostBackOnFilter="true">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterControlAltText="Filter column column" DataField="RoleName" AllowFiltering="true" ShowFilterIcon="true"
                        UniqueName="RoleName" HeaderText="Role Name" HeaderStyle-Width="120px" FilterControlWidth="70px"
                        AutoPostBackOnFilter="true">
                    </telerik:GridBoundColumn>
                </Columns>
             </MasterTableView>
            </telerik:RadGrid>

Code for RadComboBox is as follows...

<telerik:RadComboBox ID="ddlType" runat="server" DataValueField="Description"
                        DataTextField="Description" Text="(Select)" AllowCustomText="True" Width="200px"
                        OnClientDropDownClosed="onDropDownClosing1"  Skin="Default">
                        <ItemTemplate>
                            <div onclick="StopPropagation(event)" class="combo-item-template" onmousemove="">
                                <asp:CheckBox runat="server" ID="chk1" onclick="onStatusChecked(this)" />
                                <asp:Label runat="server" ID="Label1" AssociatedControlID="chk1">
                              <%# Eval("Description")%>
                                </asp:Label>
                            </div>
                        </ItemTemplate>
                        <HeaderTemplate>
                            <asp:CheckBox ID="ChckAll" Text="(Check All)" runat="server" OnClick="checkAllStatus(this)" />
                        </HeaderTemplate>
                    </telerik:RadComboBox>

The ddlType RadComboBox contains 2 values. 1 is User and 2 is Role. By default "User" is selected and such that grvUser will be displayed. If the user selects Role, then we need to display grvRole defined in the aspx page.

How can I fire onchange event for RadComboBox and display proper RadGrid either User or Role?

UPDATE

Implementation in jQuery is Ok for me.

Solution

Whatever is well conceived is clearly said, And the words to say it flow with ease.

How to: Show / hide control based on a RadComboBox Value ?

First let's declare a simple RadComboBox with 3 In-line Items :

<telerik:RadComboBox ID="RadComboBox1" runat="server" >
    <Items>   
        <telerik:RadComboBoxItem runat="server" Text="ALL" />   
        <telerik:RadComboBoxItem runat="server" Text="grvUser" />   
        <telerik:RadComboBoxItem runat="server" Text="grvRole" /> 
    </Items>
</telerik:RadComboBox>

1/. We now need an event that will be fire every time user choose a "Value".

OnSelectedIndexChanged Will do the trick.
As You talk about a jQuery implementation, here is the documentation RadComboBox event :

NOTE: The SelectedIndexChanged , TextChanged and OnCheckAllCheck events do not fire unless you set the AutoPostBack property to True .

2/.Add the correct event, and some label.

<telerik:RadComboBox ID="RadComboBox1" runat="server" autopostback="True"
                     OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"  >
    <Items>   
        <telerik:RadComboBoxItem runat="server" Text="ALL" />   
        <telerik:RadComboBoxItem runat="server" Text="grvUser" />   
        <telerik:RadComboBoxItem runat="server" Text="grvRole" /> 
    </Items>
</telerik:RadComboBox>
<asp:Label ID="Label1" runat="server" Text="My Control 1(grvUser)" />
<asp:Label ID="Label2" runat="server" Text="My Control 2(grvRole)" />

3/. Lets hide them in code behind

protected void RadComboBox1_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
    if (e.Text=="ALL")
    { 
        Label1.Visible = true; 
        Label2.Visible = true; 
    }
    else if (e.Text == "grvUser")            
    {
        Label1.Visible=true; 
        Label2.Visible=false;
    }
    else if (e.Text == "grvRole")
    { 
        Label1.Visible = false; 
        Label2.Visible = true; 
    }
}

That was a Client-side solution.