When adding filterable mode row, grid adding columns for hidden columns

2 posts, 0 answers
  1. Chris
    Chris avatar
    19 posts
    Member since:
    Feb 2016

    Posted 02 Nov Link to this post

    I'll explain better...

    I have a grid and when I add the 

    filterable: {
        mode: "row"


    it adds the hidden columns and throws the whole layout of the grid off.. Please see attachment ss1.png, as well if you hover over the filter field you can notice a shift in size.. However the issue is why the filterable attribute messes up the grid?

    here is my grid

    function ShowGroupGrid(userdata) {
            noRecords: {
                template: "No Records Available"
            dataSource: {
                data: userdata
            schema: {
                model: {
                    fields: {
                        GroupID: { type: "number" },
                        LocationID: { type: "number" },
                        Group: { type: "string" },
                        Location: { type: "string" },
                        LocationNumber: { type: "string" },
                        Contact: { type: "string" },
                        Email: { type: "string" }
            filterable: {
                mode: "row"
            columns: [
                { title: "<input id='checkAll', type='checkbox', class='check-box' />", template: "<input name='Selected' class='checkbox' type='checkbox'>", width: "30px" },
                { hidden: true, title: "GroupID", field: "GroupID"},
                { title: "LocationID", field: "LocationID", hidden: true, filterable: { cell: { showOperators: false } } },
                { field: "Group", title: "Group", filterable: { cell: { showOperators: true, operator: "contains" } } },
                { field: "Location", title: "Location", filterable: false },
                { field: "LocationNumber", title: "Location Number", filterable: false },
                { field: "Contact", title: "Contact", filterable: false },
                { field: "Email", title: "Email", filterable: false }
            scrollable: true,
            height: 856


    Am I missing something? If I add this code to the Kendo Dojo then everything works fine.

    I am using bootstrap with this as well and not sure if I have the correct CSS and JavaScript references in the right order or not.


  2. Iliana Nikolova
    Iliana Nikolova avatar
    2593 posts

    Posted 03 Nov Link to this post

    Hi Chris,

    I posted a reply in your other thread (1072248) on the same subject - in order to avoid further duplications, let's keep the discussion in only one of the threads. Thank you in advance for your cooperation.

    Iliana Nikolova
    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
  3. Kendo UI is VS 2017 Ready
Back to Top