Not able to get value from the Kendo Combobox - kendo-ui

I am using below code in Kendo Grid editor but unable to access value of selected item value from Combobox.
Moreover, I have done same thing in Kendo drop down list but unable to kendo Combobox, so if anyone has solution please let me know.
Thanks in Advance !
{
field: "SalesBookId",
title: "Sales Book",
template: "#= (typeof SalesBookId != 'undefined') ? GetSalesBookName(SalesBookId):'' #",
editor: function (container, options) {
$('<input required data-text-field="SalesBookName" data-value-field="SalesBookId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: dsSalesBookDropDown,
});
}
},

You have not shown the dsSalesBookDropDown, nor GetSalesBookName so it is hard to know what is wrong in your specific case.
This dojo demonstrates that when the configurations, handlers and data all align properly there should not be a problem.
The dojo is a based on the example "Grid with local data", your SalesBook concept is changed to Seller for the example.
Code related to the custom editor include
var sellers = [
{ SellerId: 1, Name: "Andrew" },
{ SellerId: 2, Name: "Basil" },
{ SellerId: 3, Name: "Chuck" },
{ SellerId: 4, Name: "Dennis" },
{ SellerId: 5, Name: "Edward" }
];
var dsSellersDropDown = sellers;
function GetSellerName (id) {
var seller = sellers.find(function(x) {return x.SellerId == id });
return (seller) ? seller.Name : "** invalid id " + id + " **";
}
var products = [{
ProductID : 1,
ProductName : "Chai",
SellerId: 1,
SupplierID : 1,
CategoryID : 1,
. . .
grid config
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
SellerId: { type: "number" },
and
columns: [
"ProductName",
{ field: "SellerId",
title: "Seller Name",
template: "#= (typeof SellerId != 'undefined') ? GetSellerName(SellerId):'' #",
editor: function (container, options) {
$('<input required data-text-field="Name" data-value-field="SellerId" data-bind="value:'
+
options.field
+ '"/>')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: dsSellersDropDown,
});
}
},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },

Related

How to get field value when edit data in Kendo Ui treelist

I'm new in Kendo UI,and i have a question. Now i'm use TreeList / Editing and how to auto load value to other field when i edit value to first field ?
example:
1.serial number: 123456789
2.name : test
when i edit serial number 123456789 to first field and auto load name to second field.
To set the value of column B based on change made to a column A, you need to edit the model bound to the tree list. For this do the following:-
Handle edit event of the tree list. On this save the model to a
local variable.
Add an editor
template
to column A. On the select event set the value of model.
Below is a working code snippet:-
<div id="treelist"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
var model= null;
var employeesData=[{"EmployeeId":101,"FirstName":"Daryl","LastName":"Sweeney"},
{"EmployeeId":202,"FirstName":"Guy","LastName":"Wooten"},
{"EmployeeId":303,"FirstName":"Priscilla","LastName":"Frank"},
{"EmployeeId":404,"FirstName":"Ursula","LastName":"Holmes"},
{"EmployeeId":505,"FirstName":"Anika","LastName":"Vega"}];
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory/All",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
schema: {
model: {
id: "EmployeeId",
parentId: "ReportsTo",
fields: {
EmployeeId: { type: "number", nullable: false },
ReportsTo: { nullable: true, type: "number" },
FirstName: { validation: { required: true } },
HireDate: { type: "date" },
Phone: { type: "string" },
HireDate: { type: "date" },
BirthDate: { type: "date" },
Extension: { type: "number", validation: { min: 0} },
Position: { type: "string" }
},
expanded: true
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
toolbar: [ "create", "save", "cancel" ],
editable: "incell",
height: 540,
dataBound: function (e) {
var items = e.sender.items();
for (var i = 0; i < items.length; i++) {
var dataItem = e.sender.dataItem(items[i]);
var row = $(items[i]);
if (dataItem.isNew()) {
row.find("[data-command='createchild']").hide();
}
else {
row.find("[data-command='createchild']").show();
}
}
},
edit: function(e) {
model = e.model;
},
columns: [{
field: "EmployeeId",
expandable: true,
title: "Serial Number",
width: 180,
editor: function(container, options) {
// create an input element
var input = $("<input/>");
// set its name to the field to which the column is bound ('lastName' in this case)
input.attr("name", options.field);
// append it to the container
input.appendTo(container);
// initialize a Kendo UI AutoComplete
input.kendoAutoComplete({
dataTextField: "EmployeeId",
dataSource: employeesData,
select: function(e) {
if(model !=null){
model.FirstName = e.dataItem.FirstName;
model.LastName = e.dataItem.LastName;
}
}
});
}
},
{ field: "FirstName", title: "First Name", width: 100 },
{ field: "LastName", title: "Last Name", width: 100 },
{ field: "Position", width: 100 },
{ field: "Phone", title: "Phone", width: 100 },
{ field: "Extension", title: "Ext", format: "{0:#}", width: 100 },
{ command: [{name: "createchild", text: "Add child"},"destroy" ], width: 240 }]
});
});
</script>
You can trigger your function when the row is being saved or when the edit field is being changed. Take a look at the list of events here and choose when exactly you want to make the changes. https://demos.telerik.com/kendo-ui/treelist/events
here is a example how to all a function when saving the changes: https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist/methods/saverow
I´m not sure witch edit method you are using (inline, inCell or Popup edit mode) each method can use events like saveRow, beforeEdit...
Check all the events documentation here: https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events

