I am using Telerik's Kendo UI and their autocomplete widget in conjunction with their MVVM framework, and am having a bit of a hard time with getting a box to set the retrieved (and selected) object to the bound one on the view model. For example...
var viewModel = kendo.observable({
Context: {}
});
$("#context").kendoAutoComplete({
dataTextField: "Name",
dataValueField: "Id",
delay: 800,
dataSource: {
dataType: "json",
serverFiltering: true,
transport: {
read: {
url: "/search/data",
data: function (data) {
return {
term: data.filter.filters[0].value
}
}
}
}
}
}).data("kendoAutoComplete");
Then I use the following HTML;
<input data-val="true"
id="context"
name="context"
placeholder="Context"
type="text"
data-bind="value: Context" />
This hits a controller action that returns the following;
[
{
Id: "items/1",
Name: "Item 1",
Label: "Item 1 Label"
},
{
Id: "items/2",
Name: "Item 2",
Label: "Item 2 Label"
},
{
Id: "items/3",
Name: "Item 3",
Label: "Item 3 Label"
}
]
However when I select the object after using the autocomplete to search for it, the Context property on my viewmodel remains null.
I can circumvent this by adding a specific select function.
select: function(e) {
var dataItem = e.sender.dataItem(e.item.index()).toJSON();
// update the model
viewModel.set('Context', dataItem);
}
but I would really rather just it work like it is supposed to; Any suggestions?
The problem is that you define viewModel as an Observable object but you are not binding it to the input.
Try adding the binding as follow:
kendo.bind($("#context"), viewModel);
Check it here: http://jsfiddle.net/OnaBai/DYVLT/
Related
I have an existing grid creating in Kendo UI for Jquery. I want to put a static drop down/select box in the first field/cell of the grid on each row. When I do it shows up as "undefined".
Most of the examples I see on her and the Telerik site use an editor. In my case the drop down is static. Once they click on an item they will be redirect to another page to do something. At the moment I just want to get the drop down to show up with hard coded options.
jQuery(function($){
"use strict";
var grid = $("#grid").kendoGrid(){
....
columns: [{
field: "my_links",
title: "My Links",
template: "#=getMyLinks(DATA.user_id)#"
},{
....
}_.data("kendoGrid");
function setGridData(){
....
});
grid.setDataSource(dataSource);
}
setGridData();
});
function getMyLinks(user_id){
$('<input id="my_links" name="my_links/>')
.kendoDropDownList{[
dataSource: [
{ id: 1, name: "View" },
{ id: 2, name: "Create },
{ id: 3, name: "Delete"}
],
dataTextField: "name",
dataValueField: "id"
});
}
I would expect a drop down in the
You should provide DOM element for drop down widget in columns.template field and then initialize all widgets in dataBound event.
$("#grid").kendoGrid({
columns: [{
field: "my_links",
title: "My Links",
template: "<input id="my_links" name="my_links/>"
}],
dataBound: function (){
getMyLinks(DATA.user_id);
}
}).data("kendoGrid");
I am currently working with Kendo UI and am trying to data bind my Kendo observable to my drop down list. My drop down list is customized and is created inside of a Kendo editing popup object. I used a simple approach of just calling the editor in my columns and creating a function that creates a drop down list in that object. Now I am able to data bind with out an issue in my HTML file, however I am finding it difficult to do the same with my current approach.
Currently I am filling up the grid with data, I am able to populate the grid with the client name and client number, but the client type is not being posted. I assume is the failure to appropriately data-bind.
This is my Kendo observable
var viewModel = kendo.observable({
client: {
clientName: "",
clientNumber: "",
clientType: "",
},
dropdownlist: ["HCC", "Tax", "Audit", "Advisory"],
});
This is my Kendo Grid
$("#grid").kendoGrid({
dataSource: client,
toolbar: ["create"],
columns: [{
field: "clientName",
title: "Client Name",
},
{
field: "clientNumber",
title: "Client Number",
},
{
field: "clientType",
title: "Client Type",
editor: categoryDropDownEditor,
}
],
editable: "popup",
})
And this is my customized function which I am having issues data binding.
function categoryDropDownEditor(container) {
$('<input data-role="dropdownlist" data-bind="source: dropdownlist , value: client.clientType">')
.appendTo(container)
.kendoDropDownList({
optionLabel: "Engagement Types",
dataSource: viewModel.dropdownlist,
});
}
replace value: client.clientType to value: clientType:
function categoryDropDownEditor(container) {
$('<input data-role="dropdownlist" data-bind="source: dropdownlist, value: clientType">')
.appendTo(container)
.kendoDropDownList({
optionLabel: "Engagement Types",
dataSource: viewModel.dropdownlist,
});
}
I'm trying to implement some functionality in "onchange" of text box in telerik kendo grid. But it is not firing in change; instead it's firing on onBlur.
The code is here. demo
To track the changes in the editors inside the column templates you should use different approach. Please check the example below:
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: kendo.template($("#name-template").html())
}],
dataSource: {
data: [ {id: 1, name: "Jane Doe" }, {id: 2, name: "John Doe" } ],
//schema is required for enabling valid CRUD operations
schema: {
model: {
id: "id",
fields: {
id: {type: "number"},
name: {type: "string"}
}
}
}
}
});
var grid = $("#grid").data("kendoGrid");
grid.table.on("change", "input", function(e) {
alert("change");
//optionally update the underlying model:
var editor = $(this);
var dataItem = grid.dataItem(editor.closest("tr"));
dataItem.set("name", editor.val());
});
Another option is to use the MVVM approach shown in the following demo:
http://dojo.telerik.com/Utino
I've used "onkeyup" event. It works :)
You should try "onkeypress" event. It will work as per your requirement.
I want to show my Kendo UI TreeView expanded at all time, but it will only show collapsed. When reloading the datasource, I can see a flash of the expanded tree, but then it collapses.
var locationTreeView = $("#treeViewLocations").kendoTreeView({
checkboxes: {
checkChildren: false,
template: "# if(item.showCheckbox){# <input type='checkbox' name='selectedLocations' value='#= item.value #' />#}#"
},
dataTextField: "text",
dataSource: {
transport: {
read: {
url: window.location.origin + "/api/v1/bookingrequestlocation",
dataType: "json",
type: "GET",
data: { bookingSeasonPeriodId: bookingSeasonPeriod.value() },
}
},
schema: {
model: {
id: "value",
children: "items",
hasChildren: "hasChildren",
}
}
}}).data("kendoTreeView");
expandTreeView();
function changeSeason() {
locationTreeView.dataSource.read();
expandTreeView();}
function expandTreeView() {
locationTreeView.expand(".k-item");}
Fire expandTreeView() function in databound event
It's Working For Me...Thanks...I have added A DataBound Event Like this
.Events(e => e.DataBound("ExpandAllTree"))
and In that Method
function ExpandAllTree() {
var treeview = $("#TreeView").data("kendoTreeView");
treeview.collapse(".k-item");
}
and It's Working Perfectly...
Add the following code right after creating the treeview
var tree = $("#TREEVIEWID").data("kendoTreeView");
function expandTreeNodes() {
if ($('.k-item').length) {
var expandedLength = $('.k-item').length;
tree.expand(".k-item");
if (expandedLength < $('.k-item').length) {
expandTreeNodes();
}
}
}
I have a kendo grid that does a create/delete, both of them ending with errors.
I would like to:.
When having an error on delete to prevent the row deleting from the grid (that is the default behavior when having errors)
When having a create error to prevent the popup editor to close
Please see this fiddle:
http://jsfiddle.net/andreigavrila/p49eV/2/
var data = [
{ Id: 1, Name: "Decision 1", Code: 1 },
{ Id: 2, Name: "Decision 2", Code: 2 },
{ Id: 3, Name: "Decision 3", Code: 3 }
];
$("#grid").kendoGrid({
dataSource: {
error: function (a) {
console.log('error');
$('#grid').data("kendoGrid").cancelChanges();
//$('#grid').data("kendoGrid").one("dataBinding", function (e) {
//e.preventDefault(); // cancel grid rebind
//});
},
transport: {
read: function(e) {
e.success({data: data});
},
create: function(e) {
console.log('creating');
e.error();
},
destroy: function(e) {
console.log('deleting')
e.error();
}
},
schema: {
data: "data",
model: {
id: "Id",
fields: {
Id: { type: "number" },
Code: { type: "number" },
Name: { type: "string" }
}
}
}
},
toolbar: ["create"],
columns: [
{ field: "Code", title: "Code", },
{ field: "Name", title: "Name" },
{ command: ["destroy"], title: " " }],
editable: {
mode: "popup"
}
});
The second point works by default (so having an error on create does not close the popup)
The first point works by adding the error function, but that breaks the popup (it closes on error).
So I can have either one of my , but not both in the same time. I am kind of stuck.
I also saw this 2 questions on kendo forums:
delete error
server validation
The second link said "to prevent the Grid from closing you need to prevent the next dataBinding event." but i can't make that work.
Thank you for your help.
Andrei
I finally managed to push this to Kendo forums:
Tthe official solution to that:
http://www.kendoui.com/forums/kendo-ui-web/grid/kendo-grid-handling-create-delete-errors-with-popup-editor.aspx
"I suggest you to use an if condition in the error event handler to
determine which of the two workarounds should be executed. In this
case the server should provide information about type of the error
that occurred. You can retrieve the error status from error event
arguments."