[Solved] Script loading problems in grid.js

[Victor]

Hi!

We have had some problems with grids loaded inside tabstrips using ajax, and have finally tracked down a cause of it.

Scenario: We load all scripts directly in the main layout page, the issue occurs when using Combined(true), not otherwise. It occurs both for the minified version of grid.js and the non-minified one. Init code for us looks like this:

@(Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false).Globalization(true).DefaultGroup(group => group

    .Add("jquery.validate.min.js")

    .Add("jquery.validate.unobtrusive.min.js")

    .Add("telerik.common.min.js")

    .Add("telerik.slider.min.js")

    .Add("telerik.list.min.js")

    .Add("telerik.upload.min.js")

    .Add("telerik.autocomplete.min.js")

    .Add("telerik.combobox.min.js")

    .Add("telerik.calendar.min.js")

    .Add("telerik.datepicker.min.js")

    .Add("telerik.datetimepicker.min.js")

    .Add("telerik.timepicker.min.js")

    .Add("telerik.textbox.min.js")

    .Add("telerik.draganddrop.min.js")

    .Add("telerik.grid.min.js")

    .Add("telerik.grid.grouping.min.js")

    .Add("telerik.grid.filtering.min.js")

    .Add("telerik.grid.resizing.min.js")

    .Add("telerik.grid.reordering.min.js")

    .Add("telerik.grid.editing.min.js")

    .Add("telerik.window.min.js")

    .Add("telerik.tabstrip.min.js")

    .Add("telerik.editor.min.js")

    .Add("telerik.menu.min.js")

    .Add("telerik.panelbar.min.js")

    .Add("telerik.treeview.min.js")

    .Add("telerik.chart.min.js")

    .Combined(true)

    //.Compress(true) --does not matter, but impossible to debug turned on of course...


)

)

When clicking the tab loading the grid via ajax we get this error:

• $t[this.plugins[i]] is undefined

The tab is not loaded, but clicking another tab and then back loads it (without ajax request)

The code giving the error can be found ~row 200 in grid.js (2011.2.914):

for (var i = 0; i < this.plugins.length; i++)
    $t[this.plugins[i]].initialize(this);

When changing those rows to this:

console.log(this.plugins);

console.log($t);

for (var i = 0; i < this.plugins.length; i++) {

    console.log(this.plugins[i]);

    console.log($t[this.plugins[i]] != null);

    if($t[this.plugins[i]] != null)

        $t[this.plugins[i]].initialize(this);

}

some interesting things can be noted:


1. The error is gone and the tabstrip and grid works
2. The plugins to be loaded are: ["grouping", "filtering", "resizing", "reordering"]
3. $t.scripts holds these:["telerik.tabstrip.js", "telerik.grid.js", "telerik.draganddrop.js", "telerik.grid.resizing.js", "telerik.menu.js"]
4. For grouping, filtering and reordering, the if clause evaluates to "false" and initialize is skipped

Edit: Also in grid.js: Row 19 is missing a comma in the end of the row, making FOCUSED a global variable when minified and dependant on browser when not.

Related to this: Is it possible to disable the autoloading of scripts via ajax globally? We seem to get those at times despite having included everything. (Same is sometimes true for non-ajax pages as well where we because of this get telerik script files included twice in one page)

Not really related: The Telerik CDN is a really great idea we think, really neat! However we would really like an option to include telerik.mvc.all.min.js, since loading all scripts separately does not seem like a temping option for us. For styles not at all as important since usually only one theme is used at the time.

I really hope the main issue can be solved quickly!


Thanks!
/Victor Ström

[Georgi Tunev]

Hi Victor,

Could you please provide a sample project that would allow us to get a better view over your exact setup and how exactly you load the components?

Thank you for your patience and cooperation.

Best wishes,
Georgi Tunev
the Telerik team

[Victor]

Hi!

I did a half-hearted attempt at reproducing the issue in your example solution, but I could not easily reproduce the issue so I thought I'd put the effort into documenting what was actually happening instead.

