So, I have kendo grid, in which i want date columns to be editable. It looks like this:
...
//and date field in options looks like this:
{
field: "BirthDate",
title: "Birth Date",
format: "{0:dd-MMM-yyyy hh:mm:ss tt}",
editor: dateEditor,
editable: true,
width: "120 px"
}
How to bind datePicker via js function?
Is it something like
function dateEditor(container, options) {
var input = $('<input name="' + options.field + '" required="required" />');
input.appendTo(container)
input.kendoDateTimePicker({});
}
Question closed, editor added through dataSource schema (kendo autobinds datepicker to fields with "date" type).
Related
When adding a new item to a Kendo Grid using inline editing, the ContractID datasource is filtered by the selected OrgID. Once a row has been added, the OrgID column is no longer editable (set using isOrgEditable()) but the ContractID is. Unfortunately the cascade doesn't then work for editing and the datasource for ContractID is unfiltered.
To resolve that issue I subscribe to the edit event (data-edit="setContractsDataSource") and filter the data source manually. That works but then the Update button doesn't do anything and the edit is lost.
<div id="grid">
<div class="k-content wide">
<div>
<div data-role="grid"
data-editable="inline"
data-edit="setContractsDataSource"
data-toolbar="[{ name: 'create', text: 'Add Item' }]"
data-columns='[
{ field: "OrgID", title: "Company", editable: isOrgEditable, editor: orgDropDownEditor, template: "#: lookupForOrg(organisationID) #" },
{ field: "ContractID", title: "Contract", editor: contractsDropDownEditor, template: "#: lookupForContract(ContractID) #" },
{ command: ["edit", "destroy"], width: "220px" }
]'
data-sortable="true"
data-pageable="true"
data-filterable="true"
data-bind="source: items"></div>
</div>
</div>
</div>
As is often the case, I resolved the issue while writing the question. For future reference, the reason it wasn't being updated was due to not returning true from the event handler:
function setContractsDataSource(e) {
let orgID = e.model ? e.model.OrgID : this.dataItem().OrgID;
if (orgID) {
$("#contracts").data("kendoDropDownList").setDataSource(contractsData.filter(elt => elt.ContractorID == orgID));
}
return true; // fixed it
}
Subsequently established that the column would only update if it already contained a value, i.e. the new value wouldn't save if previously it had been empty. This telerik forum post helped to resolve it. The editor for the Contracts column needed valuePrimitive: true.
function contractsDropDownEditor(container, options) {
$('<input id="contracts" name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "ContractNo",
dataValueField: "ContractID",
dataSource: contractsData,
optionLabel: "Select contract...",
valuePrimitive: true
});
}
I made a table with kendo-grid.This table have two columns.one is item, another is value.
just as
+-----------+-----------+
| item | value |
+-----------+-----------+
| Retry | yes |
| interval | 8 |
+-----------+-----------+
How to customize editor(inline) with value column.if value is [yes], use the dropdownlist editor, if value is [8], use the numeric edior.
Thx.
For your convenience, I prepared a small example demonstrating such customization of kendo-grid.
Here's the example how you can customize the editor option of column based on the value that column contains(for example "yes" in your case):
function DropDownEditor(container, options) {
if(options.model.itemvalue =="yes"){
var input = $('<input required name="' + options.field + '"/>')
input.appendTo(container);
input.kendoDropDownList({
dataSource: {
data: ["yes", "no"]
}
});
}
else{
var input = $('<input type="text" class="k-input k-textbox" name="itemvalue" data-bind="value:itemvalue">');
input.appendTo(container);
}
};
And your grid's configuration may look like:
var grid = $("#grid").kendoGrid({
dataSource: {
data:[{"item":"Retry", "itemvalue":"yes"},{"item":"interval", "itemvalue": 8}]
},
height: 500,
columns: [
{ field: "item", width: "200px"},
{ field: "itemvalue", editor: DropDownEditor }],
editable: "incell"
}).data("kendoGrid");
In above example the column with the editor uses the DropDownEditor function to create the editor based on the value in "itemvalue" column.
Hope this helps.
How to display dropdown list in every row using client template in kendo grid?
I googled but i didnt find anything proper.I have a model with a string and a list and i want to bind it to a kendo grid using ajax binding.
You can achieve this by specifying editor for the column in grid. and define the editor property in view model.
Sample: your grid should be
<div id="gridId" data-role="grid"
data-scrollable="true"
data-row-template="your_RowTemplate"
data-editable="true" data-bind="source: GridSource" data-pageable="false"
data-columns="[
{ 'title': 'Head' , 'field': 'yourField','editor':viewModel.yourEditor},
]">
</div>
Now you can define the editor in your view model like this
var viewModel = new kendo.observable({
GridSource:new kendo.data.dataSource({data:[],schema:{model:yourmodel}}) ,
DropdownSouce:[],//setyoursource
yourEditor: function (container, options) {
$('<input data-bind="value: ' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
dataSource: viewModel.DropdownSouce,
dataTextField: 'Text',
dataValueField: 'Id'
});
}
});
I have a datepicker in my kendo grid. This datepicker has been set so that user can be able to select only today's date as minimum. But suppose I selected
07/04/2016 (mm/dd/yyyy) as today's date and saved it. I check this record tomorrow
for editing, It does not shows up this date, when grid is in edit mode as
this date is now old than today.
How can I set past date to datepicker for only viewing and not selecting
the previous date than today. there have been a question that has already been asked. The problem is same but my datepicker is in grid. How can I will be able to achieve this.
Grid field:
columns: [ { field: "ExpDate", title: "Expiry Date", width: 300, filterable: false, editor: dateTimeEditor, format: "{0:MM/dd/yyyy}" },
],
//Java script function
function dateTimeEditor(container, options) {
$('<input onkeydown="return false" data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDatePicker({
value: new Date(options.model.ExpDate)
,min: new Date()
});
}
Please try with the below code snippet.
function dateTimeEditor(container, options) {
var expdatepic = $('<input onkeydown="return false" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDatePicker({
value: new Date(options.model.ExpDate)
});
var datepicker = $(expdatepic).data("kendoDatePicker");
datepicker.min(new Date());
}
Let me know if any concern.
I am working on HTML5 and javascript.
Is it possible to add data and button in the same column in kendo grid.
Need help.
Also in view page, you can use ClientTemplate to achieve this:
#(Html.Kendo().Grid<ViewModel>().Name("grid")
.DataSource(src => src.Ajax().PageSize(10).Read(read => read.Action("Action", "Controller"))
.Columns(col =>
{
col.Bound(e => e.Name).ClientTemplate("<input type='button' value='CLICK' onclick='XYZ();'><label>#= (Name== null) ? ' ' : Name #</label>");
})
.Selectable()
.Scrollable()
)
Yes, it is! Simply use a template for it. Example:
Define the following template:
<script id="template" type="kendoui/template">
<button class="ob-click-me k-button">Click me</button>
<span>#= LastName #</span>
</script>
and the grid as:
var grid = $("#grid").kendoGrid({
dataSource: ds,
...
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{
field: "LastName",
width: 200,
title: "Last Name",
template: $("#template").html()
}
]
}).data("kendoGrid");
You can see a running example even defining a handler for the button here: http://jsfiddle.net/OnaBai/qe3tf4tx/