[igTreeGrid] Grid not spanning over full width + missing feautures

[arruw]

I'm using version 2016.2.

TreeGrid is not spanning over full parent container width. I have set width: '100%', also tried with and without defaultColumnWidth: '*'.

I have checked html layout with dev tools, and found out that #treeGrid is spanning over full width, but table#treeGrid_table don't.

Without defaultColumnWidth: '*' grid is event more narrow.

I'm also missing checkboxes.

    var data = [{"Id":"08820149-32c9-4f15-91d9-12a62e81d66c","Name":"ABC","Nodes":[{"Id":"de8b741b-de35-439e-8f4d-78a5438a9e30","Name":"1231213","Nodes":[{"Id":"05b173a3-b3d1-4240-863c-55cc76b76693","Name":"qweqew","Nodes":[],"ValidFrom":"2016-12-22T00:00:00","ValidTo":"2017-01-01T00:00:00"}]}]}];

    $(function () {
        $('#treeGrid').igTreeGrid({
            autoGenerateColumns: false,
            width: '100%',
            dataSource: data,
            primaryKey: 'Id',
            childDataKey: 'Nodes',
            initialExpandDepth: 2,
            defaultColumnWidth: '*',
            columns: [
                { headerText: 'Id', key: 'Id', dataType: 'string', hidden: true },
                { headerText: 'Name', key: 'Name', dataType: 'string' },
                { headerText: 'ValidFrom', key: 'ValidFrom', dataType: 'date' },
                { headerText: 'ValidTo', key: 'ValidTo', dataType: 'date' }
            ],
            features: [
                {
                    name: 'RowSelectors',
                    enableCheckBoxes: true,
                    enableRowNumbering: false
                },
                {
                    name: 'Selection',
                    multipleSelection : true
                }
            ]
        });
    });

[kdinev]

@matjazmav Could you attach the whole html file?

[arruw]

@kdinev We are using ASP.NET MVC do you need .cshtml or generated .html?

[arruw]

This is just a part of generated html file:

<div class="modal in" tabindex="-1" role="dialog" data-backdrop="static" style="display: block; z-index: 1060;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Razporeditve</h4>
            </div>
            <div class="modal-body">
                <div id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133">
                    <div id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_container" tabindex="0" class="ui-widget ui-helper-clearfix ui-corner-all ui-iggrid ui-igtreegrid"
                        style="width: 100%; position: relative;">
                        <div id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_scroll" class="ui-iggrid-scrolldiv ui-widget-content igscroll-touchscrollable"
                            data-scroll="true" data-onedirection="true" style="overflow-y: hidden; overflow-x: auto;">
                            <table role="treegrid" id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table"
                                aria-multiselectable="true" aria-describedby="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_scroll"
                                cellpadding="0" cellspacing="0" border="0" class="ui-iggrid-table ui-widget-content ui-iggrid-canceltextselection"
                                style="/* width: 261px; */table-layout: fixed;">
                                <colgroup>
                                    <col data-skip="true" data-role="rs" style="width: 55px;">
                                    <col style="width: 75px;">
                                    <col style="width: 75px;">
                                    <col style="width: 56px;">
                                </colgroup>
                                <thead role="rowgroup">
                                    <tr data-header-row="" role="row">
                                        <th id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_Name" role="columnheader"
                                            aria-label="Name" tabindex="0" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">Name</span></th>
                                        <th id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_ValidFrom"
                                            role="columnheader" aria-label="ValidFrom" tabindex="0" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">ValidFrom</span></th>
                                        <th id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_ValidTo"
                                            role="columnheader" aria-label="ValidTo" tabindex="0" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">ValidTo</span></th>
                                    </tr>
                                </thead>
                                <tbody role="rowgroup" class="ui-widget-content ui-iggrid-tablebody ui-ig-record ui-iggrid-record">
                                    <tr class="ui-igtreegrid-rowlevel0" data-row-idx="0" aria-level="0" data-id="08820149-32c9-4f15-91d9-12a62e81d66c"
                                        id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_08820149-32c9-4f15-91d9-12a62e81d66c"
                                        aria-owns="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_de8b741b-de35-439e-8f4d-78a5438a9e30"
                                        aria-expanded="true" role="row" tabindex="0" aria-selected="false" data-populated="1">
                                        <td role="gridcell" aria-readonly="false" aria-describedby="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_Name"
                                            tabindex="0" class="ui-igtreegrid-expansion-indicator-cell" data-expand-cell="1"><span data-expandcell-indicator="1" class="ui-igtreegrid-expandcell" style="padding-left:0px;"><span data-expand-button="" class="ui-icon ui-igtreegrid-expansion-indicator ui-icon-minus" title="Collapse Row" tabindex="0"></span></span>ABC</td>
                                        <td
                                            role="gridcell" aria-readonly="false" aria-describedby="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_ValidFrom"
                                            tabindex="0" class="">&nbsp;</td>
                                            <td role="gridcell" aria-readonly="false" aria-describedby="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_ValidTo"
                                                tabindex="0" class="">&nbsp;</td>
                                    </tr>
                                    <tr class="ui-igtreegrid-rowlevel1 ui-ig-altrecord ui-iggrid-altrecord" data-row-idx="1"
                                        aria-level="1" data-id="de8b741b-de35-439e-8f4d-78a5438a9e30" id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_de8b741b-de35-439e-8f4d-78a5438a9e30"
                                        aria-owns="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_05b173a3-b3d1-4240-863c-55cc76b76693"
                                        aria-expanded="true" role="row" tabindex="0" aria-selected="false" data-populated="1">
                                        <td role="gridcell" aria-readonly="false" aria-describedby="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_Name"
                                            tabindex="0" class="ui-igtreegrid-expansion-indicator-cell" data-expand-cell="1"><span data-expandcell-indicator="1" class="ui-igtreegrid-expandcell" style="padding-left:30px;"><span data-expand-button="" class="ui-icon ui-igtreegrid-expansion-indicator ui-icon-minus" title="Collapse Row" tabindex="0"></span></span>1231213</td>
                                        <td
                                            role="gridcell" aria-readonly="false" aria-describedby="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_ValidFrom"
                                            tabindex="0" class="">&nbsp;</td>
                                            <td role="gridcell" aria-readonly="false" aria-describedby="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_ValidTo"
                                                tabindex="0" class="">&nbsp;</td>
                                    </tr>
                                    <tr class="ui-igtreegrid-rowlevel2" data-row-idx="2" aria-level="2" data-id="05b173a3-b3d1-4240-863c-55cc76b76693"
                                        id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_05b173a3-b3d1-4240-863c-55cc76b76693"
                                        role="row" tabindex="0" aria-selected="false">
                                        <td role="gridcell" aria-readonly="false" aria-describedby="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_Name"
                                            tabindex="0" class="ui-igtreegrid-expansion-indicator-cell" data-expand-cell="1"><span data-expandcell-indicator="1" class="ui-igtreegrid-expandcell" style="padding-left:60px;"></span>qweqew</td>
                                        <td
                                            role="gridcell" aria-readonly="false" aria-describedby="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_ValidFrom"
                                            tabindex="0" class="">22.12.2016</td>
                                            <td role="gridcell" aria-readonly="false" aria-describedby="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_ValidTo"
                                                tabindex="0" class="">1.1.2017</td>
                                    </tr>
                                </tbody>
                                <tfoot role="rowgroup" class="" id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_footer_container"
                                    style="display: none;"></tfoot>
                            </table>
                        </div><span id="jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133_table_container_loading"
                            class="ui-igloadingmsg" style="left: 284px; top: 12.5px; visibility: hidden; display: none;"></span></div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="jobAssignmentsDialog_submit_60940962-20a5-44cf-a66a-4a7659958133" type="button" class="btn btn-primary">Shrani</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Zapri</button>
            </div>
            <script type="text/javascript">
                var data = [];

                data = [{
                    "Id": "08820149-32c9-4f15-91d9-12a62e81d66c",
                    "Name": "ABC",
                    "Nodes": [{
                        "Id": "de8b741b-de35-439e-8f4d-78a5438a9e30",
                        "Name": "1231213",
                        "Nodes": [{
                            "Id": "05b173a3-b3d1-4240-863c-55cc76b76693",
                            "Name": "qweqew",
                            "Nodes": [],
                            "ValidFrom": "2016-12-22T00:00:00",
                            "ValidTo": "2017-01-01T00:00:00"
                        }]
                    }]
                }];

                $('#jobAssignmentsDailog_tree_60940962-20a5-44cf-a66a-4a7659958133').igTreeGrid({
                    autoGenerateColumns: false,
                    width: '100%',
                    dataSource: data,
                    primaryKey: 'Id',
                    childDataKey: 'Nodes',
                    initialExpandDepth: 2,
                    defaultColumnWidth: '*',
                    columns: [{
                        headerText: 'Id',
                        key: 'Id',
                        dataType: 'string',
                        hidden: true
                    }, {
                        headerText: 'Name',
                        key: 'Name',
                        dataType: 'string'
                    }, {
                        headerText: 'ValidFrom',
                        key: 'ValidFrom',
                        dataType: 'date'
                    }, {
                        headerText: 'ValidTo',
                        key: 'ValidTo',
                        dataType: 'date'
                    }],
                    features: [{
                        name: 'RowSelectors',
                        enableCheckBoxes: true,
                        enableRowNumbering: false
                    }, {
                        name: 'Selection',
                        multipleSelection: true
                    }]
                });
            </script>
        </div>
    </div>