The scenario is that we have a tabstrip containing grids in the panes. The panes are loaded dynamically via ajax and whenever grouping, filtering, reordering or editing was turned on the error described occured (before the "fix" that is).

If it is not possible to conclude anything from the given descriptions I will probably make a more thorough attempt, but I am honestly a bit reluctant since it is quite time-consuming.

Also, I still wonder about the two last paragraphs of questions, no treally to the main issue.


Thanks
/Victor

[Georgi Tunev]

Hello Victor,

 Currently the automatic ajax loading of the scripts cannot be disabled. Same goes for telerik.asll.min.js - we don't support it right now. Still, both ideas sound reasonable and we will consider adding them as features requests.

As for the problem with the grid, I created a small demo sample, based on the information so far - I was not able to reproduce the problem, but if you can modify it so it shows the error and send it back, we will check it right away.

All the best,
Georgi Tunev
the Telerik team

[Victor]

Hi again,

After putting a few hours into trying to reproduce this issue I simply cannot, leading me to believe there is something wrong somewhere else.

Thanks for your time, I will get back if we manage to reproduce the issues later on, for now thanks for the info about disabling autoloading and "all.js".

/Victor

[Victor]

Hi again,

Checking back a while later. I noticed that there actually is a telerik.all.min.js in the latest beta release, nice!

However, I also noticed that when I include that instead of all the separate files the Telerik asset manager also includes all script files required for that page. How do I get around this?

I'm doing something like this:

@(Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false).Globalization(true).DefaultGroup(group => group
    .Add("jquery.validate.min.js")
    .Add("jquery.validate.unobtrusive.min.js")
    .Add("telerik.all.min.js")
    .Add("customscripts.js")
    .Combined(false)
    .Compress(false)
)
)

which produces something like this (of course with content in all script files):

<script src="/Scripts/jquery.validate.min.js" type="text/javascript">
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/telerik.all.min.js" type="text/javascript"></script>
<script src="/Scripts/customscripts.js" type="text/javascript"></script>
<script src="/Scripts/telerik.common.min.js" type="text/javascript"></script>
<script src="/Scripts/telerik.treeview.min.js" type="text/javascript"></script>
<script src="/Scripts/telerik.datetimepicker.min.js" type="text/javascript"></script>
<script src="/Scripts/telerik.datepicker.min.js" type="text/javascript"></script>
<script src="/Scripts/telerik.calendar.min.js" type="text/javascript"></script>
<script src="/Scripts/telerik.timepicker.min.js" type="text/javascript"></script>
<script src="/Scripts/telerik.menu.min.js" type="text/javascript"></script>
<script type="text/javascript">//Telerik init code</script>

Thanks
/Victor

[Atanas Korchev]

Hello,

Currently we do not support manually including that file. You could try this instead:

@(Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false).Globalization(true).
.CombinedComponentFile(true)
.DefaultGroup(group => group

    .Add("jquery.validate.min.js")

    .Add("jquery.validate.unobtrusive.min.js")

    .Add("customscripts.js")

    .Combined(false)

    .Compress(false)

)

)

We will see if manually including telerik.all.js can be supported as well.

Regards,
Atanas Korchev
the Telerik team

[Victor]

Seems to work pretty well, thanks!

Only problem for us is that the telerik.all script seems to be added at the very bottom, after our custom scripts (some of which build on the telerik ones). I assume the easiest solution is to add a second script group (after the DefaultGroup) that adds the custom scripts? Or is there any better way for now?

Thanks
/Victor

[Atanas Korchev]

Hello,

 In that case include telerik.all.js as well:

@(Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false).Globalization(true).
.CombinedComponentFile(true)
.DefaultGroup(group => group
    .Add("jquery.validate.min.js")
    .Add("jquery.validate.unobtrusive.min.js")
    .Add("telerik.all.js")
    .Add("customscripts.js")
    .Combined(false)
    .Compress(false)
)
)

Regards,
Atanas Korchev
the Telerik team

[Victor]

Perfect, works well!

Thanks again
/Victor