As you can see in this codepen link, I have replaced the header text with v-text-field but the problem is the v-text-field is attached with filterBy icon (the up-down arrow icon) as well. When i click on the text-field the filterBy function is working that i dont want. So far I think the #click event is covering whole area. I wish to separate the text-field and filterBy behavior. Any help will be greatly appreciated.
https://codepen.io/MicroDreamIT/pen/vYRvMza
You can disable the filter option on v-table columns by using the property 'sortable'.
Your headers data should look like that :
headers: [
{
text: "Dessert (100g serving)",
align: "left",
value: "name",
sortable: false // this will disable filter property and hide the icon
},
{ text: "Calories", value: "calories", sortBy: true },
{ text: "Fat (g)", value: "fat" },
{ text: "Carbs (g)", value: "carbs" },
{ text: "Protein (g)", value: "protein" },
{ text: "Iron (%)", value: "iron" }
],
Related
I have a column that I want always to be rendered in the grid, but I have other columns that I want to allow users to toggle on and off. I'm struggling to find a setting on the kendo-grid-column component that would remove it as an option.
I want to remove the "Actions" column from the column menu. I've tried editable false, locked, etc not finding something that will remove it from the column selector options.
<kendo-grid-column
[width]="200"
[columnMenu]="false"
[resizable]="false"
[editable]="false"
id="actions-col"
field="actions"
title="Actions"
>
I don't know any property that will allow to do this directly. However, you can still use the columnMenuInit event to hide some menu items:
columnMenuInit(e) {
//Hides the ShipCountry column
//HiddenMenuItem set display: none!important
e.container.find('li.k-columns-item').find('input[data-field="ShipCountry"]').closest("li").addClass("HiddenMenuItem");
}
In this example, I can't use CSS display none directly because Kendo will overwrite it and we can't remove it from the DOM since the grid will raise an error if it can't find it... so that's why I'm using the HiddenMenuItem class.
Define menu inside column object and set it to false:
$("#grid").kendoGrid({
columns: [
{ field: "id", menu: false },
{ field: "name", menu: false },
{ field: "age" }
],
columnMenu: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
Example: Columns menu
I have text field with button in my CKEditor dialog:
{
type: 'hbox',
id: 'search',
children: [
{
type: 'text',
id: 'searchText',
label: 'Search something'
},
{
id: 'searchButton',
type: 'button',
label: 'Search',
onClick: function() {
alert("o.O");
}
}
]
}
Problem is, that searchButton is aligned with text field's label instead of text field itself. I tried to add align property to hbox and to the button too (with values bottom and center), but nothing happend.
How can I have that button aligned in the same line as text field?
I faced same problem too.I have got ride of this problem by applying style property.
{
type : 'button',
id : 'searchButton',
label : 'Search',
style : 'margin-top:15px;',
}
I am using Kendo UI to render data in grid format. In grid there is a column of status which can have values like completed, error, in progress etc. Now to make it more convenient I want to represent it using images. In case of single icon I can use below code in COLUMNS array:
columns:[
{
field: "oper",
title: "Operation"
},
{
field: "exedate",
title: "Date"
},
{
field: "status",
title: "Status",
template: '<img src="/resources/icons/user_green.png"/>
}]
But now, how to represent multiple icons and that to with condition based on status value that I am not able to find out?
You can have control over the template if you pass a function.
{
field: "status",
title: "Status",
template: function(dataRow){
var icon = 'red.png'
switch(dataRow.status){
// Assign here the icon as you please.
}
return '<img src="/resources/icons/' + icon + '"/>';
}
}
Another solution is to define CSS classes to the different statuses.
.statusicon.good
{
background: url('green.png')
}
.statusicon.bad
{
background: url('red.png')
}
And then just render the css class in your template.
{
field: "status",
title: "Status",
template: '<div class="statusicon #: status #"></div>
}
I would like to ask, how to change in Kendo Grid component column filterable input (see image below) into dropdown menu with two given values (CZ and EN)?
Many thanks for any help.
EDIT:
I tried to do by this way, but with no effect:
{
field :"language",
title : $translate.instant('LANG'),
type: "string",
width:220,
filterable: {
ui: function (element) {
element.kendoDropDownList({
dataSource: ['CZ','EN'],
optionLabel: "--Select Value--"
});
}
}
},
Check this tutorial, it should give you information how to do it
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
Sorry, Is this that you are trying to achieve ?
I have resolved this by applying below code
{
field: "language",
title: "Language",
width: 150,
filterable: {
multi: true,
dataSource: [
{ language: "CN" },
{ language: "EN" }
]
}
}
Hope this will work for you
First, I know how to exclude a field by marking it 'editable: false' in the kendo data source.
I added a column with a button to the Kendo UI grid to open a window for a file upload. This column is not in the datasource! However, the column is now also displayed in the popup editor as a tetxtbox with 'File Upload' as a label (that is the column header name also as you can see in the screenshot).
How can I exclude/hide this column in the popup editor?
I am using Kendo UI version: "2014.2.716"
Thanks for your help!
Here is how I added the column to the grid, see the last line:
columns: [
{ field: "Id", hidden: true },
{ field: "Name", title: ........ },
{ field: "EnteredBy", title: "Entered by", hidden: true },
{ field: "UpdatedOn", type: "date",.....},
{ field: "UpdatedBy", title: "......},
{ command: ["edit", "destroy"], title: "Action", width: "80px" },
{ field: "Upload", title: "File Upload", width: "80px", template: '<button class="k-button" onClick="uploadFiles(#=Id#)">Upload<br/>Files</button>' }
],
and here is a screenshot that shows the column 'File Upload' with the button 'Upload File' in each cell in the grid-column.
This is the screenshot from the popup editor with the field that I would like to hide.
I think you should make that extra column a custom command instead of specifying a "field" for it.
Something like:
columns: [
...
{
command: { text: "Upload", click: uploadFiles},
title: "File Upload",
width: "80px"
}
]
The uploadFiles function would then get passed a click event, from which it can get to the element that was clicked. You can add a data-id attribute to the row to get its Id from in the uploadFiles function, as they do in the demo linked above.