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 2016 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
    2622 posts

    Posted 03 Nov 2016 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.
Back to Top