KendoUI Date field is not filtering. It's Making grid blank

I tried with sample data using below JS code:
$(document).ready(function () {
var PraksysDateFormats = ["dd-MM-yyyy", "dd/MM/yyyy", "dd-MM-yy", "dd/MM/yy", "dd.MM.yy", "ddMMyy", "ddMM", "dd.MM.yyyy", "ddMMyyyy"];
relationDataSource = new kendo.data.DataSource({
data: [
{ ProductName: "Computer", UnitPrice: 100, UnitsInStock: 5, Discontinued: false, FromDate: new Date(kendo.toString(kendo.parseDate("10-11-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')), ToDate: new Date(kendo.toString(kendo.parseDate("11-11-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')) },
{ ProductName: "TV", UnitPrice: 1000, UnitsInStock: 5, Discontinued: false, FromDate: new Date(kendo.toString(kendo.parseDate("20-10-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')), ToDate: new Date(kendo.toString(kendo.parseDate("22-10-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')) },
],
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" },
FromDate: { type: "date" },
ToDate: { type: "date" }
}
}
},
});
var grid = $("#grid").kendoGrid({
dataSource: relationDataSource,
scrollable: true,
sortable: true,
//editable: true,
filterable: true,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
{ field: "UnitsInStock", title: "Units In Stock" },
{ field: "Discontinued", title: "Discontinued" },
{
field: "FromDate", title: "From Date", editor: FromDatePicker, width: 200, format: "{0:dd-MM-yyyy}", filterable: {
ui: dateFilter
}
},
{
field: "ToDate", title: "To Date", editor: ToDatePicker, width: 200, format: "{0:dd-MM-yyyy}", filterable: {
ui: dateFilter
}
}
],
edit: function (e) {
var grid = this;
var fieldName = grid.columns[e.container.index()].field;
// alert(fieldName)
},
save: function (e) {
var grid = this;
var fieldName = grid.columns[e.container.index()].field;
// alert(e.container.index());
// alert(fieldName)
var productName = e.values.ProductName || e.model.ProductName;
var relation = e.values.Relation || e.model.Relation;
var dataItem = this.dataSource.getByUid(e.model.uid);
dataItem.set("ProductName", productName);
dataItem.set("UnitPrice", 9000);
dataItem.set("UnitsInStock", 99);
dataItem.set("Discontinued", true);
},
update: function (e) {
alert("Update")
}
}).data("kendoGrid");
function FromDatePicker(container, options) {
alert(options.field);
$('<input id="BrugergyldigFradato" name="FromDate" dynamicfield="71" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDatePicker({
format: "dd-MM-yyyy",
parseFormats: PraksysDateFormats,
culture: "da-DK"
});
$('<span class="k-invalid-msg" data-for="FromDate"></span>').appendTo(container);
};
function ToDatePicker(container, options) {
alert(options.field);
$('<input id="BrugergyldigTildato" name="ToDate" dynamicfield="71" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDatePicker({
format: "dd-MM-yyyy",
parseFormats: PraksysDateFormats,
culture: "da-DK"
});
$('<span class="k-invalid-msg" data-for="ToDate"></span>').appendTo(container);
};
function dateFilter(element) {
element.kendoDatePicker({
format: "dd-MM-yyyy",
culture: "da-DK"
});
};
});
I am able to filter all columns, except last 2 date fields. On entering a date field filter value, it's making the grid blank. My date format is "dd-MM-yyyy". Any clue here would be appreciated.
Don't use new Date in your datasource.
On my browser(chrome):
new Date("2016-11-11")
Fri Nov 11 2016 02:00:00 GMT+0200
As you see date is converted to local time here. But when you filter with 11-11-2016 your filter will not be converted. In that case your filter value will be
Fri Nov 11 2016 00:00:00 GMT+0200
Therefore equality check fails.
Instead you can use only kendo.parseDate to assign your date values and it will work.
data: [
{ ProductName: "Computer", UnitPrice: 100, UnitsInStock: 5, Discontinued: false, FromDate: kendo.parseDate("10-11-2016", 'dd-MM-yyyy'), ToDate: kendo.parseDate("11-11-2016", 'dd-MM-yyyy') },
{ ProductName: "TV", UnitPrice: 1000, UnitsInStock: 5, Discontinued: false, FromDate: kendo.parseDate("20-10-2016", 'dd-MM-yyyy'), ToDate: kendo.parseDate("22-10-2016", 'dd-MM-yyyy') },
],
This turnout to be a formatting issue and now working as expected

Kendo DataSource create method not getting called

Why is my transport's create method not being called when I click the "Save Changes" button on the grid? Everything appears to be working except my controller code for create isn't getting called.
Kendo Code:
var ds = new kendo.data.DataSource({
transport: {
read: {
cached: false,
url: '#Url.Action("GetListOfFacilities", "Tactic")',
dataType: "json"
}
}
});
var OrgdataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("ReadOrganizations", "Tactic")',
dataType: "json"
},
create: {
url: '#Url.Action("AddOrganization", "Tactic")',
type: "POST",
dataType: "json"
}
},
batch: false
schema: {
model: {
id: "id",
fields: {
id: { type: "string", editable: false },
Name: { type: "string" }
}
}
}
});
$("#FacilityGrid").kendoGrid({
dataSource: OrgdataSource,
autoBind: true,
autoSync: true,
editable: { mode: "inline" },
selectable: true,
toolbar: ["save", "create"],
columns: [
{ command: ["destroy"], title: " ", width: "150px" },
{ field: "Name", title: "Facility Name", editor: OrgDropDownEditor },
]
});
function OrgDropDownEditor (container, options) {
$('<input required data-text-field="Text" data-value-field="Value" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: ds
});
}
Controller Code:
[HttpPost]
public JsonResult AddOrganization(SelectListItem selectedOrg)
{
...
}
[HttpGet]
public string GetListOfFacilities()
{
var lst = new List<SelectListItem>();
lst.Add(new SelectListItem() { Value = "1", Text = "Facility 1" });
lst.Add(new SelectListItem() { Value = "2", Text = "Facility 2" });
lst.Add(new SelectListItem() { Value = "3", Text = "Facility 3" });
lst.Add(new SelectListItem() { Value = "4", Text = "Facility 4" });
lst.Add(new SelectListItem() { Value = "5", Text = "Facility 5" });
var json = new JavaScriptSerializer().Serialize(lst);
return json;
}
Try removing "id" from the fields object. It doesn't need to be in there if you have specified it as the id of the model.
I had the same problem like this. I have resolved it by defining a default value for my model fields. In your model you should provide a default value for Name field to prevent passing null to datasource.
schema: {
model: {
id: "id",
fields: {
id: { type: "string", editable: false },
Name: { type: "string" }
}
}
}

