Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Kristopher Kunkel
275
igrid not displaying in View despite related data and igrid JS in pagesource
posted

I am having a problem making the IgniteUI igrid display in an MVC view. This is despite the fact that it appears, at least to me, that the appropriate data and igrid JavaScript are being retrieved and generated, 

For example, the html wrapper generates the following, as viewed from the page source:

<table id="igUserManagement"></table>
<script type="text/javascript">$(function () {$('#igUserManagement').igGrid({ dataSourceUrl: '/Administration/UserManagement/GetData',dataSource: {"Records":[{"UserGUID":"f0847456-4d31-4e89-abb6-e3cd678aea20","UserName":"ROTestAdmin","UserNameNew":null,"Password":null,"Email":"someemail.gmail.com","Profile":{"UserGUID":"f0847456-4d31-4e89-abb6-e3cd678aea20","SynagogueShortID":"WkuXbMkOEE-OC_gMqiKfxg","FirstName":"John","LastName":"Admin","Phone":"555111111","PhoneMobile":"5552222222","PhoneWork":"8557257874"}}],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-25200000}},dataSourceType: 'json',autoGenerateColumns: false,autoGenerateLayouts: false,mergeUnboundColumns: false, responseDataKey: 'Records', generateCompactJSONResponse: false, enableUTCDates: true, columns: [ { key: 'UserGUID', dataType: 'string', hidden: true }, { key: 'UserName', dataType: 'string', headerText: 'Username' }, { key: 'FirstName', dataType: 'string', headerText: 'First Name' }, { key: 'LastName', dataType: 'string', headerText: 'Last Name' }, { key: 'Email', dataType: 'string', headerText: 'Email' }, { key: 'Phone', dataType: 'string', headerText: 'Phone' }, { key: 'PhoneMobile', dataType: 'string', headerText: 'Mobile' }, { key: 'PhoneWork', dataType: 'string', headerText: 'Work' }, { key: 'UserNameNew', headerText: 'UserNameNew', width: null, dataType: 'string' }, { key: 'Password', headerText: 'Password', width: null, dataType: 'string' }, { key: 'Profile', headerText: 'Profile', width: null, dataType: 'string' } ], features: [ { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting', type: 'local', mode: 'single' }, { filterExprUrlKey: 'filter', filterLogicUrlKey: 'filterLogic', name: 'Filtering', type: 'local' }, { name: 'GroupBy', resultResponseKey: 'GroupBy', groupByUrlKey: 'sort', groupByUrlKeyAscValue: 'asc', groupByUrlKeyDescValue: 'desc', type: 'local' }, { name: 'Hiding' }, { name: 'Selection', mode: 'row', multipleSelection: true }, { name: 'RowSelectors' }, { name: 'Resizing' }, { name: 'Tooltips', visibility: 'always' } ], height: '550px', width: '100%', localSchemaTransform: false });});</script>

And to emphasize the fact that I dont see the grid, here is a screen shot of empty space as I see it on the generated view (red of course added by me =) )

No Grid! 

As I'm fairly new to IgniteUI, it's more than likely that I am forgetting a required wrapper method or library reference. Any help from those with more experienced eyes would be much appreciated!

To help figure out what I might be doing wrong I will include, in an archive, the controller and view code and the generated view

IgniteHelpCode.rar
  • 29417
    Verified Answer
    Offline posted

    Hello Kristopher ,

     

    Thank you for posting in our forum.

    I’ve looked through your code and most probably the loader and the resources are not being loaded.

    I see that you’re setting them in a section. Are you rendering that section on one of the Shared views?

     

    Keep in mind that the loader and its related scripts need to be loaded on the same view on which the grid is defined. Otherwise you would have to set the Resources of the Loader’s wrapper to include the grid so that it will know for which controls' resources it should load .

    For example:

    @(

                Html.Infragistics().Loader()

                    .ScriptPath(Url.Content("~/Infragistics/js/"))

                    .CssPath(Url.Content("~/Infragistics/css/"))

                    .Resources("igGrid")

                    .Render()

            )

    Also note that the path to the ig loader script needs to point to the Infragistics.loader.js file. I see that you’ve set:

    <script src="@Url.Content("~/samplescommon/jQuery/common/js/infragistics.loader.js")"></script>

     

    If your local scripts are in the Infragistics/js folder then this should be:

    <script src="/Infragistics/js/infragistics.loader.js"></script>

     

    Let me know if you have any questions or concerns.

     

     

    Best Regards,

    Maya Kirova

    Developer Support Engineer II

    Infragistics, Inc.

    http://es.infragistics.com/support