Consider the following JSON values:
[
{
OrderId: 1,
OrderName: 'order 1'
OrderItems: [
{
ProductId: 1,
ProductName: "sample name"
},
{
ProductId: 2,
ProductName: "sample name 2"
}
}
}
]
I am defining a model with this structure:
var model = kendo.data.Model.define({
id: "OrderId",
fields: {
OrderId: {
type: "number",
editable: false
},
OrderName: {
type: "string",
editable: false
},
OrderItems: {
??????????????
}
}
});
Is it possible to define a model in such a way that we can change the OrderItems during the CRUD operation?
It looks like you're mixing column definitions for your controls and the model for you orders. This simplified model will help you get started with the array of order items.
var model = kendo.data.Model.define(
{
"Order": {
"OrderId": 12345,
"OrderName": "myname",
"OrderItems": [{
"ProductId": 1,
"ProductName": "sample name"
}, {
"ProductId": 2,
"ProductName": "another product"
}]
}
}
)
You can iterate through the model.Order.OrderItems collection with $.each
Related
Using kendo grid edit event I want to disable field name and id during Edit mode. I manage to disable id by following this example here. But went I try to disable name seem it not working, any thought how to do this?
WORKING DEMO IN DOJO
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" },
{ command: "edit" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" },
"name": { type: "string" }
}
}
}
},
editable: "inline",
toolbar:["create"],
edit: function(e) {
if (!e.model.isNew()) {
var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
numeric.enable(false);
//var x = e.container.find("input[name=name]").data("kendoTextBox");
//x.enable(false);
//$("input[name=name]").prop("disabled", true).addClass("k-state-disabled");
//$("input[name=name]").editable = false;
}
}
});
by using editable function i created this
function isEditable(e){
var dataSource = $("#grid").data("kendoGrid").dataSource;
return (e.id == null || e.id == '');
}
and add this into the grid > column
columns: [
{ field: "id", editable: isEditable },
{ field: "name", editable: isEditable },
{ field: "age" },
{ command: "edit" }
],
Full working demo is here
I have this kendo grid blinded to my web service. One of the columns has a custom filter with a kendo multiselector array so the client can choose multiple ItemTypes. The grid is displaying data correctly but my costume filters are not working for this particular column. I got this error from the service: "A binary operator with incompatible types was detected. Found operand types 'Telerik.Sitefinity.DynamicTypes.Model.ClinicFinder.Clinic.ItemType.ItemType' and 'Edm.Int32' for operator kind 'Equal'."
My grid definition
$("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: {
url: function () {
return "//myservice/api/clinics?$select=Id,Title,Address,ItemType,productsystems&top=20";
}
}
},
schema: {
model: {
fields: {
Title: { type: "string" },
CountryCode: { type: "string" },
Street: { type: "string" },
City: { type: "string" },
Zip: { type: "string" },
ItemType: { type: "" }
}
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: false,
pageSize: 20
},
pageable: true,
filterable: {
mode: "row",
extra: false,
showOperators: false,
operators: {
string: {
contains: "contains"
}
}
},
sortable: false,
columns: [
{ field: "Title", title: "Clinic" },
{ field: "CountryCode", title: "Country" },
{ field: "Street", title: "Address" },
{ field: "City", title: "City" },
{ field: "Zip", title: "Zip", filterable: false },
{ field: "ItemType", title: "Clinic Type", filterable: { multi: true } }
],
rowTemplate: kendo.template($("#template").html())
});
My Filter function
function filterByclinicCategory() {
var filter = { logic: "or", filters: [] };
var grid = $('#grid').data('kendoGrid');
var filterValue = $("#clinicTypeFilter").data("kendoMultiSelect").value();
var clinicCode = [];
if (filterValue.length > 0) {
$.each(filterValue, function (i, v) {
clinicCode.push(convertClinicTypesInCodes(v));
filter.filters.push({
field: "ItemType", operator: "eq", value: clinicCode, logic: "or"
});
grid.dataSource.filter(filter);
});
} else {
$("#grid").data("kendoGrid").dataSource.filter({});
}
}
ItemType is the column I can´t filter.
My webservice data
{
"#odata.context": "https://sf-admin-local.medel.com/api/wstest/$metadata#clinics(*)",
"value": [
{
"Id": "896aa08b-2f17-64e6-80bd-ff09000c6e28",
"LastModified": "2019-05-13T09:28:04Z",
"PublicationDate": "2018-06-19T14:19:13Z",
"DateCreated": "2018-06-19T14:19:13Z",
"UrlName": "??",
"Email": "",
"URL": "",
"Telephone": "",
"Title": "????????",
"officeregions": [],
"salespartnerregions": [],
"productsystems": [
"b8ec2a8b-2f17-64e6-80bd-ff09000c6e28",
"1878cb61-ac79-69d9-867b-ff01007297b6",
"1b78cb61-ac79-69d9-867b-ff01007297b6",
"36d8938b-2f17-64e6-80bd-ff09000c6e28"
],
"Area": "",
"Order": 0,
"Tags": [],
"AdditionalInformation": "",
"ImportID": 1,
"Featured": false,
"ItemType": "2",
"Address": {
"Id": "d76aa08b-2f17-64e6-80bd-ff09000c6e28",
"CountryCode": "AT",
"StateCode": "",
"City": "????",
"Zip": "6800",
"Street": "Carinagasse ?????",
"Latitude": 47.2311043,
"Longitude": 9.580079999999953,
"MapZoomLevel": 8
}
}
]
}
I manage to fix it using parameterMap https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.parametermap.
I add a parameterMap: functiondata, type) function, with that I was able to intercept and change the call made by the filters.
parameterMap: function (data, type) {
var c = kendo.data.transports["odata-v4"].parameterMap(data, type);
if (c.$filter) {
//my transformation
c = myTransformation;
return c;
} else{
return c; //not apply transformation loading the data
}
}
I have the following object that contains 2 fixed attributes (OrderId and Purchasedate, and an array of attribues. I try to to put this in ng-repeat with orderBy option. The first 2 attribute (OrderId and PurchaseDate) work OK when sorting is applied by clicking on the header. However I do not get it working on the 3 rd attribute and so on.
The rows shown on the table are correct.
The object looks like
e.g.
$scope.orders;
[
{ OrderId: "P888291", PurchaseDate : "2016-12-02",
Items: { elt : [ { Name: "City", Value: "New York"}, { Name: "Street", Value: "Broadway 5" }, { Name: "Country", Value: "USA" } ] } },
{ OrderId: "P334498", PurchaseDate : "2016-11-02",
Items: { elt : [ { Name: "City", Value: "London" }, { Name: "Street", Value: "WestMinister 3" }, { Name: "Country", Value: "Great Brittain" } ] } },
{ OrderId: "G393383", PurchaseDate : "2016-11-28",
Items: { elt : [ { Name: "City", Value: "Milan" }, { Name: "Street", Value: "Pizza 8" }, { Name: "Country", Value: "Italy" } ] } },
{ OrderId: "P978381", PurchaseDate : "2015-05-25",
Items: { elt : [ { Name: "City", Value: "Seattle" }, { Name: "Street", Value: "Houston 9" }, { Name: "Country", Value: "US" } ] } },
{ OrderId: "P983394", PurchaseDate : "2015-06-05",
Items: { elt : [ { Name: "City", Value: "Amsterdam" }, { Name: "Street", Value: "Damrak 5" }, { Name: "Country", Value: "Netherlands" } ] } },
{ OrderId: "G678994", PurchaseDate : "2015-04-01",
Items: { elt : [ { Name: "City", Value: "The Hague" }, { Name: "Street", Value: "Markt 22" }, { Name: "Country", Value: "Netherlands" } ] } },
{ OrderId: "P128994", PurchaseDate : "2016-12-04",
Items: { elt : [ { Name: "City", Value: "The Hague" }, { Name: "Street", Value: "Plein 7" }, { Name: "Country", Value: "Netherlands" } ] } },
];
Please advise and the code is put in :
http://www.w3schools.com/code/tryit.asp?filename=FAG7BWVK8BYH
You can try with custom filter logic.(https://docs.angularjs.org/api/ng/filter/orderBy )
for example:
JS:
$scope.filterOrderFn = function(orderobj)
{
// Do
if(...)
{
return _something_// this will be your sorted order according to your first condition
}
else if(...)
{
return _something_ // this will be your sorted order according to your second condition if require
}
return false; // otherwise it won't be within the orderlist
};
HTML:
...
<article data-ng-repeat="order in orders | orderBy:filterOrderFn" class="order">
...
If you need a very specific ordering behaviour you could write your own filter (although orderBy should be enough for most uses cases). As you may know you can chain many filters together, so adding your custom filter function doesn't force you to remove the previous filter using the search object (they will work together seamlessly).
****example: http://jsfiddle.net/o8cw3vj8/12/
I am trying to export kendo ui grid and grid has date column, when exported it contains only ############... when date year is less than or equal to 1900
Thanks,****
$("#grid1").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
filterable: true
},
dataSource: {
data: [{
"Id": 1,
"Name": "John",
"DOB": "01/01/1753"
}, {
"Id": 2,
"Name": "Joe",
"DOB": "01/01/1953"
}, {
"Id": 3,
"Name": "Jack",
"DOB": "01/01/1940"
}],
schema: {
model: {
fields: {
Id: {
type: "number"
},
Name: {
type: "string"
},
DOB: {
type: "date"
}
}
}
}
},
columns: [
"Id", "Name", "DOB"
]
});
If you hover the cell you will see a message "Dates and times that are negative or too large display as #####". Here is a screenshot:
This happens because Excel saves dates as numbers of days after 1/1/1990. In your case the numbers become negative hence the display.
I´m intending to use some kendo controls from telerik and I started playing with the Treelist control. I´m doing this with Visual Studio 2013 VB or C#.
The plan is to create a webservice that sends some (serialized) data and the user has to manually press a button which is linked to a $Ajax request that POSTS for the data. That data should be passed to the treelist.
But whatever I try it keeps telling me: No Records to Display
Questions:
1 Why is the sample I provided not working. I copied almost literally one of the demo´s.
2 Do you need a seprate datasource or can you put the data direct in the treelist as well?
Thanks in advance.
Rick (NL)
Sample:
`<script type="text/javascript">
$(document).ready(function () {
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ "Item": "Item0", "id": 0, "ParentId": null },
{ "Item": "Item1", "id": 1, "ParentId": 0 },
{ "Item": "Item2", "id": 2, "ParentId": 1 },
{ "Item": "Item3", "id": 3, "ParentId": 1 },
{ "Item": "Item4", "id": 4, "ParentId": null },
{ "Item": "Item5", "id": 5, "ParentId": null },
{ "Item": "Item6", "id": 6, "ParentId": 5 },
{ "Item": "Item7", "id": 7, "ParentId": 5 },
{ "Item": "Item8", "id": 8, "ParentId": 7 },
{ "Item": "Item9", "id": 9, "ParentId": 7 }
],
schema: {
model: {
id: "id",
expanded: true
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
columns: [
{ field: "Item" },
{ field: "id" },
{ field: "ParentId" }
]
});
});
</script>
parentId also needs to be null if it's the top-level record. That really tripped me up.
#user4659712 yes, you can define the schema. parentId can be anything as long as you tell through the schema:
vm.treeListDataSource = new kendo.data.TreeListDataSource({
data: organizations,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", nullable: false },
parentId: { field: "OverliggendeId", nullable: true }
},
expanded: true
}
},
pageSize: 20
});
This is down to a simple typo the "ParentId" needs to be parentId (note lowercase p).
see this dojo for a working version.
http://dojo.telerik.com/uWaSO
I've fallen foul of this before.
Lets not forget the 'parentId' field on the model definition. We don't have to change the JSON properties that way (ParentId needs describing in fields as well though):
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ Id: 1, Name: "test", ParentId: null },
{ Id: 2, Name: "test 2", ParentId: 1 }
],
schema: {
model: {
id: "Id",
parentId: "ParentId",
fields: {
Name: { field: "Name", type: "string" },
StoreCount: { field: "StoreCount", type: "number" },
ParentId: { field: "ParentId", nullable: true }
},
expanded: true
}
}
});
Does anyone know if you can specify a database column with a different name to be the parentid? For example, my table has node_id and parent_node_id.