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
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.
Hello jAndika,
Thank you for the update. I have done some further looking into this matter and have the following questions:
How are you building the url you use for the ajax post? What is the file type you use were you have the grid you are using as a partial, html, cshtml? Have you tried having the call to the loader just on the main page instead of all the partial views?
Sincerely, Mike P. Developer Support Engineer Infragistics, Inc. www.infragistics.com
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() )
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?
Sincerely,Mike P.Developer Support EngineerInfragistics, Inc.www.infragistics.com
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