Kendo UI grid (inline edit) update and cancel not working

i create grid with data by javascript. when i click edit button at first time on any row and click update button. values in first row are null and then i edit other row i can't update or cancel, both button are not working.
when i refresh then click edit and then click cancel that row has removed i don't know why?
What's happend? How to fix?
Data
var detail = new Array();
for (var i = 1; i < 6; i++) {
detail.push({
Score: i,
Condition: 0,
ValueStart: 0,
ValueEnd: 0,
});
}
Grid
for (var i = 0; i < 3; i++) {
$("#GridScoreRangeContent").append("<div id='scoreRangeGrid_"+i+"'></div>");
$("#scoreRangeGrid_"+i).kendoGrid({
dataSource: {
data: detail,
batch: true,
schema: {
model: {
fields: {
Score: { editable: false },
Condition: { defaultValue: { Value: 1, Text: "Less than" }, validation: { required: true } },
ValueStart: { type: "number", validation: { required: true, min: 1 } },
ValueEnd: { type: "number", validation: { required: true, min: 1 } },
}
}
}
},
columns: [{ field: "Score", title: "Score" }},
{ field: "Condition", title: "Condition", editor: ScoreRangeDropDownList, template: "#=Condition#" },
{ field: "ValueStart", title: "Start" },
{ field: "ValueEnd", title: "End" },
{ command: ["edit", "destroy"], title: " ", width: "180px" }
],
editable: "inline"
});
}
Load Dropdownlist
function ScoreRangeDropDownList(container, options) {
$.ajax({
url: GetUrl("Admin/Appr/LoadDropdownlist"),
type: 'post',
dataType: 'json',
contentType: 'application/json',
traditional: true,
cache: false,
success: function (data) {
$('<input required data-text-field="Text" data-value-field="Value" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: data,
dataTextField: "Text",
dataValueField: "Value",
});
}
});
}
Kendo seems to rely on a model ID when saving/updating. So in your dataSource, you have to specify an id:
model: {
id: "Id",
fields: {
Id: { type: "number" },
Score: { editable: false },
Condition: { defaultValue: { Value: 1, Text: "Less than" }, validation: { required: true } },
ValueStart: { type: "number", validation: { required: true, min: 1 } },
ValueEnd: { type: "number", validation: { required: true, min: 1 } },
}
}
What dmathisen is suggesting is definitely important but in addition it is important that the <input/> you create has a name attribute equal to the name of the column. You can use the value of options.field again as in the code from the Kendo Demos page example:
// create an input element
var input = $("<input/>");
// set its 'name' to the field to which the column is bound
input.attr("name", options.field);
// append it to the container
input.appendTo(container);
// initialize a Kendo UI Widget
input.kendoDropDownList({
.
.

Set the selected text or value for a KendoDropDownList

I'm using Durandal and Kendo UI. My current problem is the edit popup event on my grid. I cannot seem to set the selected value on my dropdown.
I can debug and inspect, and I indeed do see the correct value of e.model.InstrumentName nicely populated.
How can I set the value/text of those dropdowns in edit mode ?
Here's my grid init:
positGrid = $("#positGrid").kendoGrid({
dataSource: datasource,
columnMenu: false,
{
field: "portfolioName", title: "Portfolio Name",
editor: portfolioDropDownEditor, template: "#=portfolioName#"
},
{
field: "InstrumentName",
width: "220px",
editor: instrumentsDropDownEditor, template: "#=InstrumentName#",
},
edit: function (e) {
var instrDropDown = $('#InstrumentName').data("kendoDropDownList");
var portfDropDown = $('#portfolioName').data("kendoDropDownList");
instrDropDown.list.width(350); // let's widen the INSTRUMENT dropdown list
if (!e.model.isNew()) { // set to current valuet
//instrDropDown.text(e.model.InstrumentName); // not working...
instrDropDown.select(1);
//portfDropDown.text();
}
},
filterable: true,
sortable: true,
pageable: true,
editable: "popup",
});
Here's my Editor Template for the dropdown:
function instrumentsDropDownEditor(container, options) {
// INIT INSTRUMENT DROPDOWN !
var dropDown = $('<input id="InstrumentName" name="InstrumentName">');
dropDown.appendTo(container);
dropDown.kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
dataSource: {
type: "json",
transport: {
read: "/api/breeze/GetInstruments"
},
},
pageSize: 6,
select: onSelect,
change: function () { },
optionLabel: "Choose an instrument"
}).appendTo(container);
}
thanks a lot
Bob
Your editor configuration is bit unlucky for grid, anyway i have updated my ans on provided code avoiding manual selections:
Assumptions: Instrument dropdown editor only (leaving other fields as strings), Dummy data for grid
<div id="positGrid"></div>
<script>
$(document).ready(function () {
$("#positGrid").kendoGrid({
dataSource: {
data: [
{ PositionId: 1, Portfolio: "Jane Doe", Instrument: { IID: 3, IName: "Auth2" }, NumOfContracts: 30, BuySell: "sfsf" },
{ PositionId: 2, Portfolio: "John Doe", Instrument: { IID: 2, IName: "Auth1" }, NumOfContracts: 33, BuySell: "sfsf" }
],
schema: {
model: {
id: "PositionId",
fields: {
"PositionId": { type: "number" },
Portfolio: { validation: { required: true } },
Instrument: { validation: { required: true } },
NumOfContracts: { type: "number", validation: { required: true, min: 1 } },
BuySell: { validation: { required: true } }
}
}
}
},
toolbar: [
{ name: "create", text: "Add Position" }
],
columns: [
{ field: "PositionId" },
{ field: "Portfolio" },
{ field: "Instrument", width: "220px",
editor: instrumentsDropDownEditor, template: "#=Instrument.IName#" },
{ field: "NumOfContracts" },
{ field: "BuySell" },
{ command: [ "edit", "destroy" ]
},
],
edit: function (e) {
var instrDropDown = $('#InstrumentName').data("kendoDropDownList");
instrDropDown.list.width(400); // let's widen the INSTRUMENT dropdown list
},
//sortable: true,
editable: "popup",
});
});
function instrumentsDropDownEditor(container, options) {
$('<input id="InstrumentName" required data-text-field="IName" data-value-field="IID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: {
type: "json",
transport: {
read: "../Home/GetMl"
}
},
optionLabel:"Choose an instrument"
});
}
</script>
Action fetching json for dropddown in Home controller:
public JsonResult GetMl()
{
return Json(new[] { new { IName = "Auth", IID = 1 }, new { IName = "Auth1", IID = 2 }, new { IName = "Auth2", IID = 3 } },
JsonRequestBehavior.AllowGet);
}

Resources