I'm looking for a way to order the columns menu options (Columns that I can hide/show) alphabetically meaning If I have 4 columns in the Grid like this:
| ID | Name | Last Name | Assignee |
I'd like the menu that shows when "Columns" it's clicked to show ordered alphabetically instead of following the grid column order, should show like this when ordered:
[x] Assignee
[x] ID
[x] Last Name
[x] Name
Not sure if my explanation of what I'm trying it's clear enough... I was able to do this with AngularJS Kendo UI Grid but with Angular 2+ Kendo Grid I'm not sure how to do it.
NOTE:
In the Jquery Vr. and AngularJS Version the Kendo Grid takes a configuration object and there's an event called columnMenuInit where I can fix the order of the menu without affecting the actual order of the columns in the grid, but with Angular2+ I'm not sure if I have a way to access that event.
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/columnmenuinit
Appreciate any help I can get from the community :)
Set the columnMenu.columns.sort configuration (documentation):
columnMenu: {
columns: {
sort: 'asc'
}
}
Fiddle: https://dojo.telerik.com/upanADuT
Related
i use Kendo grid in ASP.NET MVC app.
I have grid with 6 columns which are sorted by date in default. User can click on header of one of the columns a override default sort and sort by column of his choosing.
What I want to achieve is "second tier sorting". When user sorts by name and there are 10 records with the same name, i want the 10 records to be sorted by date (descending). So far, I haven´t found anyting useful.
Thanks
I have an ExtJs GridPanel in which sortable is false in all the columns.
Then if I sort store by
this.store.sort('Column1','ASC');
then the arrow reappers .
Does sortable gets true?
Is this because I am sorting the store or anything else?
If it the reason different than that then what is the solution for removing the arrow?
I would appreciate any help on this.
The arrow is being shown because of the sorter in the store, which identifies a column in the grid which has the dataIndex equal to the property you are sorting, despite the sorting being disable on this column. In this case, you could override the getSortParam function in your column definition, like this:
getSortParam: Ext.emptyFn
And your column will no longer show the arrow in the header.
I tried using the frozen columns and detail template both at a time but both they are not supported at a time by kendo telerik grid I get this error every time when I try:
'Uncaught Error: Having both detail template and locked columns is not supported'.
Could you please look into this error. Would you give me an idea, how could I achieve both detail template and frozen columns together in kendo.
http://www.telerik.com/forums/grid-column-locking-with-detail-template
Shankar
As conflicting nature it's not possible in kendo ( or either grid . e.g. Excel sheet too )
http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/6263744-support-row-templates-with-frozen-columns
one probable solution is :
Create two grids side by side. ( left grid for frozen column , right grid for details columns ) you can use same dataSource for both the grid .
Make div size fixed so user cannot scroll on left grid .
hide those repeating columns in Right grid.
add one more extra expand button column in left grid.
on click of expand button of left grid, expand appropriate right side detail row.
i know this is not actual solution with kendo and lots of code work around, but using jquery, tricks you can at least achieve up to certain level.
=> if you have any solution then please share it here sankar. looks like this is old post .
I am having a grid with checkboxes for each item in the grid. I need to delete the multiple checked items in the grid. How can i do that in kendo ui.
Regards,
Sri
When the button is clicked use jQuery to find all TR elements which contain the checked checkboxes and then use the removeRow method. Something like:
$.each($('#GridName :checkbox:checked').closest('tr'),function(){
$('#GridName').data().kendoGrid.removeRow($(this));
})
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.
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!