Dynamic Grid Width with columnautoresize

[bet32978Participant]

What I want to achieve: The grid should change its width depending on window size, and columns should be autoresized to show their whole content.
(using latest version)

I try to get this with the following code:

$(window).resize(function () {
    $("#MappingTable").jqxGrid({ width: $(window).width() - 100 });
    $("#MappingTable").jqxGrid('autoresizecolumns');
});

where MappingTable is my grid. Additionally I have to say, that there are too many columns to fit on screen, so I allways will need a horizontal scrollbar.
The initial size is set in the bindingcomplete event:

$("#MappingTable").on("bindingcomplete", function (event) {
    $("#MappingTable").jqxGrid({ width: $(window).width() - 100 });
    $("#MappingTable").jqxGrid('autoresizecolumns');
});

This is working, but once I resize the window, I get the following effect:
a) grid is resized as expected
b) a horizontal scrollbar occurs for a very short monement
c) scrollbar is gone and columns aren’t autoresized anymore.
How can I restore the correct state instead of c)?

Whole Setup:

    <script type="text/javascript">
        $(document).ready(function () {
            var getDataFields;
            var getColumnInfos;
            var dataFields;
            var columnInfos;
            var cvm;
            var resized = false;

            $.jqx.cookie.cookie("cvm", 'C11016034');

            cvm = $.jqx.cookie.cookie("cvm");

            if (undefined == cvm) {
                window.location.replace("Account/Login.aspx");
                return;
            }

            getDataFields = $.ajax({
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify({ className: 'VIP.classes.MappingTableElement' }),
                url: 'services/ColumnInfo.asmx/GetDataFields',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    datafields = JSON.parse(data.d);
                }
            });
            getColumnInfos = $.ajax({
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify({ className: 'VIP.classes.MappingTableElement' }),
                url: 'services/ColumnInfo.asmx/GetColumnInfos',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    columnInfos = JSON.parse(data.d);
                }
            });

            $.when(
                getDataFields,
                getColumnInfos
            )
            .done(function () {
                var source = {
                    type: "POST",
                    datatype: "json",
                    datafields: datafields,
                    url: 'services/MappingTableService.asmx/GetMappingTable',
                    cache: false,
                    root: 'data'
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify({ CVM: cvm }),
                    downloadComplete: function (data, textStatus, jqXHR) {
                        return JSON.parse(data.d);
                    },
                    cache: true,
                    autoBind: true
                });
                $("#MappingTable").jqxGrid({
                    width: 800,
                    source: dataAdapter,
                    editable: true,
                    sortable: true,
                    filterable: true,
                    columnsresize: true,
                    pageable: true,
                    autoheight: true,
                    pagesize: 25,
                    columns: columnInfos
                });
                $("#MappingTable").on("bindingcomplete", function (event) {
                    $("#MappingTable").jqxGrid({ width: $(window).width() - 100 });
                    $("#MappingTable").jqxGrid('autoresizecolumns');
                });
                //$("#MappingTable").on("pagechanged", function (event) { });
                //$("#MappingTable").on("pagesizechanged", function (event) { });
                $('#exportToExcel').jqxButton({ height: 25 });
                $('#exportToExcel').click(function () {
                    exportInfo = $('#MappingTable').jqxGrid('exportdata', 'json', null, true, null, false, null, 'UTF-8');
                    $('#gridData').val('');
                    $('#gridData').val(exportInfo);
                });
                $('#resizeColumns').jqxButton({ height: 25 });
                $('#resizeColumns').click(function () {
                    $("#MappingTable").jqxGrid('autoresizecolumns');
                });
            })
            .fail(function () {   //.fail() is callback for reject state 
                console.log('One of our promises failed');
            });

            $(window).resize(function () {
                $("#MappingTable").jqxGrid({ width: $(window).width() - 100 });
                $("#MappingTable").jqxGrid('autoresizecolumns');
            });
        });
    </script>

[HristoParticipant]

Hello bet32978,

You could use percentage to set width for the Grid and for different columns.
Please, take a look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts