Grid w/ Horizontal Scrolling & Removing Columns

[Ashleigh L]

We've got a grid set up to allow for horizontal scrolling (no vertical). We accomplished this by enabling scrolling on the grid, setting the width of the grid to 200px (which doesn't seem to actually restrict the width, which is strange), and setting individual widths on each of the columns, also in pixels.

var grid = $("#report_grid").kendoGrid({
    dataSource: jsonDataRemote,
    columnMenu: true,
    groupable: { showFooter: true },
    pageable: {
        refresh: true,
        pageSizes: [20, 50, 100],
        buttonCount: 5
    },
    sortable: {
        allowUnsort: true
    },
    dataBinding: onDataBinding,
    filterable: true,
    resizable: true,
    scrollable: true,
    width: "200px",
    columns: [
        { title: "Home Group", field: "HomeGroup", width: "125px" },
        { title: "Learner", field: "LearnerName", width: "125px" },
        { title: "Learner Wage", field: "LearnerHourlyWage", width: "80px", sortable: false, groupable: false },
        { title: "Learner Hours", field: "LearnerHours", width: "92px", groupable: false },
        { title: "Learner Cost", field: "LearnerCost", width: "84px", groupable: false },
        { title: "Trainer", field: "TrainerName", width: "125px" },
        { title: "Trainer Wage", field: "TrainerHourlyWage", width: "80px", sortable: false, groupable: false },
        { title: "Trainer Hours", field: "TrainerHours", width: "92px", groupable: false },
        { title: "Trianer Cost", field: "TrainerCost", width: "80px", groupable: false },
        { title: "Extra Cost Description", field: "ExtraCostDescription", width: "125px" },
        { title: "Extra Cost Amt", field: "ExtraCostAmount", width: "92px", groupable: false },
        { title: "Total Cost", field: "TotalTrainingCost", width: "94px", aggregates: ["sum"], groupFooterTemplate: "<div class='f-right'>Sub Total: #=kendo.toString(sum, 'n2')#</div", footerTemplate: "<div class='f-right'>Total: #=kendo.toString(sum, 'n2')#</div", groupable: false },
        { title: "Training Type", field: "TrainingType", width: "125px" },
        { title: "Course", field: "CourseName", width: "125px", template:
            "# var icon = '' #" +
            "# if (TrainingType == 'Online') { #" +
                "# icon = 'fa-icon-desktop' #" +
            "# } else if (TrainingType == 'External') { #" +
                "# icon = 'fa-icon-share-square-o' #" +
            "# } else if (TrainingType == 'SCORM') { #" +
                "# icon = 'fa-icon-cloud' #" +
            "# } #" +
            "<span><i class='#= icon # margin-right-5'></i>#= CourseName #</span>"
        },
        { title: "Session Date", field: "SessionDate", width: "125px", format:"{0:dd-MMM-yyyy h:mm tt}", groupable: false, template:
            "# if (SessionDate != '') { #" +
            "<div class=\'f-right'>#= SessionDate #</div>" +
            "# } #"
        },
        { title: "Completed Date", field: "CompletionDate", width: "125px", format:"{0:dd-MMM-yyyy}", groupable: false },
        { title: "Grade", field: "Grade", width: "125px", groupable: false }
    ]
}).data("kendoGrid");

This all works fine, however we noticed that when you start removing columns from the grid, via the option in the column header dropdown, at a certain point (probably when the columns no longer "fill" the grid width), the grid display "breaks" and starts showing empty space on the right (see attached image).

How can we prevent this from occurring?

 

Also, while this bug is my primary concern, I was also hoping someone could explain why setting the grid and column widths in px is necessary for horizontal scrolling, and how it will affect the responsiveness of the grid.

 

[Pavlina]

Hi,

I suggest you go through the forum thread below where a similar problem is discussed and see if the suggestions provided there will help you resolve it:
http://www.telerik.com/forums/showcolumn()-breaks-dynamic-column-sizing

Regards,
Pavlina
Telerik

 

 

[Ashleigh L]

Thanks, this bit:

+ enforce the default 100% width to both tables with an !important style.

#GridID > .k-grid-header > div > table,
#GridID > .k-grid-content > table
{
   width: 100% !important;
}

solved it for me. Removing columns now causes the remaining ones to shift their widths to fill up the remaining space. Adding columns back in works fine as well.

[Ashleigh L]

Seeing some odd behaviour in IE8 when removing the column you opened the menu from: http://recordit.co/a10Nksb3bR

Only happens in IE8, latest versions IE, Chrome and Firefox are fine. Is this a known issue/is the a timeline for fixing it?

[Pavlina]

Hello,

I am afraid that the issue is not a known one, nor is reproducible in our online demos, so please extract a runnable sample in a Kendo UI Dojo and we will be happy to help.

Regards,
Pavlina
Telerik