Change Panel visibility on Button Click or Row Click

[William]

I have a RadGrid and a Panel which has the visibility = false (as default).

I need to click a Row or a button to send that Rows ID to that panel and make that Panel visible in server side

<form id="form1" runat="server">

    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">

            function RowDblClick(sender, eventArgs) {               

                //alert("Chosen Row ID: " + eventArgs.getDataKeyValue("ID"));

            }

        </script>

    </telerik:RadCodeBlock>

    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="97%" CellSpacing="0"

        GridLines="None" OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged">

        <PagerStyle Mode="NumericPages"></PagerStyle>

        <MasterTableView AutoGenerateColumns="False" DataKeyNames="ID" ClientDataKeyNames="ID"

            Width="100%" CommandItemDisplay="Top" PageSize="5">

            <Columns>

                <telerik:GridBoundColumn DataField="ID" HeaderText="ID" SortExpression="ID" UniqueName="ID">

                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn DataField="TesisatNo" HeaderText="Tesisat No" SortExpression="TesisatNo"

                    UniqueName="TesisatNo">

                </telerik:GridBoundColumn>                             

            </Columns>

            <EditFormSettings>

                <EditColumn FilterControlAltText="Filter EditCommandColumn column">

                </EditColumn>

            </EditFormSettings>

        </MasterTableView>

        <ClientSettings>

            <Selecting AllowRowSelect="true"></Selecting>

            <ClientEvents OnRowDblClick="RowDblClick"></ClientEvents>

        </ClientSettings>

        <FilterMenu EnableImageSprites="False">

        </FilterMenu>       

    </telerik:RadGrid>

    <asp:Panel ID="PanelDetails" runat="server" Visible="false">

        THIS BECOMES VISIBLE ON DOUBLE CLICK OR ON BUTTON CLICK
           ALSO THE SELECTED ROW ID MUST BE RECEIVED HERE

    </asp:Panel>

    </form>

[Jayesh Goyani]

Hello,

Using Row Click

Please try with below code snippet.

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
    AllowFilteringByColumn="true" AllowMultiRowEdit="true"
    OnItemCommand="RadGrid1_ItemCommand">
    <MasterTableView EditMode="InPlace" DataKeyNames="ID">
        <Columns>
            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID">
            </telerik:GridBoundColumn>
            <telerik:GridEditCommandColumn>
            </telerik:GridEditCommandColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings EnablePostBackOnRowClick="true">
    </ClientSettings>
</telerik:RadGrid>
<asp:Panel ID="PanelDetails" runat="server" Visible="false">
    THIS BECOMES VISIBLE ON DOUBLE CLICK OR ON BUTTON CLICK ALSO THE SELECTED ROW ID
    MUST BE RECEIVED HERE
</asp:Panel>

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
       {
           if (e.CommandName == "RowClick" && e.Item is GridDataItem)
           {
               GridDataItem item = e.Item as GridDataItem;
               PanelDetails.Visible = true;
               PanelDetails.ToolTip = item.GetDataKeyValue("ID").ToString();
           }
       }

 protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
       {
           dynamic data = new[] {
             new { ID = 1, Name ="aaa"},
             new { ID = 2, Name = "bbb"},
             new { ID = 3, Name = "ccc"},
             new { ID = 4, Name = "ddd"},
             new { ID = 5, Name ="eee"},
             new { ID = 6, Name ="aaa"},
             new { ID = 7, Name = "bbb"},
             new { ID = 8, Name = "ccc"},
             new { ID = 9, Name = "ddd"},
             new { ID = 10, Name ="eee"}
           };
           RadGrid1.DataSource = data;
       }

Using Button Click

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            dynamic data = new[] {
              new { ID = 1, Name ="aaa"},
              new { ID = 2, Name = "bbb"},
              new { ID = 3, Name = "ccc"},
              new { ID = 4, Name = "ddd"},
              new { ID = 5, Name ="eee"},
              new { ID = 6, Name ="aaa"},
              new { ID = 7, Name = "bbb"},
              new { ID = 8, Name = "ccc"},
              new { ID = 9, Name = "ddd"},
              new { ID = 10, Name ="eee"}
            };
            RadGrid1.DataSource = data;
        }

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
        {
            if (e.CommandName == "MyCommand")
            {
                GridDataItem item = e.Item as GridDataItem;
                PanelDetails.Visible = true;
                PanelDetails.ToolTip = item.GetDataKeyValue("ID").ToString();
            }
        }

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"

             AllowFilteringByColumn="true" AllowMultiRowEdit="true"

            OnItemCommand="RadGrid1_ItemCommand">

            <MasterTableView EditMode="InPlace" DataKeyNames="ID">

                <Columns>

                    <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID">

                    </telerik:GridBoundColumn>

                    <telerik:GridTemplateColumn>

                        <ItemTemplate>

                            <asp:Button CommandName="MyCommand" ID="Button1" runat="server" />

                        </ItemTemplate>

                    </telerik:GridTemplateColumn>

                    <%--OR--%>

                    <telerik:GridButtonColumn CommandName="MyCommand"></telerik:GridButtonColumn>

                    <telerik:GridEditCommandColumn>

                    </telerik:GridEditCommandColumn>

                </Columns>

            </MasterTableView>

        </telerik:RadGrid>

        <asp:Panel ID="PanelDetails" runat="server" Visible="false">

            THIS BECOMES VISIBLE ON DOUBLE CLICK OR ON BUTTON CLICK ALSO THE SELECTED ROW ID

            MUST BE RECEIVED HERE

If you used RadAjaxManager then add below code snippet.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="PanelDetails" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>

Thanks,
Jayesh Goyani