KendoUI Grid Filtering Issues - kendo-ui

I'm using the latest version of kendoui and whenever I use the "is not equal to" or "does not contain" filter I get the following error:
Uncaught TypeError: Cannot read property 'length' of undefined
I'm using a server side datasource, all the other filters seem to work without issue.
Also, how do I specify a datetimepicker for a date column?
I've looked at the documentation and tried using:
filterable: {
ui: "datetimepicker"
}
But it never shows the datetimepicker.
Here is the code:
var dataSourceArguments = {
pageSize:10,
serverPaging:true,
serverFiltering:true,
serverSorting:true,
transport:{
read:{
url:$("#grid_order").attr('data-url'),
dataType:"json"
}
},
schema:{
total:"count",
data:'fields'
},
sort:{'field':'order_date', dir:'desc'}
};
var ds2 = new kendo.data.DataSource(dataSourceArguments);
$("#grid_order").kendoGrid({
dataSource:ds2,
groupable:true,
scrollable:true,
sortable:true,
pageable:true,
columns:[
{
field:'order_date',
title:'Order Date',
width:150,
filterable: {
ui: "datetimepicker"
}
},
{
field:"reference",
title:'Reference',
width:120,
encoded:false
},
{
field:"client__company",
title:'Client',
encoded:false
},
{
field:"grand_total",
title:'Total',
width:100
},
{
field:'status',
title:'Status',
width:120,
encoded:false
},
{
field:'actions',
width:200,
title:'Actions',
filterable:false,
encoded:false,
sortable:false
}
],
filterable:true
});
UPDATE: I managed to get the datepicker working however whenever I choose the date, and click filter it filters but the date I've chosen dissapears from the field.

Add the order_date to the scheme from the data source, and the data type of the field to date.
See http://docs.kendoui.com/api/framework/datasource

Related

KendoGrid - Filtering on a property of object

here is my KendoGrid :
$scope.gridEltCompoOptions = {
dataSource: {
transport: {
...
},
schema: {
model: {
id: 'IdElement',
fields: {
GroupeActes: { defaultValue: { IdGroupeActes: null, Libelle: ' ' } }
}
}
}
},
sortable: true,
resizable: true,
filterable: {
mode: 'row'
},
columns: [{
field: 'GroupeActes',
title: "Groupe d'actes",
template: function (dataItem) {
return kendo.toString(dataItem.GroupeActes.Libelle);
}
}, ]
I want to filter my field 'GroupeActes' on the property Libelle (GroupeActes is an object), but actually the filter take the entire object.
When i try to filter, i have a Js Error
Uncaught TypeError: (d.GroupeActes || "").toLowerCase is not a function
The problem is clear, the filter is taking the entiere object, not the property Libelle.
i passed the last 4 hours to try all the solutions i found on google but nothing is working
my object GroupeActes is like this :
var GroupeActes = {
GroupeActes : {
Libelle : ""
}
}
there is two groupeActes level
I saw a post in 2015 of an Admin, saying this kind of filter isn't possible,
but i saw also this kind of solution :
https://docs.telerik.com/kendo-ui/knowledge-base/grid-filter-column-with-dropdownlist
(if(e.field == "Category" && e.filter !== null){) in the example
i tried to do something like : if field == "groupeActes" => so i want to filter on Libelle properties,
but i didn't success
Can someone help me please ?
thank you so much
Have you looked at this article: https://docs.telerik.com/kendo-ui/knowledge-base/enable-operations-for-object-column
I believe you can accomplish what you want by setting the column field to "GroupeActes.Libelle" instead of using a column template:
columns: [
{
field: 'GroupeActes.Libelle',
title: "Groupe d'actes",
},
],
See this DEMO:

jqgrid reading form element value and dynamically changing select option

I like to change the Type field drop down option depending on the inputs of Year and Level fields.
I am able to trigger an event when Level is change.
But how do I get the value of the Year field?
Portion of the code are as follows
colModel:[
{name:'Year',index:'Year', width:70,sortable:false,editable:true,align:'center',editoptions:{size:15, maxlength:4}, formoptions:{ rowpos:1, label: "Year (*)"},editrules:{required:true}},
{name:'Level',index:'Level', width:70,sortable:false,editable:true,align:'center',edittype: "select", editoptions: { value: '1:1;2:2;3:3;4:4;5:5;6:6', defaultValue:'1', dataEvents : [
{
'type' : 'change',
'fn' : function ( el ) {
// get the newly selected value from the user
var levelz = $(el.target).val(), yearz ;
var row = $(el.target).closest('tr.jqgrow');
var rowid = row.attr('id');
//yearz = ??
if (parseInt(levelz)==5 || parseInt(levelz)==6)
{
if (parseInt(yearz)>2017)
{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:Sem 1;4:Sem 2;6:EY;9:OVR', defaultValue:'Sem 1'}} );
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '', defaultValue:''}} );
}
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}} );
}
}
}]}, formoptions:{ rowpos:2, label: "Level (*)"},editrules:{required:true}},
{name:'Term',index:'Term', width:70, sortable:false,editable: true,align:'center',edittype: "select", editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}, editrules: { required: true }, formoptions:{ rowpos:3, label: "Type"}},
The codes are from piecing together what I read from google search...
I face 2 issues:
1) I don't know how to get the Year value
2) The drop down option list doesn't seems to change. - hmm it seems that if I close the edit form and open again, the Type field drop down option changes. What I need is to change the option on the fly - wonder how this can be done...
After much googling, managed to get the ans from Oleg's post as shown here
Also from his example, I derive the year value:
var yearz = $("#Year.FormElement", form[0]).val();

