[Solved] Problems accessing dropbox on document ready

[Dave Hayward]

I have a series of cascading dropboxes that i'm loading on demand using ajax calls. I want to auto-load the controls with their default values when the user hits the page, so i'm trying to call reload on document ready.
I have the controls define as follows:

@(Html.Telerik()
     .DropDownList()
     .Name("template")
     .HtmlAttributes(new {style = "width:250px; text-align: left"})
     .DataBinding(b => b.Ajax().Select("StartLoadTemplateList", "PlaceOrders"))
     .ClientEvents(ev => ev.OnChange("OnTemplateChange"))
     .ClientEvents(ev => ev.OnDataBound("OnTemplateDataBound"))
  )

in my script file for the view, I have the following:

$(document).ready(function () {
    $('#template').data("tDropDownList").reload();
});

When I run this, Firebug reports that the expression is 'undefined'. When I break down the elements of the expression, $('#template') is defined, but $('#template').data('tDropDownList') is not. If I put the same expression is a button click handler, it works fine.

Do you know what might be happeneing, and what I might be able to do to achieve the same results?

TIA 

[Georgi Krustev]

Hello Dave,

You will need to use Html.Telerik().ScriptRegistrar().OnDocumentReady:

@{
   Html.Telerik().ScriptRegistrar().OnDocumentReady(@<text>
          $('#template').data("tDropDownList").reload();
    </text>);
}

Thus the code you are trying to run will be after the DropDownList is inialized.
 
All the best,
Georgi Krustev
the Telerik team

[Dave Hayward]

Thanks Georgi,

That works perfectly. I'm a bit confused about the purpose of the ScriptRegistrar and its use. The documentation says to put one in the main layout, so I assume it was only needed for the Telerik scripts, and only once. It now looks like its used for my scripts as well and I should put one on each page as well, at least to implement the function I described.

Should I be using it to reference all of my scripts? Since it's not a control, it's difficult finding a clear description of its purpose and use.

In any case, thanks for the solution. Now I can demo my site without any extra buttons :o)

[Atanas Korchev]

Hello, 

The ScriptRegistrar does two things:

1. Register the JavaScript files required by all components
2. Initialize them on the client-side using the ready jQuery method

The latter is the reason why components are not not immediately available. You either need to use a ScriptRegistrar's OnDocumentReady method or register the jQuery JavaScript file yourself and use your own ready handlers inside <script> elements.

Here is how you could do it using OnDocumentReady:

_Layout.cshtml (this is the "master" script registrar which will output all script files and OnDocumentReady registrations):

@(Html.Telerik().ScriptRegistrar())

Index.cshtml (this ScriptRegistrar only registers the OnDocumentReady statement with the one in _Layout.cshtml)

@{

   Html.Telerik().ScriptRegistrar().OnDocumentReady(@<text>

          $('#template').data("tDropDownList").reload();

    </text>);

}

 

All the best, Atanas Korchev
the Telerik team

[Dave Hayward]

Atanas,

Thanks for the explanation. It's very useful and helpful.