[Solved] Grid in LoadContentFrom causes javascript error

[Joan Vilariño]

Hi.

I'm trying to create a view that contains a tabstrip with several tabs... In one (or several) of them I need to put ajax enabled grids. The code should be something like this:

.Items(items =>

{

items.Add()

.Text("Datos")

.LoadContentFrom("_obtenerTabDatos", "Local");

items.Add()

.Text("Parque")

.LoadContentFrom("_obtenerTabParque", "Local");  ...... etc...

and the partial view with the ajax grid looks like this:

        <div id="panelInferior" style="width:100%">
            <%= Html.Telerik().Grid<ContactoViewModel.ContactoVM>()
                            .Name("LookupLocales")
                            .DataBinding(databind => databind.Ajax().Select("_obtenerGridContactos", "Local"))
                            .Columns(columns =>
                                                 {
                                                     columns.Bound(o => o.Valor).Title("Local");
                                                 })
                            .Sortable()
                            .Pageable(action => action.PageSize(10))
                            .Filterable()
                            .Selectable()
            %>
        </div>

When I browse to this view... I get a javascript error in the first lines of the view but not in the javascript code (I suppose that something breaks in the ajax loaded code and the browser doesn't show it)

I've found a post where you tell someone that TabStrips are using MS Ajax and not jSon, and that this makes it ignore javascript and css... and that a possible solution is to register the grid scripts with ScriptRegistrar at the master page like this:

<%= Html.Telerik().ScriptRegistrar()
                 .DefaultGroup(group => group
                     .Add("telerik.grid.js")
                     .Add("telerik.grid.filtering.js"))
%>

I've also tried this and I get an error while loading the master page:

(function(b){var a=b.telerik;var c=/"\\\/Date\((.*?)\)\\\/"/g;a.grid=function(g,h){this.element=g;this.sorted=[];this.groups...... blah blah blah

This is the "telerik.grid.min.js" file and I get the error "undefined is null or not an object" at the "a.grid" point..

Can you give me any help on this, please?

Thanks!!

PS: BTW, I'm using Teleric Q1 2010 MVC 2 controls.

[IQworks]

  Hi ,
   Not sure this is exactly what you need.
   But, it does use a tabstrip to load an ajax grid. 
   http://www.telerik.com/community/code-library/aspnet-mvc/grid.aspx 
   Even though it is an MVC1 project, when I went to MVC2 it worked the same.

   good luck !

[Joan Vilariño]

Thanks. I already solved this issue by including the proper .js from telerik in the main .aspx ... it seems that the scripts get registered when a component uses them, so as the page loads without any grid, all the "telerik.grid.xxxxxxx.js" don't get loaded, and the .ascx that should have registered them in the registrar loads using ajax after the registrar is rendered, so you must register them manually.

[IQworks]

HI Joan, 
    Will keep that in mind.
thanks

[Greg Hendee]

Hi Joan,

Can you post more details on your solution? I am having the exact same problem, and don't quite follow what you did to correct it.

Thanks!

[Joan Vilariño]

Hi Greg... I'm sorry for the delay.. I wasn't tracking this post anymore.

The solution I found is easy. Let's say you have a Master.aspx page that owns the TabStrip component. This TabStrip has two tabs that get loaded on demand with "LoadFromContent", "Tab1.ascx" and "Tab2.ascx". One of these tabs has a Telerik.Grid control.

The problem is that ScriptRegistrar doesn't "see" the grid on master page, so it doesn't include the grid's .js files, and the Tab's view, doesn't have a ScriptRegistrar (it can't anyway because you can call ScriptRegistrar's Render one time per page).

The solution is to force loading of these .js files at the Master.aspx page, including them in the ScriptRegistrar, like this:

 

<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
      .Add("telerik.common.js")
      .Add("telerik.draganddrop.js")
      .Add("telerik.grid.js")
      .Add("telerik.grid.filtering.js")
      .Add("telerik.grid.editing.js")
      .Add("telerik.calendar.js")
      .Add("telerik.grid.grouping.js")
      .Add("telerik.datepicker.js")
      .Add("telerik.textbox.js")
%>

Of course, the number of scripts you have to load depends on the functionalities of the grid, for example, if your grid doesn't do editing you probably won't need "telerik.grid.editing.js" or "telerik.textbox.js" or "telerik.datepicker.js" and if your grid isn't groupable you won't need "telerik.grid.grouping.js".

Anyway to be on the safe side, you can always load them all as they may be cached already on the navigator, so it won't make data transfer any bigger...

Cheers

[Maria]

Thank you Joan. This helped me solve my problem!