I am trying to implement a custom filter UI with a drop down box with some dummy data for now. I have followed the tutorial on the Kendo site (http://demos.kendoui.com/web/grid/filter-menu-customization.html) but it just isn't working for me :(.
Here is the function for the custom UI:
function relStatFilter(element)
{
element.kendoDropDownList({
dataSource: ["Prospect", "Customer"],
optionLabel: 'Select status'
})
}
And here is the column parameters it's being applied to:
...
{
field: 'relStat',
filterable:
{
ui: relStatFilter,
extra: false
},
title: '<abbr title=\'Relationship status\'>Rel stat</abbr>',
template: '#= ratio == 0 ? "<span class=text-info>Prospect</span>" : relStat == "Active" ? "<span class=text-success>Active</span>" : relStat == "At risk" ? "<span class=text-warning>At risk</span>" : "" #',
},
...
When I click the filter all I get is the standard "starts with" and the text input.
What have I missed?
Custom filtering UI is available since 2012.3.1315. Make sure you are not using an older version. Using 2012.3.1315 the following code works as expected:
$("#grid").kendoGrid({
dataSource: [ { name: "Foo" }, { name: "Bar" }],
filterable: {
extra: false,
operators: {
string: {
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
columns: [
{
field: "name",
filterable: {
ui: function(element) {
element.kendoDropDownList({
dataSource: [ "Foo", "Bar"]
});
}
}
}
]
});
Here is a live demo: http://jsbin.com/uwiqow/1/edit
Related
I create a simple demo here. When edit at amount field I want to display , separator ? Currently it only display the , when not in edit mode. Any idea how to achieve this?
DEMO IN DOJO
var data = [{ "name": 'Venue A', "amount": 10000.50},
{"name": 'Venue B', "amount": 250000.00},
{"name": 'Venue C', "amount": 1500000.43 }];
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
name: { type: "string" },
amount: { type: "amount" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
toolbar: [{ name: "create", text: "Add" }],
columns: [
{ field:"name" , title: "Name"},
{ field: "amount", title: "Amount", format: "{0:n}" }],
editable: true
});
});
<div id="grid"></div>
Per the documentation you only have the following types allowed:
The available dataType options are:
"string"
"number"
"boolean"
"date"
"object"
(Default) "default"
I suggest you to use "number" in this case, as it will work for sorting and filtering.
You can check that Kendo doesn't understand the "amount" type by writing some incorrect text in the editor and see it stays as it was.
You can create your own editor as shown in this dojo:
{ field: "amount", title: "Amount", format: "{0:c}",
editor: function(container, options) {
const input = $(`<input name="${options.field}">`).appendTo(container);
input.kendoNumericTextBox({
format: "c"
});
}
}
However, if you test Kendo NumericTextBox here, you'll see it doesn't display the section separators when editing.
You could do a custom text editor and handle all the events - that's a pure JavaScript question.
How can I set the class to disabled for a custom command on a Kendo grid depending on the boolean value of a property?
I want to use this approach to make the button disabled:
https://docs.telerik.com/kendo-ui/knowledge-base/disable-the-grid-command-buttons
Javascript:
{ command: { name: "custom", text: "Exclude", click: excludeCategorization }, title: " ", width: "60px" }
I want to add a condition like this using the property IsEnabled but if possible using the k-state-disabled class
#= IsEnabled ? disabled="disabled" : "" #
I don't believe you can assign classes conditionally through a template, however you can use the dataBound event to crawl through the rows and manipulate the classes. I would start with all of them disabled and then enable the ones that need to be active, but you can build your own logic. Here's an example:
<div id="grid"></div>
<script>
var grid;
$("#grid").kendoGrid({
dataBound:function(e){
var grid = $("#grid").data("kendoGrid");
var items = e.sender.items();
items.each(function (index) {
var dataItem = grid.dataItem(this);
$("tr[data-uid='" + dataItem.uid + "']").find(".excludeCategorization").each(function( index ) {
if(dataItem.isEnabled)
{
$(this).removeClass('k-state-disabled')
}
});
})
},
columns: [
{ field: "name" },
{ field: "enabled" },
{ command: [{ className: "k-state-disabled excludeCategorization", name: "destroy", text: "Remove" },{ className: "k-state-disabled", name: "edit", text: "Edit" }] }
],
editable: true,
dataSource: [ { name: "Jane Doe", isEnabled: false },{ name: "John Smith", isEnabled: true } ]
});
</script>
Here's a link to a Dojo: https://dojo.telerik.com/ubuneWOB
I'm using a kendo ui editable grid with NumericTextBox. Usually in NumericTextBox the decimal places are limited to two i.e, if I enter 10.135 the value will be formatted to 10.14. But what I need is to get 10.135 itself. What is to be done here.
My model definition.
var GridViewModel = new kendo.data.Model.define({
fields: {
Name: { type: "string", editable: false },
Weight: { type: "number", editable: true, validation: { required: true } },
}
});
and in my view model I have set the Grid as.
$("#DryingBinItemsAddedGrid").kendoGrid({
dataSource: {
data: DataDetails,
schema: {
model: GridViewModel
},
},
editable: true,
dataBound: function () {
},
columns: [
{
field: "Name",
title: "Name"
},
{
field: "Weight",
title: "Total Weight"
}
]
});
I have not mentioned my failed attempts in this example. Currently my Weight field is a numeric text box with two fields. What is to be done here to make my Weight field a NumericTextBox with 3 decimal point.
In order to control the configuration of the NumericTextBox used by the grid as the editor, you need to implement a custom editor, otherwise, the default configuration for the NumericTextBox will be used(which is 2 decimal places).
Try changing your "Weight" column definition to:
{
field: "Weight",
title: "Total Weight",
editor: weightEditor
}
and add a weightEditor function that implements the custom editor:
function weightEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 3,
})
};
Demo: http://dojo.telerik.com/#Stephen/uviLO
I am trying to add a new record to a kendo grid (only using client side javascript) and I can only get all the fields represented as text fields.
One of the fields however is actually a boolean and I would like it to be represented as a check box instead. Does anyone know how to do this?
Can anyone please help? Any help would be greatly appreciated.
UPDATED with code below. Also I tried the template suggestion but this is not working when I click on the Add New Record button at the top of the grid. I get a JavaScript error "primary is not defined"
$("#phoneGrid").kendoGrid({
columns: [
{
field: "type",
title: "Type"
},
{
field: "primary",
title: "Primary",
template: "<input type=\"checkbox\" #= primary ? checked='checked' : '' #/>"
},
{
field: "number",
title: "Number"
},
{ command: ['edit'], title: ' ' }
],
editable: "inline",
dataSource: {
data: patientDetailUpdateViewModel.phones,
schema: {
model: { id: "id" }
}
},
toolbar: ['create'],
save: function (e) {
//alert("Save Event Triggered");
if (e.model.isNew()) {
phone = new Phone();
//Give the phone an id to uniquely identify it, but one which would signify a new phone instance (negative phone instance).
phone.id = patientDetailUpdateViewModel.phones.length * -1;
e.model.id = phone.id;//So isNew() will return false on subsequent calls.
phone.type = e.model.type;
phone.primary = e.model.primary;
phone.number = e.model.number;
patientDetailUpdateViewModel.phones.push(phone);
//alert("isNew() = true");
}
}
});
You can use template for column definition:
{
field: "ColumName",
template: '<input type="checkbox" #= Column? checked="checked" : "" # disabled="disabled" ></input>'
}
EDIT:
Try to define data source model (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model) like below, but according to your data types in source:
schema: {
model: {
id: "ProductID",
fields: {
type: {
type: "string"
},
UnitPrice: {
type: "number"
}
}
}
}
I am using kendo grid.I have defined like,
$("#grid").kendoGrid({
dataSource:datasource,
pageable: true,
columns: [
{ field: "ProductId", title: "ProductId" },
{ field: "ProductType", title: "ProductType" },
{ field: "Name", title: "Name" },
{ field: "Created", title: "Created" }
],
});
});
I am able to display pager in my grid.but what I want is If the records in the grid is more than 20,Then only I want to display pager ,else don't want to display pager ,can u tell me how to do this?
Basically this is not supported. You can try to work-around it with some JavaScript. For example the following script after initializing the Grid should achieve similar behavior:
$(function(){
if($('#gridName').data().kendoGrid.dataSource.total()>20){
$('#gridName .k-grid-pager').hide();
}
})