Filter Multi Checkboxes - Menu Width

[AGB]

Hi Guys,

There appears to be a slight issue with 'Filter Multi-Checkboxes' whereby the vertical scrollbar is clipping list items.

This can be seen in the Grid / Filter Multi Checkboxes demo.

Hit the filter on the 'Product Name' column and scroll down to 'Jack's New England Clam Chowder' where you can see the last two characters are hidden by the scrollbar.

Now I appreciate I can override the CSS

.k-filter-menu.k-popup.k-group.k-reset.k-state-border-up {
  width: 200px;
}

to fix the menu width but this is not really a solution when the column data is unknown.

Another solution would be to add a horizontal scrollbar

.k-multicheck-wrap {
  overflow-x: auto;
}

But to me this just seems wrong when we are only taking about the space to show two more characters.

Therefore I have two questions

1) Do you consider this to be a bug and the calculation of the menu width should make allowances for a scrollbar to ensure all the data is seen.

2) If item 1 is not possible is there a way to dynamically increase the menu width say 10px in the filterMenuInit and columnMenuInit events so all data can be seen.

Regards
Alan

[Dimiter Topalov]

Hi Alan,

The observed undesired layout is caused by the fact that the width of the checkboxes container is calculated dynamically based on the contents, but if the number of items is big enough to cause the appearance of a vertical scrollbar, the width of that scrollbar cannot be taken into account.

You can use the following workaround to add the width of the scrollbar to the container's width after the width has been calculated. To achieve this, you need to handle the filterMenuInit event of the Grid:

// Grid configuration:
...
filterMenuInit: adjustWidth,
...

// Handler:
function adjustWidth(e){
  e.container.width('auto');
  var initialWidth = e.container.width();
  e.container.width(initialWidth + kendo.support.scrollbar());
}

I hope this helps.

Regards,
Dimiter Topalov
Telerik

[AGB]

Hi Dimiter,

Thanks for the reply.

It's a shame this display issue cannot be overcome within the grid code rather then having to add a function to filterMenuInit for every grid which utilizes this feature.

Anyway your workaround solution works great for normal filter menus but I am unable to apply the same methodology within the columnMenuInit event.

Can you please let me know which element needs to be targeted to achieve the same result as all the ones I have tried return a width of zero.

Regards
Alan

[Dimiter Topalov]

Hello Alan,

The columnMenuInit event follows the same principles as the filterMenuInit one:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-columnMenuInit

The column menu form element can be accessed via e.container.

You can check out the following dojo, demonstrating that the column menu's container automatically adjusts its height and width in accordance with its contents:

http://dojo.telerik.com/iyEDU

If you need further assistance, please explain in more details what exactly the issue you are having with the Grid's column menu is, and send us a runnable example (or modify the aforementioned dojo), to illustrate the problem, and help us provide more to-the-point assistance.

Regards,
Dimiter Topalov
Telerik

[AGB]

Hi Dimiter

The problem is your workaround only works when used in the filterMenuInit function. It does not work when run from the columnMeniInit function when "columnMenu: true" because e.container points to the column menu not the filter sub menu.

I have knocked together a quick dojo

    http://dojo.telerik.com/asEQE/2
    
which illustrates the problem.

Hit the column menu on the 'Product Name' column open the filter sub menu and scroll down to 'Jack's New England Clam Chowder' which you will see is clipped.

So my question is what code needs to be added to the columnMeniInit function to stop items being clipped.

Regards
Alan

[Dimiter Topalov]

Hello Alan,

When there are column menus, the filter menu is a sub-menu of the main column menu and the filterMenuInit event is no longer fired.

The e.container property refers to the jQuery column menu form element, and not to the filter menu form element, when used in the columnMenuInit event handler.

Accessing the Kendo UI FilterMultiCheck in the columnMenuInit event is not supported out-of-the-box, as it is part of the internal functionality of the Grid, and some custom jQuery logic should be applied. I have modified the discussed dojo to demonstrate a possible approach for achieving the desired effect:

http://dojo.telerik.com/asEQE/4

I hope this helps, but please note that such scenario is not officially supported, and there might be side effects.

Regards,
Dimiter Topalov
Telerik

[AGB]

Hi Dimiter,

Thanks for the updated dojo example.

But the the solution seems rather involved to overcome a simple issue, which to my mind should really be addressed in the underlying code that generates the 'k-filter-menu' form to make allowances for a scrollbar to ensure all the data is seen.

Regards
Alan

[Dimiter Topalov]

Hello Alan,

I agree that the solution seems complicated for a simple issue, and there might is a better way to achieve the desired behavior, but it will still have to involve getting the initial width of the element, after width: 'auto' has been applied, and then adding the width of the scrollbar to the initial one.

It would have been nice to have the discussed behavior out-of-the-box, but due to limitations beyond our control, when the CSS rule "width: 'auto'" is applied, the width of the corresponding element is calculated, based on the width of its dynamic content.

In order to add the width of the scrollbar when necessary, the initial width has to be known, and it is only known after the 'auto' width is applied and the element is rendered. There is no way to apply a CSS rule like "width: 'auto' + 17px;" for example.

Let us know if you have further questions about Kendo UI.

Regards,
Dimiter Topalov
Telerik