</div>

[kdinev]

@matjazmav The cshtml would suffice. However, I think I know what the issue is. I see that the tree grid is in a modal dialog, and I assume it's instantiated when the modal is not visible yet. Let me know if that's not the case.

At instantiation time, the grid container needs to have dimensions. In the case of a modal dialog, the container is display: none, so dimensions are 0x0. Thus all sizing calculations are wrong. What you can do is either delay the instantiation of the tree grid until the modal is opened, or instantiate it in a container outside of the modal, and then move it inside the modal dialog.

[arruw]

@kdinev I have moved initialization to shown.bs.modal event handler. I have also removed width & defaultColumnWidth from options. Now grid take full width.

However I still have problem with features: [...], if I remove comment from follwing snipet grid get deformed, and checkboxes are still missing.

$('#jobAssignmentsDailog_tree_bbfaa777-19c6-4455-a343-af63a690b5b2').closest('.modal').on('shown.bs.modal', function () {
        debugger;

        $('#jobAssignmentsDailog_tree_bbfaa777-19c6-4455-a343-af63a690b5b2').igTreeGrid({
            autoGenerateColumns: false,
            dataSource: data,
            primaryKey: 'Id',
            childDataKey: 'Nodes',
            initialExpandDepth: 2,
            columns: [
                { headerText: 'Id', key: 'Id', dataType: 'string', hidden: true },
                { headerText: 'Name', key: 'Name', dataType: 'string' },
                { headerText: 'IsPrimary', key: 'IsPrimary', dataType: 'string' }
            ]//,
            //features: [
            //    {
            //        name: "RowSelectors",
            //        enableCheckBoxes: true,
            //        enableRowNumbering: false
            //    },
            //    {
            //        name: "Selection",
            //        multipleSelection : true
            //    }
            //]
        });
    });

[kdinev]

@tiagata Could you chip in on this? This may actually be a bug.

[arruw]

@kdinev @tiagata Let me know :) Thanks!

[m-hristov]

@matjazmav I have tried with RowSelectors and Selection features enabled and it works properly on my machine(I'm using your code snippet). So how did you reference our JS files - do you use $.ig.loader. Did you get any JavaScript errors?

[arruw]

@m-hristov We are using ASP.NET MVC js files are inside boundles, I'm sure that they are referenced correctly, because all other components work. We are referencing .core.js and .lob.js. No javascript errors and I'm not using $.ig.loader, should I? I'll let you know if found anything more.

[kdinev]

@matjazmav You don't need to use the loader. Could you try to take the tree grid out of the modal dialog, just to test if you would still reproduce the same behavior with the row selectors and the selection features?

[m-hristov]

@matjazmav I am attaching a sample - I've tested treeGrid in both scenarios - with/without jQueryUI dialog. PS: GitHub does not allow me to upload ZIPPed the html sample file , so I am sending it as '*.html.txt' - please remove '.txt' extension test.html.txt

[kdinev]

@matjazmav Did you get everything to work as expected? Should I be closing this issue?

[arruw]

Yes :)

[kdinev]

@matjazmav Great! Closing it :)