[Solved] How to access CommandItemTemplate using Javascript

[Anup]

Hi,

I am having a RadGrid that has a CommandItemTemplate as described below :

<CommandItemTemplate>

 <asp:LinkButton runat="server" ID="lb_Button1" Visible="false">LinkButton1</asp:LinkButton>
<asp:LinkButton runat="server" ID="lb_Button2" Visible="false">LinkButton2</asp:LinkButton> 
</CommandItemTemplate>

OnRowSelect Client Event of the RadGrid, I want to enable/disable these Link Buttons. I want to achieve this using javascript.
Also, I tried setting : 

Visible='<%# rg_Alumni.SelectedItems.Count > 0 %>'

but it didn't work.
Please, help.

Thanks,
Anup

[Richard]

Anoup:

Why don't you replace the <asp:LinkButton> with  <telerik:RadButton ButtonType="LinkButton" > and then you can easily access them in Javascript as follows:

Default.aspx:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            <!--
            function RowSelected(sender, eventArgs) {

                var grid = $find("<%=RadGrid1.ClientID %>");
                linkButton1 = $telerik.findControl(grid.get_element(), "lb_Button1");
                linkButton1.set_enabled(false);
                linkButton2 = $telerik.findControl(grid.get_element(), "lb_Button2");
                linkButton2.set_enabled(false);
                var text = "";
                text += "Row with index: " + eventArgs.get_itemIndexHierarchical() + " was selected";
                document.getElementById("OutPut").innerHTML = text;
            }

            -->
        </script>
    </telerik:RadCodeBlock>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div class="module" style="height: 20px; width: 350px;">
        <span style="font-weight: bold;">Last event: </span><span id="OutPut" style="font-weight: bold;
            color: navy;"></span>
    </div>

    <div>
        <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server"
            AllowPaging="True" AllowSorting="True" GridLines="None"
            ShowStatusBar="True" CellSpacing="0">

<MasterTableView DataSourceID="SqlDataSource1" autogeneratecolumns="False"
                datakeynames="CustomerID" CommandItemDisplay="Top">
<CommandItemTemplate>
 <telerik:RadButton ButtonType="LinkButton" runat="server" ID="lb_Button1" Visible="true" Text="LinkButton1" />
 <telerik:RadButton ButtonType="LinkButton" runat="server" ID="lb_Button2" Visible="true" Text="LinkButton2" />
</CommandItemTemplate>

See attached image for output.

Hope this helps!

[Anup]

Hey jumpstart,

Thanks alot. It did work. But to be clear, I want to Hide/Unhide the CommandItemTemplate which wasn't happening with RadButton's Visible property (though the Enabled property was working fine). Once I set RadButton's Visible to false in aspx file, I get a null reference to it in the javascript(as described above).

However, I used the asp:LinkButton and put the code on OnSelectedIndexChanged event of RadGrid to toggle its Visibility.

If there is some other way of handling Visibility of RadButton using Javascript, do let me know.

Thanks again :)
-Anup

[Richard]

Anup:

This code works for me to hide the RadButtons when a RadGrid row gets selected. I'm using Q1 2012 controls.

<script type="text/javascript">
    <!--
    function RowSelected(sender, eventArgs) {

        var grid = $find("<%=RadGrid1.ClientID %>");
        linkButton1 = $telerik.findControl(grid.get_element(), "lb_Button1");
        linkButton1.set_visible(false);
        linkButton2 = $telerik.findControl(grid.get_element(), "lb_Button2");
        linkButton2.set_visible(false);
        var text = "";
        text += "Row with index: " + eventArgs.get_itemIndexHierarchical() + " was selected";
        document.getElementById("OutPut").innerHTML = text;
    }

    -->
</script>

Cheers!