[Solved] Script Registrar Not Loading Scripts for Controls used in Client Templates!

[Michael]

I attempted to implement the Client Edit Templates solution from the demo projects in a new web project I created using 2001.2.825.  I had the basic MVC project and I used the telerik tools to convert it to a Telerik project.  I added the grid and started playing around and used the Ajax binding.  Everything worked perfectly.  I then added the following editor template:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<%@ Import Namespace="MassLeg.SourceData.AdminSite" %>
<%= Html.Telerik().DropDownList()
        .Name("CityId")
        .BindTo((SelectList)ViewData[ViewDataKeys.Cities])
%>

And used the following grid definition:

Html.Telerik().Grid<UserViewModel>()
        .Name("Grid")
        .DataKeys(keys =>
        {
            keys.Add(u => u.UserId);
        })
        .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text).ImageHtmlAttributes(new { style = "margin-left:0" }))
        .DataBinding(dataBinding => dataBinding.Ajax()
                                        .Select("_SelectAjaxEditing", "User")
                                        .Insert("_InsertAjaxEditing", "User")
                                        .Update("_SaveAjaxEditing", "User")
                                        .Delete("_DeleteAjaxEditing", "User"))
        .Columns(columns =>
        {
            columns.Bound(u=>u.UserId).Width(75);
            columns.Bound(u=>u.UserMemberCode).Width(100);
            columns.Bound(u => u.Prefix).Width(60);
            columns.Bound(u => u.FirstName).Width(90);
            columns.Bound(u => u.MiddleName).Width(70);
            columns.Bound(u => u.LastName).Width(90);
            columns.Bound(u => u.Suffix).Width(60);
            columns.Bound(u => u.Branch).Width(50);
            columns.Bound(u => u.District).Width(80);
            columns.Bound(u => u.CityId).Width(200);
            columns.Bound(u => u.Party).Width(60);
            columns.Bound(u => u.IsLegislator).ClientTemplate("<input type='checkbox' disabled='disabled' name='IsLegislator' <#=IsLegislator? checked='checked' : '' #>").Width(90);
            columns.Bound(u => u.IsActive).ClientTemplate("<input type='checkbox' disabled='disabled' name='IsActive' <#=IsActive? checked='checked' : '' #>").Width(90);
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(GridButtonType.Text);
                commands.Delete().ButtonType(GridButtonType.Text);
            }).Width(100).Title("Commands");
        })
        .ClientEvents(events => events.OnEdit("onEdit"))
        .Pageable()
        .Scrollable()

Along with the following onEdit function:

function onEdit(e) {
        $(e.form).find('#CityId').data('tDropDownList').select(function (dataItem) {
            return dataItem.Value == e.dataItem['CityId'].toString();
        });
    }

No matter what, when I clicked the "edit" button on the grid the drop down list would be displaying the first item in the select list and would not respond to mouse clicks.  After much searching, I realized that the functions needed were in telerik.list.min.js which was not being loaded.

On a whim, I added the following code directly to my index.aspx:

<%= Html.Telerik().DropDownList()
        .Name("CityId1")
        .BindTo((SelectList)ViewData[ViewDataKeys.Cities])
%>

right above the grid and re-loaded the page. 

The CityId1 DropDownList responded exactly as it should have.  When I clicked the "Edit" button on the grid, the drop down list in the editor template responded properly and was properly databound!

So I have 2 questions:  1. How can I manually add the telerik.list.min.js file to the script registrar, and 2. Should I have to be doing this manually or *SHOULD* this be handled by the script registrar? 

Thanks in advance!

[Atanas Korchev]

Hi Michael,

 I confirm that this is a bug. We discovered it shortly after releasing the Q2 release. As a workaround I suggest you manually register the JavaScript files with the ScriptRegistrar. Or you can try the latest internal build.

Regards,
Atanas Korchev
the Telerik team

[John]

Hi Atanas

I have just upgrade to the Q3 release and discovered the old issue mentioned in a previous post has resurfaced.

The work around is the same as in the past and i have include the following code were required which resolved the issue.  Is there some chance this will be resolved in the future.

<%  Html.Telerik.ScriptRegistrar().Scripts(Function(s) s.Add("/2010.3.1110/telerik.list.min.js"))%>

Thanks

John

[Atanas Korchev]

Hi John,

 Unfortunately I confirm that we have reintroduced this bug. Find attached a hotfix build which addressed that problem.

I have updated your Telerik points.

All the best,
Atanas Korchev
the Telerik team

[Dmitry Polskoy]

Hi Atanas,
Thank you for the fix. But I found that the issue is still present if ScriptRegistrar renders scripts at the bottom of the page.
In this case Telerik elements (such as NumericTextBox/Combobox etc) render jQuery function call inline but not on the document ready event.
As a result I have the following flow in the rendered HTML: 
1. javascript component init function call (jQuery('#componentId').tComboBox(...))
2. Necessary javascripts files are included
3. OnDocumentReady javascript event handler call

But should be:
1. Necessary javascripts files are included
2. javascript component init function call in OnDocumentReady javascript handler

Could you please fix it or suggest any workaround?

[dfgdfgdfgdfg]

Try to include the jquery manually in the head section, and call script registrar like this:

<%= Html.Telerik().ScriptRegistrar().jQuery(false) %>

Hope it helps!

[dejavu]

At least in my case it worked. Using a custom entity class and an EditorTemplate this hotfix worked for me. Can anyone confirm this on self made tests?

Kind regards,
dejavu