Alternative for using $find and jquery selector in order to get object in ASP.net application

Question

I would like to call a method of an element which can be returned from the ASP.net Sys.Application method "$find". In this case it is a telerik RadWindow control (ID="MyWindow") and I would like to call the .show() method.

The problem is to get the correct client id of the control in a separate JS file, since IDs gets modified in the ASP.net framework. For this I currently use

$find($("[ID$=MyWindow]")[0].id).show();

This works if there is only one element on the page which id ends with "MyWindow". Unfortunately the control sometimes adds some strange wrapper element to the page which id ends with "MyWindow", too.

So my question: Is there a better way to get the ASP.net element object in a separate JS file besides this ugly combination of $find and jquery selection?

Answer 1

You could write a small JavaScript enclosure at the end of the page and add controls you wish to address in external files as needed.

<script>
var controls = new function () {
    return {
        radWinManagerMain: {
            ClientID: "<%= radWinManagerMain.ClientID %>"
        },
        radWinManagerSub: {
            ClientID: "<%= radWinManagerSub.ClientID %>"
        }
    };
}();
</script>

I was using two separate RadWindowManagers which I wanted to address in an external JS file. GetRadWindowManager() would have always returned the first RadWindowManager instance on the page. I therefore chose this approach.

When calling the function (which is implemented in external JS) I pass on a reference to controls which returns the IDs.

<telerik:NavigationNode NavigateUrl="javascript:showWindow(controls.radWinManagerMain,'winSettings');" value="settings" Text="Settings" SpriteCssClass="fa fa-cog" runat="server" />

In external JS file:

function showWindow(control, windowName) {
    $find(control.ClientID).open(null, windowName);
    some more code here...
}

I found the idea to this on: http://www.telerik.com/blogs/simplify-javascript-control-references-in-asp.net-webforms

Answer 2

Only thing I can think of will be to use ClientIDMode to either preditable or static.

Here is an example.

Even then you want to be careful about colliding IDs.

<telerik:RadWindowID="RadWindow1" runat="server" ClientIDMode="Static" ...>
</telerik:RadWindow>

// Separate JS File
function showForm(url) {
   var oWnd = $find("RadWindow1");
   oWnd.setUrl(url);
   oWnd.show();
}

OR another apporach is to use RadWindowsManager

RadWindowManager lets you call RadWindow via ID from JavaScript.

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" ...>
   <Windows>
     <telerik:RadWindow ID="RadWindow1" runat="server">
     </telerik:RadWindow>
   </Windows>
</telerik:RadWindowManager>

// Separate JS File
function showForm(url) {
   window.radopen(url, "RadWindow1");
   return false;
}

Answer 3

Another approach is to create an object with all the names of the controls in ASPX file and access it from your JS file.

ASPX file:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" ...>
   <Windows>
     <telerik:RadWindow ID="RadWindow1" runat="server">
     </telerik:RadWindow>
   </Windows>
</telerik:RadWindowManager>



<script type="text/javascript">
         var MyControls = {
                MyRadWindow: '<%= RadWindow1.ClientID %>'
         };
</script>

JS File:

$find(MyControls.MyRadWindow).show();