Getting ID of button that is in grid's edit template?

[Garrett]

Hi,

I have a complex edit template for my grid and the two controls in question are a drop down list and a button. OnClientSelectedIndexChanged on the drop down, I want to set the button's visibility. However, I cannot get the ID of the button control.

How do I get the button's ID to manipulate it's visibility when the button is inside of a grid edit template?

I was trying to do it like this but it does not work (it gets the correct index, but still the button variable returns null)

var masterTable = $find('<%=RadGrid1.ClientID %>').get_masterTableView();
var editIndex = $find("<%=RadGrid1.ClientID %>")._editIndexes;
var btn = masterTable.get_dataItems()[editIndex].findControl('btnBracketLookup');
var selectedBracket = sender.get_selectedItem().get_value();

            if (selectedBracket == -1) {

                btn.set_visible(false);

            }

[Jayesh Goyani]

Hi,

Please try with the below links.

Access Another control which was in same level or in row
Access RadGrid Row and Column on Client Side
EditForm Calculated Textbox

Thanks,
Jayesh Goyani

[Garrett]

Hi Jayesh, thank you for your very very fast reply, I have tried these examples but for "var btn" in my example below, $telerik.find method and the findcontrol methods both return NULL and the get_element method says object expected, please advise which is best and how to fix?

function HideButtonOnNA(sender, args) {

    var grid = $find("<%= RadGrid1.ClientID %>");
    if (grid) {
        var MasterTable = grid.get_masterTableView();
        var editIndex = $find("<%=RadGrid1.ClientID %>")._editIndexes;
        var Rows = MasterTable.get_dataItems();
        var btn = $(Rows[editIndex].get_element()).find("span[id*='btnBracketLookup']").get(0); // errors out, object not defined
        //var btn = $telerik.findControl(Rows[editIndex].get_element(), "btnBracketLookup"); //returns null
        //var btn = Rows[editIndex].findControl("btnBracketLookup"); // returns null
    alert(btn);


    //var selectedBracket = sender.get_selectedItem().get_value();
    //if (selectedBracket == -1) {
    //    btn.set_visible(false);
    //    alert(btn.get_visible());
        //}
    }
}

[Shinu]

Hi Garrett,

Please try the below JavaScript to achieve your scenario.

JavaScript:

function HideButtonOnNA(sender, args) {
    var grid = $find('<%=RadGrid1.ClientID %>');
    var EditItems = grid.get_editItems();
    var editItem = EditItems[0];
    var btn = $(editItem.get_editFormItem()).find("input[id*='btnBracketLookup']").get(0);
    //your code
}

Thanks,
Shinu.

[Garrett]

Hi Shinu,

I am getting Object Expected, I have attached a screenshot

[Garrett]

Also this button is a radbutton, sorry if I did not make that clear

[Jayesh Goyani]

Hi Garrett,

Can you please try with the below code snippet?

http://www.telerik.com/forums/editform-calculated-textbox (If both the controls are in same container then its ID is also same).

If above link is not helpful to you then please provide your mark up code.



Thanks,
Jayesh Goyani

[Garrett]

We do not currently implement jquery, is it necessary for this method?

[Jayesh Goyani]

Hello,

Please try with the below code snippet.

<telerik:GridTemplateColumn>
                       <EditItemTemplate>
                           <telerik:RadDropDownList ID="RadDropDownList1" runat="server" OnClientSelectedIndexChanged="ClientSelectedIndexChanged">
                               <Items>
                                   <telerik:DropDownListItem Value="1" Text="1" />
                                   <telerik:DropDownListItem Value="0" Text="0" />
                               </Items>
                           </telerik:RadDropDownList>
                           <asp:Button ID="btnBracketLookup" runat="server" Text="test button" />
                       </EditItemTemplate>
                   </telerik:GridTemplateColumn>

<script type="text/javascript">

    function ClientSelectedIndexChanged(sender, args) {
        if (sender.get_selectedItem().get_value() == "0") {
            document.getElementById(sender.get_id().replace("RadDropDownList1", "btnBracketLookup")).style.display = "none";
        }
        else {
            document.getElementById(sender.get_id().replace("RadDropDownList1", "btnBracketLookup")).style.display = "";
        }
    }

</script>

Let me know if any concern.

Thanks,
Jayesh Goyani

[Garrett]

Thank you Jayesh and Shinu, you are both very helpful. I will look at your code soon when I have some time. For now, we have decided to hide/reveal a span based on the drop down list. The reason this does not work on the button directly is because there are stylesheets that are manipulating it too much to bother trying to track down which other elements of css need to be dealt with :

function HideButtonOnNA(sender, args) {
           var serverID = "btnSpan";
           var tagName = "SPAN";
           var cache = document.getElementById('<%= cache.ClientID%>');
           if (sender._value == -1) {

               var button = GetGridServerElement(serverID, tagName);
               button.style.visibility = 'hidden';
               cache.value ="N/A";
           }
           else if (cache.value == "N/A")
           {
               var button = GetGridServerElement(serverID, tagName);
               button.style.visibility = 'visible';
               cache.value="val";
           }


       }

       function GetGridServerElement(serverID, tagName)
       {
           if(!tagName)
               tagName = "*";

           var grid = $get("<%= RadGrid1.ClientID %>");
           var elements = grid.getElementsByTagName(tagName);
           for(var i = 0 ; i< elements.length; i++)
           {
               var element = elements[i];
               if(element.id.indexOf(serverID) >= 0)
                   return element;
           }
       }