I can't get values to show in a kendo treedatasource. Is this valid JSON for the Kendo TreeDataSourc?
"[{\"fields\": {\"tgtWeight\": 0.0, \"hasChildnode\": true, \"parent\": null, \"currWeight\": 0.0, \"classificationNameNode\": null, \"SSM\": \"ssm4\", \"ext_model_id\": 4}, \"model\": \"equity.usersecurityselectionmodel\", \"pk\": 14}]"
Here is the Kendo side.
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: "../getModelTargetWeights?id="+id,
dataType: "json"
}
},
schema: {
model: {
id: "pk",
parentId: "parent",
fields: {
fields: { field: "fields"},
tgtWeight: {field: "tgtWeight", type :"number"}
}
}
}
});
$("#treeList").kendoTreeList({
dataSource: dataSource,
editable: true,
height: 540
Your dataSource schema should look like this:
dataSource: {
schema: {
model: {
id: "pk",
parentId: "parent",
fields: {
parent: { nullable: true}
}
}
}
}
and each element of JSON array should contain hasChildren member
Update: JSON array itself:
[{\"tgtWeight\": 0.0, \"hasChildren\": true, \"parent\": null, \"currWeight\": 0.0, \"classificationNameNode\": null, \"SSM\": \"ssm4\", \"ext_model_id\": 4, \"model\": \"equity.usersecurityselectionmodel\", \"pk\": 14}]
Example: http://dojo.telerik.com/uJoLo
Related
I am displaying Grid and using detailTemplate to expandRow. But when expand the row, I want to pass the row ID and get datasource and display another grid.
I think detailTemplate won't work in this case. How can I do this ?
Here is my Code
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: [
{ id: "1", name: "Andrew", age: "30" },
{ id: "2", name: "Robert", age: "29" },
{ id: "3", name: "Frank", age: "35" }
],
autoSync: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true, type: "number" },
name: { editable: false },
age: {
validation: { min: 0, required: true },
editable: true,
nullable: true,
type: "number"
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
editable: "inline",
columns: [
{ field: "name",title: "Name" },
{ field: "age", title: "Age", width: "180px"},
{ command: ["edit"] }
],
detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>"
});
});
Did you checked this demo from Kendo UI ?
http://demos.telerik.com/kendo-ui/grid/detailtemplate
Similar to your scenario, detail grid is created in detailInit function and data for detail grid is filtered for the current employee using e.data.EmployeeID
I have following init function for inner grid.
Date are fetched but after the change od some data in inner grid is not diplayed small red arrow signalizing change on the dataSource (model).
So if i processed update request no changes made in the inner grid is send back in the request (always it send old data).
How can i solve it please and what i'm doing wrong?
I tried to find some solution here and in documentation but without luck.
Thanks for any help.
function detailInit(e) {
//var dataSource = options.model.get("costCategory");
console.log(e);
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: e.data.milestones,
schema: {
model: {
fields: {
id: {
type: "string"
},
estimate: {
type: "number",
nullable: true,
defaultValue: null,
editable: true
},
actual: { type: "number" }
}
},
data: function(response) {
console.log(response);
return response;
},
},
pageSize: 10
},
scrollable: false,
sortable: true,
editable: "incell",
columns: [
{ field: "id", width: "70px" },
{ field: "milestoneTemplate.name", title:$translate.instant('MILESTONE_TEMPLATE_NAME'), width: "110px" },
{ field: "estimate", title:$translate.instant('ESTIMATE'), width: "110px" },
{ field: "actual", title:$translate.instant('ACTUAL') },
]
});
};
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);
}
I have this grid
$("#address-grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "operations/get_sales_reps_addresses.php?salesRepsId=" + salesRepsId,
type: "GET"
},
update: {
url: "operations/edit_address.php?salesRepsId=" + salesRepsId,
type: "POST",
complete: function (e) {
$("#address-grid").data("kendoGrid").dataSource.read();
}
},
destroy: {
url: "operations/delete_address.php",
type: "POST",
complete: function (e) {
$("address-grid").data("kendoGrid").dataSource.read();
}
},
create: {
url: "operations/add_address.php?salesRepsId=" + salesRepsId,
type: "POST",
complete: function (e) {
$("#address-grid").data("kendoGrid").dataSource.read();
}
},
},
schema: {
data: "data",
total: "data.length", //total amount of records
model: {
id: "SalesRepId",
fields: {
AddressType: {
defaultValue: {
AddressTypeid: 1,
AddressTypeName: "Work"
}
},
Country: {
defaultValue: {
CountryId: 38,
CountryName: "Canada"
}
},
State: {
defaultValue: {
StateId: 4223,
StateName: "British Colombia"
}
},
City: {
defaultValue: {
CityId: 59450,
CityName: "Vancouver"
}
},
PostalCode: {
type: "string"
},
AddressText: {
type: "string"
},
IsMainAddress: {
type: "boolean"
},
AddressId: {
type: "integer"
}
}
}
},
pageSize: 3,
},
ignoreCase: true,
height: 250,
filterable: true,
sortable: true,
pageable: true,
reorderable: false,
groupable: false,
batch: true,
navigatable: true,
toolbar: ["create", "save", "cancel"],
editable: true,
columns: [{
field: "AddressType",
title: "Type",
editor: AddressTypeDropDownEditor,
template: "#=AddressType.AddressTypeName#",
}, {
field: "Country",
title: "Country",
editor: CountryDropDownEditor,
template: "#=Country.CountryName#",
}, {
field: "State",
title: "State",
editor: StateDropDownEditor,
template: "#=State.StateName#",
}, {
field: "City",
title: "City",
editor: CityTypeDropDownEditor,
template: "#=City.CityName#",
}, {
field: "PostalCode",
title: "Postal Code",
}, {
field: "AddressText",
title: "Address",
}, {
field: "IsMainAddress",
title: "Main?",
width: 65,
template: function (e) {
if (e.IsMainAddress == true) {
return '<img align="center" src ="images/check-icon.png" />';
} else {
return '';
}
}
// hidden: true
}, {
command: "destroy",
title: " ",
width: 90
},
]
});
The problem is when I try to filter by Country or State or City I got an error
TypeError: "".toLowerCase is not a function
I tried to change the type of Country to string, I use comobox, so the values were undefined. I also tried to change the type to Object, the values displayed correctly but I couldn't filter. I got the same error( toLowerCase)
How can I fix this ??
My grid is very similar this example
and here is the jsFiddle . I've just added the filter. and I still get previous error
I want to filter on the Category, any help ??
This is how you filter a dataSource Kendo dataSource , filter
So get the dataSource of your grid,
var gridDatasource = $("#address-grid").data('kendoGrid').dataSource;
and filter it like this example.
gridDatasource.filter({ ... });
If you provide a working jsFiddle, you may get a more specific answer.
Specific answer:
You added the filter, so for Category it didn't work because as I said, it is an observable, not a filed you can filter as a string.
So you must specify better your filter for this column, like this:
field: "Category",
title: "Category",
width: "160px",
editor: categoryDropDownEditor,
template: "#=Category.CategoryName#",
filterable: {
extra: false,
field:"Category.CategoryName",
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
}
see this jsFiddle -- > http://jsfiddle.net/blackjim/Sbb5Z/463/
I am developing an Asp.net MVC3 application with Entity Framework. I am using Knockoutjs for bindings and KendoUI for the UI part of the view. I was able to implement most of the KendoUi widgets but now I need to use KendoUI grid control which takes its data from SQL server. As far as I understood the grid widget works with XML or JSON.
So I have a db context:
public DbSet<FranchiseInfoDto> Franchises { get; set; }
I have saved some data in the tables in the local Sql server and retrieve it from the controller and serialize it to Json so I can bind it somehow to the grid widjet in the view:
private OmegaDB db = new OmegaDB();
//
// GET: /Franchise/
public JsonNetResult Index()
{
JsonNetResult jsonNetResult = new JsonNetResult { Formatting = Formatting.Indented };
var franchises = db.Franchises.ToList();
jsonNetResult.Data = franchises;
return jsonNetResult;
}
The serialized json data is in this format :
[{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}];
I read the documentation about the KendoUI Grid and was able to bind it to some local data like this:
var menus = [{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}];
var dataSource = new kendo.data.DataSource({
data: menus,
schema: {
model: {
fields: {
ParentId: { editable: true },
Title: { editable: true },
Type: { editable: true },
Link: { editable: true }
}
}
}
});
$("#grid").kendoGrid({
toolbar: ["create", "save", "cancel"],
columns: [
{
field: "ParentId",
title: "Id",
width: 50
},
{
field: "Title",
title: "Label",
width: 100
},
{
field: "Type",
title: "Type",
width: 100
},
{
field: "Link",
title: "Link"
}
],
dataSource: dataSource,
editable: true,
groupable: true,
scrollable: true,
sortable: true,
pageable: true
});
But when I tried to bind it to the Index controller returning Json I did not succeed. I tried something like this:
dataSource: {
type: "odata",
transport: {
read: "Franchise/Index" // this is my controller action //where I serialize the data coming from the local sql server to json
}
I am rather new to programming and I am not sure whether this approach is correct. Any suggestions with examples based on my sample code will be greatly appreciated. Thank You!
I managed to populate the grid with the serialized data to json from the database. Here is the controller code returning json data:
public ActionResult SampleData()
{
JsonNetResult jsonNetResult = new JsonNetResult { Formatting = Formatting.Indented };
var f1 = new FranchiseInfoSampleData();
f1.ParentId = 0;
f1.Title = "Deposit";
f1.Type = "functionality";
f1.Link = "http://www.abv.bg";
var f2 = new FranchiseInfoSampleData();
f2.ParentId = 1;
f2.Title = "Cash Out";
f2.Type = "link";
f2.Link = "www.abv.bg";
List<FranchiseInfoSampleData> sampleData = new List<FranchiseInfoSampleData>();
sampleData.Add(f1);
sampleData.Add(f2);
jsonNetResult.Data = sampleData;
return jsonNetResult;
}
And here is the Kendo Grid code:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "Home/SampleData",
dataType: "json"
}
},
schema: {
model: {
fields: {
ParentId: { editable: true },
Title: { type: "string", editable: true },
Type: { type: "string", editable: true },
Link: { type: "string", editable: true }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "ParentId",
filterable: false
},
{
field: "Title",
width: 100
}, {
field: "Type",
width: 200
}, {
field: "Link"
}
]
});
});