RadGrid CommandItemTemplate HIde/Show buttons

[RB]

In my Radgrid CommandItemTemplate, I have a bunch of buttons. Some buttons are hidden to start with and based on the row clicked, they are visible or remain hidden.

I tried the following while adding buttons, which successfully hides the button.

public class MyTemplate : ITemplate
{
    protected RadButton lnkAdd;
    public void InstantiateIn(System.Web.UI.Control container)
    {
        lnkAdd = new RadButton();
        lnkAdd.ID = "BtnAdd";
        lnkAdd.CommandName = RadGrid.InitInsertCommandName;
        lnkAdd.Text = "Add New Record";
        container.Controls.Add(lnkAdd);
     
        lnkAdd = new RadButton();
        lnkAdd.ID = "BtnEdit";
        lnkAdd.Text = "Edit";
        container.Controls.Add(lnkAdd);

        container.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "hideButtons",
             "\n<script type=\"text/javascript\">"
            //+ "\n$(function(){"           
           + "\n$(document).ready(function ruchi(){"
           + "\n    $(\"#" + lnkAdd.ClientID + "\").hide(); "
           + "\n    return false;"
           + "\n  });"
           + "\n</script>"
       );
    }
}

OnRowSelected I have this:

function OnRowSelected(sender, args) {
    var clientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];
    var clientDataKeyValue = args.get_tableView().get_selectedItems()[0].getDataKeyValue(clientDataKeyName);
    var grid = args.get_tableView();
    linkButton1 = $telerik.findControl(grid.get_element(), "BtnProposal");
    if (clientDataKeyValue == "Proposal")
    {
        linkButton1.set_enabled(false);
    }
    else
        linkButton1.set_enabled(true);
}

But it fails to show the button. Please let me know how can I achieve this.
Also is there a way the the commandItemTemplate is hidden by default and added only on click of a row?

[Shinu]

Hi RB,

Please try to make the display of the LinkButton as none in code behind and access the control in the Client Side as follows.

C#:

protected LinkButton lnkAdd;
public void InstantiateIn(System.Web.UI.Control container)
{
    lnkAdd = new LinkButton();
    lnkAdd.ID = "lnkAdd";
    lnkAdd.CommandName = RadGrid.InitInsertCommandName;
    lnkAdd.Text = "Add New Record";
    lnkAdd.Style.Add("display", "none");
    container.Controls.Add(lnkAdd);
}

JavaScript:

function OnRowSelected(sender, args) {
    // accessing link button in the client side
    var linkButton1 = $telerik.$(sender.get_masterTableView().get_element()).find('a[id*="lnkAdd"]')[0];
    linkButton1.style.display = "block";
   //your code
}

Thanks,
Shinu.

[RB]

I tried your code. But it was unable to find the button. I could successfully find the button with the following code,
linkButton1 = $telerik.findControl(grid.get_element(), "BtnProposal");
But linkButton1.style.display = "block"; threw the error: Unable to set property 'display' of undefined or null reference. Though it finds the button, style is rendered as undefined. 

[Shinu]

Hi RB,

Please do the following modifications in your JavaScript which works fine at my end.

JavaScript:

function OnRowSelected(sender, args) {
    var linkButton1 = linkButton1 = $telerik.findControl(sender.get_element(), "BtnProposal");
    linkButton1._element.style.display = "block";
   //your code
}

Hope this will helps you.
Thanks,
Shinu.