Forum Replies Created

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts

  • 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


    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).


    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.

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