****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.
Related
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
}
}
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
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.
so i am looking into loading external data in an select2 box where there is prepopulate results from the json
i have two issue - getting the data in and then only loading the first few but when a user searches it passes the request to the rest and then the specific json is returned
so the HTML is a simple as
<input type="hidden" id="e21" style="width:300px;"/>
the inital js is
$(document).ready(function () {
$('#e21').select2({
query: function (query){
var data = {results: []};
console.log(data);
$.each(preload_data, function(){
if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 ){
data.results.push({id: this.id, text: this.text });
}
});
query.callback(data);
}
});
$('#e21').select2('data', preload_data );
});
what that does is load in preload_data so that could be
var preload_data = [
{ id: 'user0', text: 'Disabled User'},
{ id: 'user1', text: 'Jane Doe'},
{ id: 'user2', text: 'John Doe', locked: true },
{ id: 'user3', text: 'Robert Paulson', locked: true },
{ id: 'user5', text: 'Spongebob Squarepants'},
{ id: 'user6', text: 'Planet Bob' },
{ id: 'user7', text: 'Inigo Montoya' }
];
an example is here
http://jsfiddle.net/dwhitmarsh/MfJ4B/10/
but instead of preload_data i want to load in load in a ajax call and pass the results
so i could use
var preload_data = $.ajax({
url: 'data/more.json',
method: 'get',
dataType: 'json'
});
but need to wait for the json to load and only want to load in the first 10.
then when a user actually searches i want to pass extra variables like
string: term, //search term
page_limit: 10, // page size
page: page // page number
page is part of the select 2
can anyone help?
btw the more.json looks like
{
"total": 8,
"result": [{
"id": "1",
"label": "Type",
"safeName":"type",
"jsonFile": "type.json"
},{
"id": "2",
"label": "Primary Applicant Name",
"safeName":"primaryApplicantName",
"jsonFile": "primary.json"
},{
"id": "3",
"label": "Address",
"safeName":"address",
"jsonFile": "address.json"
},{
"id": "4",
"label": "Product",
"safeName":"product",
"jsonFile": "product.json"
},{
"id": "5",
"label": "Verification",
"safeName": "verification",
"jsonFile": "verification.json"
},{
"id": "6",
"label": "Documents",
"safeName": "documents",
"jsonFile": "documents.json"
},{
"id": "7",
"label": "Suburb",
"safeName": "suburb",
"jsonFile": "suburb.json"
},{
"id": "8",
"label": "State",
"safeName": "state",
"jsonFile": "state.json"
}]
}
I am trying to group the data accordingly
Department A(Group)
Class 1(Sub Group)
Morning
Afternoon
Evening
Class 2(Sub Group)
Morning
Afternoon
Evening
Department B(Group)
Any possibilities in Kendo ui grid grouping...
Yes this is possible with Kendo UI Grid. Here is some sample code:
$("#grid").kendoGrid({
dataSource: {
data: [ {
department: "A",
"class": 1,
type: "Evening"
},{
department: "A",
"class": 2,
type: "Morning"
}, {
department: "B",
"class": 1,
type: "Evening"
}, {
department: "B",
"class": 2,
type: "Morning"
}],
// group by "department" and "class"
group: [ { field: "department" }, { field: "class" } ]
},
columns: [ { field: "type" } ]
});
And a live demo: http://jsbin.com/ejalut/1/edit