CODEWITHSUNDEEP
kendo-ui
user1740572
user1740572

Reputation: 9

How to change Kendo grid column according to dropdown list

We are developing a web app project in that we are using Kendo UI. Is that possible to make first column title/heading as what ever we selected from drop down. For example :- If a serial number is searched , serial number should be in the first column of the search. But I am unable to get that since we defined column definition generically in sorted manner. Depending upon selection we hide rest of the column. for example:

xxx.GridColDef = [ {
    field : "serialNo",
    title : "Serial No",

}, {
    field : "firstname",
    title : "firstname",
    }, {
    field : "lastnameo",
    title : "lastname",
    },

from the drop down if i select first name the first name should be in the first column. but i am getting first column as serial no Is there any way? without adding separate column definition for each.

Kendo version - 2012.1.322

this should be done automatically not using column re-ordering not manually

Sorry if I am not clear. What I want is

In drop down I have

Serial No First Name Last Name DOB

Initially the the grid will be as below

Serial No First Name Last Name DOB

If user selects "First Name" from drop down it should be like this

First Name Serial No Last Name DOB

Hope this helps. if you need more clarification let me know . Thanks for providing solution for this.

One more thing: -

"Fiddle using your current version of Kendo 2012.1.322 " in this fiddle i am unable to select from drop down.

Upvotes: 1

Views: 4063

Answers (1)

VtoCorleone
VtoCorleone

Reputation: 17203

Updated Answer 2

The current KendoUI grid framework does not support the ability to switch columns in code. I've created a new fiddle where you don't have to completely re-order the columns in every switch case. It loops through your column definition and if the drop down value is there, it removes it from the array and places it at the first position. I don't know how your 50 columns and 8 drop downs interact so it's hard for me to give a completely accurate answer. But between the multiple suggestions on here, I hope you can come to a solution :)

I created a new tempColumn definition variable so that the original column definition is still available in it's original state.

function onSelect(e) {
    var ddlVal = this.dataItem(e.item.index()).value;
    var tempColumns = columnDefinitions;

    $(tempColumns).each(function(index) {
        if (ddlVal == this.title) {
            tempColumns.splice(index, 1);
            tempColumns.splice(0, 0, this);
        }
    });

    createGrid(tempColumns);

}

New fiddle which uses spice to re-order the columns

Updated Answer

I've created a new fiddle with your current version of Kendo. You don't need to update your version because I don't believe there is any way to do this within the Kendo framework.

This solution involves re-defining your column definitions when you make a selection from the drop down and then re-create the grid.

Updated fiddle with your current version of Kendo

*For some reason, Internet Explorer doesn't play nice with jsfiddle sometimes. This example works in Firefox and Chrome but not in IE. If you can't try a different browser to see it work, plug the code into your solution and test it.

Original Answer

I've provided 2 different solutions.

1) Is it possible for you to update your version of KendoUI? If you can, then you can take advantage of the .showColumn() and .hideColumn() methods.

Here's a fiddle below using KendoUI 2012.2.710. On the select event of the drop down, you just show/hide the appropriate columns. Really easy and straight forward.

Fiddle using Kendo 2012.2.710

2) If you can't update your KendoUI version, you can alter your columnDefinition array and then re-create the grid.

In the onSelect method of the drop down list, you remove the first column from the columnDefinition array and then add in the new column object to the array. After that, you remove the content of the grid's div element and then re-create the grid.

You're still binding to the same data so you don't have to go back across the wire to get the data again.

Fiddle using your current version of Kendo 2012.1.322

~ In both cases, the code could definitely be cleaned up to suit your needs better but I just wanted to give you some base functionality to work with. Hope this helps!

Upvotes: 1

Related Questions