Hi,
I'm having issues when trying to use .NET MVC Partial View with igLoader. Here's the scenario:
- I have a page with several tabs and each tab is an MVC partial view. The first tab does not have igGrid, and it loads just fine. On the second tab, it has a grid and when it tries to load the partial view I'm getting two errors:
"Cannot read property 'locale' of undefined" and "Uncaught Error: No such widget loaded: igGridPaging"
This happens both on IE9 and Chrome.
What I found is that when I'm not using partial view, the generated script for a control always have the widget name in front of it. so for instance:
$.ig.loader('igCombo', function() {})
However, when the control is on a partial view, the generated script does not have the widget name in front of it
$.ig.loader(function() {$('controlId')....})
I'm using MVC helper and the latest service release 2056
Please help
Hello jAndika,
Thank you for contacting Infragistics!
I have a few questions concerning this matter. Can you please clarify what version of Ignite UI you are using v12.1 or v12.2? What version of Chrome are you using? Have you tried it in FireFox?
Looking forward to hear from you.
Sincerely,Mike P.Developer Support EngineerInfragistics, Inc.www.infragistics.com
I'm using v12.2, and I just actually updated the scripts today to the latest SR 2086 but the issue is still there. It does not work in Firefox as well.
Chrome Version: 24.0.1312.52 m
Firefox Version: 17.0.1
Mike,
I'm using the Razor view engine, and I do use the MVC helper. What I meant in the earlier post is the script generated on the browser, so I used browser's developer tool to view the source.
Thanks for the sample. What's different is that you're doing this: @{Html.RenderPartial("ViewUserControl1");}
What I did on my screen is I have a <div> tag holder, and then do an AJAX call to get the partial view and append it to the <div> tag on success.
Can you try that ?
Thanks
Thank you for the update. Would you be able to provide a small of example of what you are doing there so I can take a look at how you are inserting the partial view?
Ok, so I have this html on my cshtml file:
<div id="tabs"> <ul> <li><a href="#General" tabindex="-1" onclick="getTabContent(1);">General</a></li> <li><a href="#Accounts" tabindex="-1" onclick="getTabContent(2);">Customer Accounts</a></li> <li><a href="#Items" tabindex="-1" onclick="getTabContent(3);">Items</a></li> <li><a href="#Groups" tabindex="-1" onclick="getTabContent(4);">Groups</a></li> </ul> <div id="General"> @Html.Partial("GeneralTabView", Model) </div> <div id="Accounts"> </div> <div id="Items"> </div> <div id="Groups"> </div> </div>
inside the getTabContent javascript method I have this which gets a partial view from the server, and appends it to the right div:
$.ajax({ type: "post", url: url, data: $('form').serialize(), success: function (response) { $(targetDiv).html(response); PrepLoadedTabs(targetDiv); }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(xhr.responseText); } });
When I go to the second, third, or fourth tab is when I'm getting the error. Inside the partial view for each tab I have the regular loader with infragistics grid. The grid has all the features on: paging, sorting, hiding, filtering, updating, resizing.
@(Html.Infragistics().Loader() .ScriptPath(Url.Content("~/Scripts/IG/")) .CssPath(Url.Content("~/Content/IG/")) .Render() )
Hi jAndika,
I believe that what you're observing is a limitation of igLoader, but I have to investigate it further.
I'll keep you informed about the outcome of my investigation.
For now try to put a loader configuration in the main view and use Resources() method to declare the paging, sorting, hiding, filtering, updating, resizing explicitly. This way the paging will already be loaded when the partial view gets loaded. You can also remote the loaders in the partial view.
Best regards,
Martin Pavlov
Infragistics, Inc.
Thanks.. please keep me updated.
I did try specifying Resources() in the main page igLoader, and it works. However, it seems like when you specify resources like for example .Resources('igGrid.Paging'), the loader only loads the one that we specify, is that right ? Can you explain to me how does the loader work when we specify/not specify resources to load ?
Also, what do you mean by remote the loaders in the partial view ?
I forgot to mention this, but I do have igLoader both on the main page and the partial views.
Jeffrey
Hello Jeffery,
I am following up to see if you have been able to test the sample Martin has provided? What was the result?
Please let me know if I may be of further assistance with this matter.
Sincerely,Mike P.Developer Support Engineer IIInfragistics, Inc.www.infragistics.com
Hi Jeffrey,
First, I was unable to reproduce the behavior which you describe.
I'm attaching my test project so that you can look into it. Can you try to reproduce the problem with my project?
jAndika said:Can you explain to me how does the loader work when we specify/not specify resources to load ?
Ignite UI MVC control wrappers (For example: Grid) generate code based on whether MVC loader instance is already defined on the page or not. When control detects Loader on the page it generates code like this one:
$.ig.loader("igGrid.Paging", function () { /* control initialization code */} );
This code depends on the loader.
When the control doesn't detect loader on the page it generates code like this one:
$(function() { /* control initialization code */ });
This code doesn't depend on the loader.
This behavior ensures that we support both loader and non-loader scenarios.
Basically MVC Loader wrapper doesn’t require Resources() method to be used, because controls declare the resources themselves when their JavaScript code is serialized by using the syntax described previously.
The code that you see:
means that the resources for control with id='controlId' should already be loaded on the page and there is no need to load them again. You can see this by inspecting the code from the Groups parial view in my project.
However that is not always the case as described in this forum thread: http://ko.infragistics.com/community/forums/p/76889/388644.aspx#388644
Based on this information I conclude that the code $.ig.loader(function() {$('controlId')....}) can run before the resources are loaded and this error appears, but in this case this error should appear randomly.
jAndika said:Also, what do you mean by remote the loaders in the partial view ?
remote=remove (it was a syntactic mistake). However ignore this sentence because in the partial view you need loader.
jAndika said: I forgot to mention this, but I do have igLoader both on the main page and the partial views.
That's ok.
Best regards,Martin PavlovInfragistics, Inc.
Thank you for the update. When you use the .resources it loads only the resources you tell it to. You can find more information about this in the following link:
http://help.infragistics.com/NetAdvantage/jQuery/2012.2/CLR4.0?page=Using_Infragistics_Loader.html
So the loader is used when you want to load specific resources as described.
I am still looking into setting up the url.action to load the partial view. I will continue to look into this matter and will give you a progress update by the end of the day tomorrow.