I have a kendo mvvm grid in that how to keep dropdown list when it is on editable mode
I am new to using this kendo and mvvm concepts please help me
kendo.bind($("#example"), viewModel);
var grid = $("#example div[data-role='grid']").data("kendoGrid");
$.each(grid.columns, function (idx, column) {
if (column.field == "CourseName")
column.editor = viewModel.xx;
});
xxx: function name(container, options) {
$('<input id="ddl" data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
transport: {
read: {
url: "/controller/method",
dataType: "json"
}
}
},
autoBind: false,
index: -1
});
}
Related
This is the code which I am using to bind Multiselect to listbox in javascript. I am not where I am missing, I am not receiving the typed text in ajax call to get values. The method gets called in the controller side and the string parameter which I have returns null.
Implemented based on URL: https://demos.telerik.com/kendo-ui/multiselect/addnewitem
$("#Tags").kendoMultiSelect({
placeholder: "Select your tags",
dataTextField: "Name",
dataValueField: "Id",
autoBind: false,
maxSelectedItems: 5,
minLength: 3,
delay: 2000,
//filter: "startswith",
dataSource: {
transport: {
read: {
url: "/Support/Ticket/GetTags",
dataType: "json"
}
},
serverFiltering:true
}
});
Controller
public JsonResult GetTags(string text)
{
List<Tag> tags = _tagRepository.GetAll(text).ToList();
return Json(tags);
}
As mentioned here https://www.telerik.com/forums/server-filtering-not-working-as-expected#KXcqO6xHoE6NxGuL0T2ZoQ, I think you need to add return data option
$(document).ready(function () {
$("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "http://demos.kendoui.com/service/Northwind.svc/Products",
data: function () {
return {
text: $("#products").data('kendoMultiSelect').input.val()
};
}
}
}
}
});
});
I want implement kendo Grid custom editor (dropdownlist).
everythin is ok but if create new record or update exists record when dropdown column is null I got error in updating, in debugging I saw
'[object Object]' sent as value of continent column ,
but when dropdown column has value I can change dropdown value and update record is OK!!!
my code is:
var crudServiceBaseUrl = "http://localhost:8090/hr";
var countryDataSource =
new kendo.data.DataSource({
transport: {
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
},
read: {
url: crudServiceBaseUrl + "/countries",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/countries/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/countries/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/countries/Create",
dataType: "jsonp"
}
},
schema : {
data : "items"
},
model: {id : "CD_CONT",
fields: {
CD_CONT : { type: "string",editable : false},
NAME_CONT : { type: "string",editable : true,nullable : false},
CONTINENT : { type: "string",editable : true,nullable : true}
}
}
});
var continentDataSource = new kendo.data.DataSource({
data: [ { continent:"1",name:"asia"},
{ continent:"2",name:"europ"},
{ continent:"3",name:"america"}
]
});
$('#grid).kendoGrid({
toolbar: ["create","save", "cancel",],
columns: [
{
field: "CD_CONT" ,
title: "Cd cont"
},
{
field: "NAME_CONT" ,
title: "Name cont"
},
{
field: "CONTINENT" ,
title: "Continent",
editor: function ContinentDropDown(container, options) {
$('<input data-text-field="name" data-value-field="continent" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: continentDataSource,
dataTextField: "name",
dataValueField: "continent"
});
}
}
],
dataSource: countryDataSource ,
editable: "inline"
});
also how to set field template to show textValue of Continent in grid?
Did you forget to add the name in your editor?
$('<input data-text-field="name" data-value-field="continent" data-bind="value:' + options.field + '" name='" + options.field + "'/>')
I have the following code in a
jsfiddle example
var remainingFalilities = [
{"Text":"Facility 1","Value":"1"},
{"Text":"Facility 2","Value":"2"},
{"Text":"Facility 3","Value":"3"},
{"Text":"Facility 4","Value":"4"},
{"Text":"Facility 5","Value":"5"},
{"Text":"Facility 6","Value":"6"},
{"Text":"Facility 7","Value":"7"},
];
var ds = new kendo.data.DataSource({
data: remainingFalilities
});
var selectedFacilities = [
{"Text":"Facility 8","Value":"8"},
{"Text":"Facility 9","Value":"9"}];
var dataSource = new kendo.data.DataSource({
data: selectedFacilities,
batch: false,
pageSize: 20,
schema: {
model: {
id: "Value",
fields: {Text: { type: "string" }}
}
}
});
$("#FacilityGrid").kendoGrid({
dataSource: dataSource,
autoBind: true,
editable: { mode: "inline" },
sortable: true,
selectable: true,
toolbar: ["create"],
columns: [
{ command: ["destroy", "edit"], title: " ", width: "250px" },
{ field: "Text", title: "Facility Name", editor: facilityDropDownEditor },
]
});
function facilityDropDownEditor(container, options) {
$('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: ds
});
}
The Problem is, when a user clicks "Add new record" it adds a new item with the facility name dropdown showing the 1st item in the list. If the user clicks "Update", it saves the record but blanks out the facility name. The reason is, there really isn't an item selected in the dropdown. I know this because the selected value is null when it is passed to my controller code. So, I really want to know how to either
Not show the first item in the list until the user actually selects it in the list OR
set the selected item to the first item in the list so the value will not be null when passed to my controller.
The answer for both ways would be even better.
To not showing the dropdown's items until user select them manually use optionLabel
function facilityDropDownEditor(container, options) {
$('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: ds,
optionLabel: "Select an item..."
});
}
OR
Use index to put initially selected item.
function facilityDropDownEditor(container, options) {
$('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: ds,
index : 1
});
}
One option, not listed among your proposals, is setting optionLabel that is displayed when the value is null.
$('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: true,
dataSource: ds,
optionLabel:"Select Facility"
}
);
Your jsfiddle modified here
The below case refers to:http://demos.telerik.com/kendo-ui/grid/editing-custom
The adding screen works, but the add failed because of the dropdownlist cannot get value.
The problem is: when add a new record, and then select a Curve Term (not the default value), the dropdown cannot get any value, that is, the json backend is: "curvetermid":""
The code is as below:
<div id="grid"/>
var dataSource = new kendo.data.DataSource ({
batch:true,
transport:{
read: function (options) {
$.ajax({
type: "POST",
url:"",
data:"/idx/list",
dataType:"json",
contentType: "application/json; charset=utf-8",
success: function(result) {
options.success(result);
}
})
},
create: function(options) {
$.ajax({
type: "POST"
,url:"/create"
,dataType:"json"
,contentType: "application/json; charset=utf-8"
,data:kendo.stringify(options.data.models)
,success:function(result) {
options.success(result);
}
});
},
parameterMap:function(options,operation) {
return kendo.stringify(options.models);
}
},
schema:{
data: result.data,
total:result.total,
model:{
id:idKey,
fields:{
idKey: {type:"number"},
**curveterm: {validation: {required: true}}**
}
}
}
});
$("#grid").kendoGrid({
dataSource:dataSource,
columns: [
{field: "idKey", title: "ID"},
**{field: "curvetermid",
title: "Curve Term",
editor: fnDdlCurvetermEditor,
template: "#=curveterm.curvetermname#"}
]**,
editable:{mode:"popup", confirmation:"Are you sure you want to remove this item?"}
});
function fnDdlCurvetermEditor(container,options) {
var data = [{"curvetermid":0,"curvetermname":"NA","isactive":1}, {"curvetermid":1,"curvetermname":"AAA","isactive":1},{"curvetermid":2,"curvetermname":"BBB","isactive":1}];
var ddlVar = $('<input id="curvetermid" name="curvetermid" '
+ ' data-value-field="curvetermid" '
+ ' data-text-field="curvetermname"'
+ ' data-bind="value: ' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "curvetermid",
dataValueField: "curvetermname",
dataSource: data
});
}
I have a custom editor that I use with autocomplete. The web service is getting called and returning the data. However, nothing is diaplying in the editor. I put a breakpoint in schema.parse() but it's never hit. What am I missing?
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
autoBind: false,
suggest: true,
delay: 500,
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: function (opt) {
$.getJSON("/myWebService/GetData");
},
},
schema: {
errors: function (e) {
return e;
},
parse: function (data) {
return data.Name;
}
}
})
});
}
UPDATE:
The data, when shown via JSON.stringfy(data) is like this:
[{"Address":"123 1st St.","ID":"1","Name":"David"},{"Address":"234 2nd St.","ID":"2","Name":"Smith"}]
UPDATE 2:
The code looks like this now:
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
dataValueField: "Name",
autoBind: false,
suggest: true,
delay: 500,
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: function (opt) {
return "/myWebServices/GetData/" + opt.filter.filters[0].value;
},
dataType: "json"
}
},
schema: {
errors: function (e) {
return e;
}
},
data: function (response) {
return $.parseJSON(response);
}
})
});
}
UPDATE 3:
Finally got it working by removing the schema and data section. Accepting OnaBai's answer since he definitely pointed me to the right direction. The final code looks like this:
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
dataValueField: "Name",
autoBind: false,
suggest: true,
delay: 500,
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: function (opt) {
return "/myWebServices/GetData/" + opt.filter.filters[0].value;
},
dataType: "json"
}
}
})
});
}
The problem is the implementation of read function. This function should invoke opt.success with data that you want to return. What you are doing is retrieving data from a URL but you are not returning such data.
But in your case it seem that you don't do anything special (no need for defining a function). So you can define it as an Object and just define transport.read.url
You can use:
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url : "/myWebService/GetData"
}
},
schema: {
parse: function (data) {
return data.Name;
}
}
})
EDIT: For using the data as the server returns it and do not have to parse, you can use:
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>').appendTo(container).kendoAutoComplete({
autoBind : false,
suggest : true,
delay : 500,
dataValueField: "Name",
dataSource : new kendo.data.DataSource({
transport: {
read: {
url : "/myWebService/GetData"
}
}
})
});
}
The trick is defining dataValueField that defines which value of the returned array is the value of the autocomplete.