Dynamically Adding (Selecting/unselecting) a column in datagrid Kendo UI

0
votes

I am just started with kendo UI grids, And I could able to make out how to integrate the kendo with angularJS

Ex: JSFIDDLE

But I was trying to implement some thing like dynamically adding/selecting or unselecting the column names, then the data grid should display the columns accordingly in the data table.

Ex: BY Default consider few columns are selecet

Now when I selecting a new column in the right side of the grid, The datatable is updated with that selected column

Hope this image gives a clear idea on what I am pointing

New Column Selected

So, I want to achieve this kind of dynamic data grid,

Even Though I make 

columns: [
            { field: "lastName", title: "Last Name" },
            { field: "firstName", title: "First Name" },
            { field: "company", title: "Company"},
            { field: "title", title: "Title" },
            { field: "email", title: "Email" },
            { field: "phone", title: "Phone" }
        ],

and dataSource Dynamic it is not working.

NOTE: Please Consider the columns names are fetched from API, so I need to implement dynamically based on API

1
javascriptjqueryangularjskendo-uikendo-grid

1 Answers

0
votes

for showing/hiding columns we have methods exposed on Grid itself. Here is the API ref of those:

showColumn - http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-showColumn

hideColumn - http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-hideColumn

Also, we have a feature called ColumnMenu. It automatically provides a column menu where you can check/ uncheck the columns to show or hide. Here is a demo of that: http://demos.telerik.com/kendo-ui/grid/column-menu

hope this helps