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

Resizing Columns that were loaded hidden does not work

3 Answers 451 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Todd
Top achievements
Rank 1
Todd asked on 02 Oct 2013, 02:39 PM
Hi,
  I have a Kendo grid that when loaded has most of its columns hidden.
c.Bound(p => p.ServiceCost).Hidden(true).Width(100).Format("{0:$0.00}");
              c.Bound(p => p.AddressLine1).Title("Address").Width(90);
              c.Bound(p => p.City).Width(90);
              c.Bound(p => p.State).Title("State").Width(75);
              c.Bound(p => p.Zip).Width(75);
              c.Bound(p => p.ContactName).Hidden(true).Title("Contact<br/>Name").Width(100);
              c.Bound(p => p.PhoneNumber).Hidden(true).Title("Site<br/>Phone").Width(120);
              c.Bound(p => p.PhoneExtension).Hidden(true).Title("Site<br/>Ext").Width(90);
              c.Bound(p => p.Fax).Hidden(true).Title("Site<br/>Fax").Width(100);
              c.Bound(p => p.Email).Hidden(true).Title("Site<br/>Email").Width(150);
              c.Bound(p => p.Website).Hidden(true).Title("Website").Width(200);
..etc

Then i have checkboxes with the an ID that matches the model name
....
<label class="clean"><input type="checkbox" id="ContactName" class="basicChk"/>Contact Name</label></td><td>
<label class="clean"><input type="checkbox" id="PhoneNumber" class="basicChk"/>Site Phone</label></td><td>
<label class="clean"><input type="checkbox" id="PhoneExtension" class="basicChk"/>Site Phone Ext.</label></td><td>
...etc
and some JS to tie them together
$(".basicChk").bind('click', function () {
    var grid = $('#Providers').data("kendoGrid");
    if (this.checked) {
        grid.showColumn(this.id);
    }
    else {
        grid.hideColumn(this.id);
    }
});

Using Kendo UI Web v2013.2.716 All columns after the initally visible ones do not let me resize them. I've seen a past forum sayings its been fixed but its from last year
http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/ie-8-bug-column-resize-handle-not-showing-on-dynamic-grid-columns.aspx

Any help or insight is greatly apprecited

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 03 Oct 2013, 08:54 AM
Hello Todd,

I am not able to reproduce the described problem (as the video below shows), but generally, setting pixel widths to all Grid columns is not recommended, as it leads to undesired side effects, including one related to column resizing - first the column widths are ignored, because their sum is too small (smaller than the Grid width). When you display a hidden column, all column widths are obeyed, because the Grid applies width to its <table> element. As a result, all columns jump. Similarly, when you start resizing a column, it jumps to match its set column width.

http://screencast.com/t/mrdYydwVJOn

Please refer to our documentation for more information on setting column widths:

http://docs.kendoui.com/api/web/grid#configuration-columns.width

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Todd
Top achievements
Rank 1
answered on 03 Oct 2013, 12:59 PM
Hi Dimo,

 Thanks for your reply. I set column widths since there are 80+ columns available to the user and i needed to have scrolling enabled to handle this. Since enabling scrolling causes weird behavior with column widths (most of the time the columns wouldn't be visible if the user added a lot to the page) I set them kind of like a minimum and wanted to let the user resize them if needed (but am having an issue with that)
In summary, i have the situation your documentation you linked describes 
"Explicit widths for all columns should be set ... if their sum exceeds the Grid width and the goal is to have horizontal scrolling."

Do you have an alternate way to deal with the above problem?
Here is a video of the columns not working as i described. You can see the first couple resize ok (a little finiky) but i can't get any of the initially hidden columns to display a resize cursor.
http://www.screencast.com/t/o4Sx3j9M
0
Dimo
Telerik team
answered on 04 Oct 2013, 11:08 AM
Hello Todd,

Thank you for the video, but I am still unable to reproduce the discussed column resizing problem locally. What I see as a difference in your video is that the Grid was horizontally scrollable. I tried that, but hidden columns were still resizable when shown.

Please provide a standalone runnable demo, so that I can test it locally.

Regards,
Dimo
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
Todd
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Todd
Top achievements
Rank 1
Share this question
or