This is a migrated thread and some comments may be shown as answers.

Grid w/ Horizontal Scrolling & Removing Columns

4 Answers 362 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ashleigh L
Top achievements
Rank 1
Ashleigh L asked on 14 Sep 2015, 03:31 PM

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.

 

4 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 16 Sep 2015, 02:23 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ashleigh L
Top achievements
Rank 1
answered on 16 Sep 2015, 03:30 PM

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.

0
Ashleigh L
Top achievements
Rank 1
answered on 16 Sep 2015, 05:44 PM

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?

0
Pavlina
Telerik team
answered on 18 Sep 2015, 03:50 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Ashleigh L
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Ashleigh L
Top achievements
Rank 1
Share this question
or