jQuery UI Widgets Forums Layouts Layout and Docking Layout ASP.NET MVC 5- Grid not rendering inside a layout built in _Layout page

This topic contains 7 replies, has 2 voices, and was last updated by  Dimitar 4 years, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • SamSar
    Participant

    Hi,

    As you are aware of MVC project architectures, we do have a layout page which is like a master page.
    I wish to create a layout in this page so that it can be carried through out the site.
    So I did. No issue with that. As told by the ASP.NET Integration, I bundled, created a layout. worked fine till now.
    But when inside a view/Index page, After I created a jqxGrid and run the project,
    The Grid sure show up with the loading animation. But the data never rendered.

    I can sense that the @Renderbody is inside a layout page and that is the place where our content is going to be rendered.
    Do you see any issue there? because all the layouts must have initContent to display the contents of the layouts.

    Please help.

    • This topic was modified 4 years, 8 months ago by  SamSar.

    Dimitar
    Participant

    Hi SamSar,

    Please clarify your issue and differentiate between the ASP.NET “layout page which is like a master page” and your use of the jqxLayout widget. If you wish, share the widget’s initialization code so that we can take a look at it. Make sure the jqxGrid is initialized in its corresponding panel’s initContent callback function. And please specify if there are any errors thrown in your browser’s console.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    SamSar
    Participant

    Hello Dimitar,

    Thank you very much for the answer, My _Layout page is as below:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>@ViewBag.Title - My ASP.NET Application</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("New Application", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                    @Html.Partial("_LoginPartial")
                </div>
            </div>
        </div>
    
        <div class="container-fluid body-content">
            <div id="jqxMainLayout">
                <div id="divSideBar">some content here</div>
                <div id="jqxInnerLayout">
                    <!--The panel content divs can have a flat structure-->
                    <!--autoHideGroup-->
                    <div data-container="ToolboxPanel">
                        @Html.Partial("_MenuPage")
                    </div>
                    <div data-container="HelpPanel">
                        Help topics
                    </div>
                    <!--documentGroup-->
                    <div data-container="Document1Panel">
                        @RenderBody()
                    </div>
                    <div data-container="Document2Panel">
                        Document 2 content
                    </div>
                    <!--bottom tabbedGroup-->
                    <div data-container="ErrorListPanel">
                        <footer>
                            <p>&copy; @DateTime.Now.Year - Skillworks Technologies Private Limited</p>
                        </footer>
                    </div>
                    <!--right tabbedGroup-->
                    <div data-container="SolutionExplorerPanel">
                        <div id="solutionExplorerTree" style="border: none;">
    
                        </div>
                    </div>
                    <div data-container="PropertiesPanel">
    
                    </div>
                    <!--floatGroup-->
                    <div data-container="OutputPanel">
                        <div style="font-family: Consolas;">
                            <p>
                                Themes installation complete.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/bundles/jqxwidgets")
        @RenderSection("scripts", required: false)
    
        <script type="text/javascript">
          var layout = [{
                type: 'layoutGroup',
                orientation: 'horizontal',
                width: 900,
                minWidth: 550,
                height: 700,
                minHeight: 400,
                items: [{
                    type: 'documentGroup',
                    width: '12%',
                    minWidth: 100,
                    height: '100%',
                    minHeight: 400,
                    items: [{
                        type: 'documentPanel',
                        title: 'Document 1',
                        contentContainer: 'ToolboxPanel'
                    }]
                }, {
                    type: 'layoutGroup',
                    orientation: 'vertical',
                    width: '70%',
                    items: [{
                        type: 'documentGroup',
                        height: '70%',
                        minHeight: 300,
                        items: [{
                            type: 'documentPanel',
                            title: 'Document 1',
                            contentContainer: 'Document1Panel'
                        }]
                    }, {
                        type: 'tabbedGroup',
                        height: '30%',
                        pinnedHeight: 30,
                        items: [{
                            type: 'layoutPanel',
                            title: 'Error List',
                            contentContainer: 'ErrorListPanel'
                        }]
                    }]
                }, {
                    type: 'tabbedGroup',
                    width: '18%',
                    minWidth: 200,
                    items: [{
                        type: 'layoutPanel',
                        title: 'Solution Explorer',
                        contentContainer: 'SolutionExplorerPanel'
                    }, {
                        type: 'layoutPanel',
                        title: 'Properties',
                        contentContainer: 'PropertiesPanel'
                    }]
                }]
            }];
    
            $(document).ready(function () { 
                $('#jqxInnerLayout').jqxLayout({ width: 968, height: 700, layout: layout });
    //            $('#jqxInnerLayout').jqxDockingLayout({ width: 968, height: 700, layout: layout });
            });
        </script>
    
    </body>
    </html>
    

    Which will be in the Shared folder. Next is a view called items.

    
    @model IEnumerable<MyProject.Models.item>
    
    @{
        ViewBag.Title = "Index Page";
    }
    //I also tried referring to the scripts here again, as somebody suggested I tried to put them in another partial page and called it here.
    @section scripts{
    
        <script type="text/javascript">
    
            $(document).ready(function () {
    
                var url = "items/getItems";
                // prepare the data
                var itemtypesource  = @Html.Raw(Json.Encode(@ViewBag.PossibleitemTypes));
    
                var iTsource =
                    {
                        datatype:"json",
                        datafields: [
                            {name: 'itemTypeId', type: 'int'},
                            {name: 'typeName', type:'string'}
                        ],
                        id: 'itemTypeId',
                        localdata: itemtypesource
                    }
                var ITAdapter = new $.jqx.dataAdapter(iTsource, {
                    autoBind: true, id: 'itemTypeId'
                });
    
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'itemId', type: 'int' },
                        { name: 'itemName', type: 'string' },
                        { name: 'itemCode', type: 'string' },
                        { name: 'itemTypeId', value:'itemTypeId', values:{ source: ITAdapter.records, value:'itemTypeId', name:'typeName'}}
                    ],
                    id:'itemId',
                    url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source , {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                })
    
                // alert('here3');
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 650,
                    source: dataAdapter,
                    pageable: true,
                    autoheight: true,
                    sortable: true,
                    altrows: true,
                    enabletooltips: true,
                    editable: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'Item Type', columntype:'dropdownlist', datafield: 'itemTypeId', width: 250,
                          initeditor : function(row,cellvalue,editor,celltext,cellwidth,cellheight){
                              editor.jqxDropDownList({source: ITAdapter,displayMember:'typeName', valueMember:'itemTypeId'})}},
                      { text: 'Item Id', columngroup: 'Item', datafield: 'itemId', width: 100 },
                      { text: 'Item Name', columngroup: 'Item', datafield: 'itemName', cellsalign: 'right', align: 'right', width: 200 },
                      { text: 'Item Code', columngroup: 'Item', datafield: 'itemCode', align: 'right', cellsalign: 'right', width: 100 }
                    ],
                    columngroups: [
                        { text: 'Item Types', align: 'center', name: 'ItemType' },
                        { text: 'Item Details', align: 'center', name: 'Item' }
                    ]
                });
               // alert('here4');
            });
        </script>
    }
    <h3>Items</h3>
    
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;width:100%">
        <div id="jqxgrid">
        </div>
    </div>

    What I tried already is:
    1. These things separately works fine. (May be I’ve made few changes in _layout page)
    2. Adding Script references in both _layout and Index pages after removing the bundling in bundleconfig.
    3. Adding them to a different page and call it through RenderPartial, etc.

    So when this master page (layout page) loads the index page of items, it renders at the place @Renderbody. And this section is inside the documentlayout of a layout.

    • This reply was modified 4 years, 8 months ago by  SamSar.

    Dimitar
    Participant

    Hello SamSar,

    So you have a “master” page with the jqxLayout widget in it and in one of the jqxLayout’s document panels you are trying to display a “view” page with a jqxGrid inside? This should generally be possible, but you should make sure that the grid is initialized after the jqxLayout widgets. The initContent callback might be useful in this:

    items: [{
        type: 'documentPanel',
        title: 'Document 1',
        contentContainer: 'Document1Panel',
        initContent: function() {
            // ...
        }
    }]

    Please also check if there are any errors thrown in your browser’s console? Such exceptions are often informative and may shed light on the issue at hand. And which one of the dataAdapter callbacks loadComplete and loadError is called?

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    SamSar
    Participant

    It was very useful to have the console window to identify few of the missing images which are internally used (pin.png). I corrected it. But that doesn’t solve the problem.
    loadComplete, loadError do not call any function as I don’t need them, but I gave alert and they trigger for the first case, but do not trigger in the latter.

    I have a working code here with screenshots.

    The thing is It works well when I place my @RenderBody() tag outside the layout

     <div id="mainSplitter">
                <div>
                   @RenderBody()
                </div>
                <div>
                    <div id="firstNested">
                        <div>
                            <div id="secondNested">
                                <div>
                                    <div data-container="jqxLayout" id="jqxLayout">
                                        <!--autoHideGroup-->
                                        <div data-container="ToolboxPanel">
                                            List of tools
                                        </div>
                                        <div data-container="HelpPanel">
                                            Help topics
                                        </div>
                                        <!--documentGroup-->
                                        <div data-container="Document1Panel">
                                         <!-- I want my @RenderBody() to be here but it's been removed and placed above for testing -->
                                        </div>
                                        <!--   <div data-container="Document2Panel">
                                        Document 2 content</div> -->
                                        <!--bottom tabbedGroup-->
                                        <div data-container="ErrorListPanel">
                                            List of errors
                                        </div>
                                        <!--  <div data-container="OutputPanel">
                                        Output</div> -->
                                        <!--right tabbedGroup-->
                                        <div data-container="SolutionExplorerPanel">
                                            Solution structure
                                        </div>
                                        <div data-container="PropertiesPanel">
                                            List of properties
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <span>Panel 3</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <span>Panel 4</span>
                        </div>
                    </div>

    For this change below is the output
    working_image

    For the change I do in my div layout as below I do not get the grid.

    <div id="mainSplitter">
                <div>
                    Left panel. 
                </div>
                <div>
                    <div id="firstNested">
                        <div>
                            <div id="secondNested">
                                <div>
                                    <div data-container="jqxLayout" id="jqxLayout">
                                        <!--autoHideGroup-->
                                        <div data-container="ToolboxPanel">
                                            List of tools
                                        </div>
                                        <div data-container="HelpPanel">
                                            Help topics
                                        </div>
                                        <!--documentGroup-->
                                        <div data-container="Document1Panel">
                                         @RenderBody() <!-- Render body is moved back here which do not work -->
                                        </div>
                                        <!--   <div data-container="Document2Panel">
                                        Document 2 content</div> -->
                                        <!--bottom tabbedGroup-->
                                        <div data-container="ErrorListPanel">
                                            List of errors
                                        </div>
                                        <!--  <div data-container="OutputPanel">
                                        Output</div> -->
                                        <!--right tabbedGroup-->
                                        <div data-container="SolutionExplorerPanel">
                                            Solution structure
                                        </div>
                                        <div data-container="PropertiesPanel">
                                            List of properties
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <span>Panel 3</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <span>Panel 4</span>
                        </div>
                    </div>
                </div>

    working_image

    All other things are fine since the data is loading… And I can see desired output if the grid is not inside the layout of the master page(shared _layout).


    Dimitar
    Participant

    Hi SamSar,

    Your images are not accessible to us.

    Here is what the sequence of events should be regarding the “view” page and the jqxLayout widget:

    1. Before the jqxLayout initialization code is called, the HTML of the “view” page has to be in the div Document1Panel. The JavaScript of the “view” page should not be executed yet.
    2. Call the “view” page JavaScript code in the “Document 1” initContent callback function, as suggested in a previous post of mine.

    However, if this is not achievable in your situation, you can try to both “inject” the HTML and run the JavaScript in initContent. For that, you may make use of initContent’s parameter – the jQuery object of the panel’s content div:

    initContent: function (contentDiv) {
        // ...
    }

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    SamSar
    Participant

    Hi Dimitar,

    I can’t change or do something in the _layout page since it’s common to many such view pages, which may or may not have such grids.
    So using the initContent is ruled out. I understand technically what must go first and what must follow.
    And As far as my knowledge and thinking goes, that’s what the execution order is, first it renders the jqxGrids(View) and then the jqxLayout(_layout).
    For clarification(http://stackoverflow.com/questions/8194369/razor-page-lifecycle-in-asp-net-mvc)

    Anyways, I thank you very much for your time and help. I’m checking with alternatives, something like jqxSplitters in _layout page by compromising a little. And I see no issues with that.

    – SamSar


    Dimitar
    Participant

    Hi SamSar,

    I am sorry we could not offer you a better solution. If you need any other kind of assistance, our team will be glad to be of help.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.