How do I format date data from the dataSource to suit the dataTextField in kendoDropDownList? Templates and kendoGrid don't seem to cause a problem, but doing something like dataTextField: "#:kendo.format('{0:dd MMM yyyy}',data.jscript_date)#" or variations of it produce errors. Thanks!
The dataTextField must simply be the name of a field on the data item from the datasource. To customise what you actually see in the dropdown, put your template code in template and valueTemplate:
template: "#:kendo.format('{0:dd MMM yyyy}',data.jscript_date)#",
valueTemplate: "#:kendo.format('{0:dd MMM yyyy}',data.jscript_date)#"
The template is for when the dropdown is expanded and the valueTemplate is for the selected item when the dropdown is closed.
Related
I am using Kendo DatePicker inside KendoGrid using editor template (DD/MM/YYYY format), after changing the date via datepicker i see that its saving the data into grid modal with yyyy-MM-ddThh:mm:ss.SSS format instead of DD/MM/YYYY. I am getting String from server in required DD/MM/YYYY format and display wise is also good only exception is during change of date via DatePicker.
How can i convert the date into required DD/MM/YYYY format while selecting date via datepicker?
function dateEditor(container, options) {
$('<input name="'+options.field+'"data-text-field="'+options.field+'"data-value-field="'+options.field+'" data-bind="value:'+options.field+'" data-format="'+options.format+'"/>')
.appendTo(container)
.kendoDatePicker({
format: "MM/dd/yyyy",
parseFormats: ["MM/dd/yyyy", "MM/d/yyyy", "M/dd/yyyy", "M/d/yyyy"],
change: function() {
// If i try to override with MM/DD/YYYY format using below code and trigger
//change event it goes into a infinite loop, so cant use this.
//this.value(moment(this.value()).format('MM/DD/YYYY'))
//this.trigger('change');
}
});
}
Please note that that requirement is not to use parameterMap as i am sending the data to server via below call so it picks the data directly from Grid without translating.
JSON.stringify($('#grid').data("kendoGrid").dataSource.data())
Let me know if Jsfiddle can help the experts here ?
Can we replace kendo UI dropdown list with default html "select -> option" elements?
I am concerned about how it is displayed in mobile devices. I want to open native apple and android interface when selecting a dropdown value.
Yes it is absolutely possible. I will do an example with kendo dropdown and JQuery
<input id="DropdownList" class="form-control"/>
Here is a simple input box.
We need a simple Javascript to treat is as a dropdownlist.
<script>
$("#DropdownList").kendoDropDownList({
dataTextField: "Name",
dataValueField: "ID",
});
</script>
And to bind it to some datasource all we have to do is create a JQuery function to do it as
var dropDown = $("#DropdownList").data("kendoDropDownList");
dropDown.setDataSource(someList);
someList is a simple JSON object which we can get through ajax requests.
$("#ElementId").attr("disabled","disabled");
The Above code only works for the Date pickers which are declared in Html page.
But I want to Disable the kendo Date picker in the kendo Grid Header Filter area.
Here is a simple way of achieving what you want.
Disabled text input on grid filter
I have modified the date cell to have the following:
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}",
filterable: {
cell: {
template: function (element) {
element.element.kendoDatePicker({
});
element.element.attr('disabled', 'disabled');
}
}
}
}
You will notice that I have added a template to the cell which will override the default date picker and add my own date picker to the filter row.
Note if you want to do this via the menu you just need to do this at the first element item e.g. element.kendoDatePicker({})
Hope this is what you are after.
For more info on this take a look at this link:
kendo grid filter api
If the value binded to a kendo dropdownlist is empty(Count =0) OptionalLabel specified is not displayed instead a blank dropdownlist is displayed
#(Html.Kendo().DropDownList()
.Name("TransactionTypeId")
.BindTo((IEnumerable<KPMG.LER.ViewModel
.General.NameIdPair>)ViewData["TransactionTypes"])
.DataTextField("Name")
.DataValueField("Id")
.OptionLabel("--Select--")
Is there a way to display Optional Label always
You can use javascript control function which is fired with databound event.
if (....) // control if datasource count = 0
$("#TransactionTypeId").data("kendoDropDownList").text(--Select--);
this is not an option label but it looks like option label to users :)
I have similar example to this grid
http://jsfiddle.net/Sbb5Z/478/
I want to apply grouping on category field. I got an error. because category filed type is object. How can I specify the grouping filter field.
I tried this but it did not work
groupable: {
field:"Category.CategoryName",
}
Any ideas ??