sortInfo does not work

I am trying to display data from table in sorted way. I want to display content ordered by creation date. I add sortInfo, but it does not work! I use angular ui-grid. Here is my code
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name'},
{ field: 'age'},
{ field: 'creationDate', cellFilter : "date:'yyyy-MM-dd'"}
],
sortInfo: {
fields: ['creationDate'],
directions:['desc']
}
};
Is it possible to set sort by default here? And how to do it?
I didn't found in ui-grid docs sortInfo option.
Your gridOptions is not set right. You need to add the sort property to your column definition like below, the priority is what makes it sort by default. Lower priority gets sorted first. Read more here http://ui-grid.info/docs/#/tutorial/102_sorting
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{
field: 'name',
sort: {
direction: uiGridConstants.DESC,
priority: 1
}
}
}

Kendo-Grid column field validation

I am working on populating kendo--grid with APIs data but on adding validation on one field is automatically working for every other fields too.
Here is schema inside kendo-dataSource :
schema: {
model: {
id : "id",
fields: {
id: { editable: false, type: 'number'},
name: { editable: true, type : "string" },
unique_url: { editable: true , type: 'string'},
image_url : { editable: true, type : "string" },
title: {type : "string", validation: {
required: true,
validateTitle: function (input) {
console.log("I am inside validation",input.val());
if (input.val().length > 5) {
input.attr("data-validateTitle-msg", "Max length exceeded 5 characters only");
return false;
}
return true;
}
}
},
body: { editable: true, type : "string",validation: { max: 90, required: true, message : "Maximum characters should be 90"} },
adaccount_id: { editable: false, type: 'number'}
}
}
},
Here I have added validation for title field but its getting called for others fields too.
I am adding one snapshot of validation---
Please help me to find errors in it.
There isn't really any error in your code, but more like an error in Kendo Grid's validation design. Even though you specify the validation function only in the title field, it will run the validation globally for any input field that you edit.
In validateTitle you need to filter which input you want the validating function to run on. Something like this:
if (input.is("[name='title']") && input.val().length > 5) {
input.attr("data-validateTitle-msg", "Max length exceeded 5 characters only");
return false;
}
If you need a live working demo, you can always refer to Telerik's online demos that are editable, very handy for playing around with things. Here's the demo for custom validation where they similarly have to filter the input for the field name.
you want simply required field validation means just add your view model property attributes
[Required(ErrorMessage ="CountryCode is Mandatory")]
public virtual string CountryCode
{
get;
set;
}
We can easily set the maximum length using this code,It will not allow user to enter more characters than the specified one
model: {
id: "CLASSID",
fields: {
CLASSID: { type: "number" },
CLSNAME: { type: "string" },
CLSFLAG: {
type: "string", validation: {
required: true,maxlength:"3"
}
},
CLSSTATUS: { type: "boolean" }
}
}

KendoUI - Chart data labels

Is is possible to for the KendoUI Chart (Area) to have multiple data labels or even a concatenation of two? I need to display both a value and a percentage for each data point. Is this something that would need to be handled on the data source side or is it on the view?
Thanks for any help.
You can use templates to format both labels and tooltips; see labels.template and tooltip.template.
The key is to reference the Property you want using dataItem ex:
dataItem.TotalDollars
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
The answer above wont really help unless you have a strong understanding of the Kendo UI framework. I was having a similar issue and before I found my answer I found this question. I circled back because the answer is simple and some simple example code is really simple. Lets save everyone some clicks.
DATA RESPONSE FROM REMOTE DATA (copy and past for local binding):
[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]
**Chart Generation Code: **
function createChart() {
$("#SubmissionSummaryByProgramChart").kendoChart({
title: {
text: "Breakdown by Program"
},
legend: {
position: "right"
},
dataSource: {
transport: {
read: {
url: "GetFooData",
dataType: "json",
data: {
Year : 2014,
Quarter : 1,
}
}
}
},
series: [{
type: "pie",
field: "PercentageShare",
categoryField: "ProgramName"
}],
tooltip: {
visible: true,
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
}
});
};
$(document).ready(createChart);

Resources