hide grid toolbar template using media property

[Bob]

I am a little frustrated by the lack of responsive properties of the grid. I can live with the problem of having to use the media property and kendo-grid-span-column directive for columns but why can't I also hide the toolbar on smaller devices?  Surely the best method here would be to have the media property follow standard grid principles.  For example a grid with four columns could have media="col-2", media="col-3", media="col-5", media="col-2" and the hidden property could have [hidden]="sm" etc.  To stack using the kendo grid we need to duplicate code like so:

<!-- any device bigger than 360px -->
<kendo-grid-column
    field="displayName"
    title="{{ l('DisplayName')}}"
    [minResizableWidth]="140"
    width="140"
    media="(min-width: 361px)">
</kendo-grid-column>
<kendo-grid-column
    field="organizationUnit.id"
    title="{{ l('OrganizationUnits')}}"
    [minResizableWidth]="100"
    media="(min-width: 361px)">
    <ng-template kendoGridFilterMenuTemplate
        let-column="column"
        let-filter="filter"
        let-filterService="filterService">
        <multi-check-filter
            [isPrimitive]="false"
            [field]="column.field"
            [currentFilter]="filter"
            [filterService]="filterService"
            textField="displayName"
            valueField="id"
            [data]="locations">
        </multi-check-filter>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
        {{dataItem.organizationUnit?.displayName}}
    </ng-template>
</kendo-grid-column>
<!-- typical Android (360px) -->
<kendo-grid-span-column>
    <kendo-grid-column
        field="displayName"
        title="{{ l('DisplayName')}}"
        media="(max-width: 360px)"
        [columnMenu]="false">
    </kendo-grid-column>
    <ng-template kendoGridCellTemplate let-dataItem>
        <h4>{{dataItem.displayName}}</h4>
        <p>{{dataItem.organizationUnit?.displayName}}</p>
    </ng-template>
</kendo-grid-span-column>

But even then we can't hide the toolbar on smaller devices.  Why won't a simple directive instruction like this for the toolbar template:

<ng-template kendoGridToolbarTemplate media="(max-width: 360px)">
    <button type="button" kendoGridExcelCommand [icon]="'file-excel'">{{ l('ExportToExcel')}}</button>
    <kendo-grid-column-chooser class="pull-right"></kendo-grid-column-chooser>
</ng-template>

When I started with the angular grid I thought I was going to get a lot of modern way of looking at things but it seems that the underlying code is generating css like we did 10 years ago when we were working with Telerik and Visual Basic and had 34 columns in a window which more or less worked like a spreadsheet.  The documentation points to the widgets using a container which does not work well with Bootstrap because the Bootstrap container is 'non-default'.  Come on guys, DevExpress grids stack, as do PrimeNG grids as do data tables (the list goes on).

Your widgets are so well thought out they are a pleasure to work with and I have worked with the MVC and JQuery stuff for a decade or so.  Your scheduler has given me the opportunity to close so many deals I can't begin to count them all.  I am so looking forward to the angular version.  Your widgets are brilliant and your support is second to none.  Your forums have a wealth of information your competitors must look on with envy.

But your approach to responsiveness is just so poor.  Come one guys, give us something to shout about.  Is there anything on the roadmap to change your approach or are you going to hang on to a css foundation which has the same footprint as a fossilised dinosaur?

Rant over, keep up the good work but please give us some good news on responsiveness because if the scheduler has the same problem it's game over.  I really don't want to go and try the other options on the market but it's the device which is driving the market, not the functionality.

 

 

 

[Alex Gyoshev]

Hello Bob,

Thank you for your feedback, it provides good highlights on what responsive features can be improved. The current column responsiveness features allow you full control over the behavior, but they indeed require too much code. Perhaps a good solution would be to offer a new column type that automatically lists details from hidden columns?

As for hiding the Toolbar,, can you elaborate more about the use-case? If you need to hide it on small devices, does a CSS declaration like this help:

    @media screen and (max-width: 360px) {
        .k-grid-toolbar { display: none; }
    }

If I understand correctly, making the above easier means supporting the media property on more elements than the grid columns, or some equivalent. Is this correct?

In both cases, the best way to influence our roadmap is to submit feature suggestions on UserVoice. Suggestions are evaluated and implemented on every release, sometimes before getting to the head of the queue.

Regards,
Alex Gyoshev
Progress Telerik

[Bob]

Thanks Alex,

I have already applied the css fix which I have used on numerous occasions before.  I have taken some time out to add a feature suggestion, I know that a lot of developers find the behaviour of the grid very poor when implemented on different viewport sizes.  You only have to look at the responsive behaviour of grids from your competitors outlined above to see what I mean.  Don't get me wrong, your grid knocks spots off all competitor solutions when it comes to functionality and ease of use.  I just wish you would take some time out to consider stacking on different device sizes, your offerings are really very poor at this point in time.

Grid responsiveness

Thanks for taking time out to answer my general rant!

Bob