This is a migrated thread and some comments may be shown as answers.

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

9 Answers 127 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Garrett
Top achievements
Rank 1
Garrett asked on 22 Jul 2014, 07:05 PM
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);
            }

9 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 22 Jul 2014, 07:12 PM
0
Garrett
Top achievements
Rank 1
answered on 22 Jul 2014, 07:26 PM
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());
        //}
    }
}
0
Shinu
Top achievements
Rank 1
answered on 23 Jul 2014, 07:00 AM
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.
0
Garrett
Top achievements
Rank 1
answered on 23 Jul 2014, 12:57 PM
Hi Shinu,

I am getting Object Expected, I have attached a screenshot
0
Garrett
Top achievements
Rank 1
answered on 23 Jul 2014, 01:03 PM
Also this button is a radbutton, sorry if I did not make that clear
0
Jayesh Goyani
Top achievements
Rank 2
answered on 23 Jul 2014, 01:19 PM
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
0
Garrett
Top achievements
Rank 1
answered on 23 Jul 2014, 01:22 PM
We do not currently implement jquery, is it necessary for this method?
0
Jayesh Goyani
Top achievements
Rank 2
answered on 23 Jul 2014, 06:10 PM
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
0
Garrett
Top achievements
Rank 1
answered on 23 Jul 2014, 06:17 PM
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;
           }
       }
Tags
Grid
Asked by
Garrett
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Garrett
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Share this question
or