I have a kendo dropdown in my page using the following list as data source
[{FieldOne:'def',FieldTwo:'p',FieldThree:14},
{FieldOne:'ijk',FieldTwo:'p',FieldThree:14},
{FieldOne:'lmn',FieldTwo:'p',FieldThree:14},
{FieldOne:'bcd',FieldTwo:'',FieldThree:14}]
I need to sort this data source based on FieldOne ascending and FieldTwo descending
I'm using the following code to sort the data source
var dropdownlist = $("#dropdown").data("kendoDropDownList");
dropdownlist.dataSource.sort({ field: 'FieldOne', dir: 'asc' });
dropdownlist.dataSource.sort({ field: 'FieldTwo', dir: 'desc' });
Its working fine initially but if I add another object like {FieldOne:'abc',FieldTwo:'p',FieldThree:14} to the data source I'm getting the following result
[{FieldOne:'def',FieldTwo:'p',FieldThree:14},
{FieldOne:'ijk',FieldTwo:'p',FieldThree:14},
{FieldOne:'lmn',FieldTwo:'p',FieldThree:14},
{FieldOne:'abc',FieldTwo:'p',FieldThree:14},
{FieldOne:'bcd',FieldTwo:'',FieldThree:14}]
but I want the datasource sorted as
[{FieldOne:'abc',FieldTwo:'p',FieldThree:14},
{FieldOne:'def',FieldTwo:'p',FieldThree:14},
{FieldOne:'ijk',FieldTwo:'p',FieldThree:14},
{FieldOne:'lmn',FieldTwo:'p',FieldThree:14},
{FieldOne:'bcd',FieldTwo:'',FieldThree:14}]
I don't know how to achieve this I tried almost everything I know but still no result. Is there anyway that I can get the desired result???
You shoud define sorting in dataSource:
<input id="dropdownlist" />
<script>
var dropdownlist = $("#dropdownlist").kendoDropDownList({
dataSource:{
data:[{FieldOne:'def',FieldTwo:'p',FieldThree:14},
{FieldOne:'ijk',FieldTwo:'p',FieldThree:14},
{FieldOne:'lmn',FieldTwo:'p',FieldThree:14},
{FieldOne:'bcd',FieldTwo:'',FieldThree:14}],
sort: [
{ field: "FieldOne", dir: "asc" },
{ field: "FieldTwo", dir: "desc" }
]
},
dataTextField: "FieldOne",
dataValueField: "FieldTwo"
}).data('kendoDropDownList');
dropdownlist.dataSource.add({FieldOne:'abc',FieldTwo:'p',FieldThree:14});
</script>
check http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-sort for more info
Related
I want to sort the bar series on each category of my kendo chart Like this image.
My code is here https://dojo.telerik.com/EDERUfEY
Thanks in advance!
The only sorting that we can apply is on the data source group.
"dataSource": {
data: data,
group: {
field: "type",
dir: "desc"
},
sort: {
field: "daysOut",
dir: "asc"
},
This API Reference Link, explains why data source sort attribute is overridden by grouping and how we can see it sorted by a particular group when we click on the legend labels.
As of now, I have not found any solutions to render the chart with a stacked bar sorted by values.
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
}
}
}
Very easy case displayed here: http://jsbin.com/ahoYoPi/3/edit
I need to specify that the child's inner field to filter (eq) against the parent's value field is "category_id"... Of course, Kendo's documentation doesn't say anything about how to do that... Or is it something so super obvious it doesn't deserve to be explained ?
var categoriesList = new Array (
{"id":"1","categoryName":"Fruits"},
{"id":"2","categoryName":"Vegetables"} );
var productsList = new Array(
{"id":"1","categorie_id":"1","productName":"Apples"},
{"id":"2","categorie_id":"1","productName":"Oranges"},
{"id":"3","categorie_id":"2","productName":"Carottes"},
{"id":"4","categorie_id":"2","productName":"Patatoes"});
$("#categories").kendoDropDownList({
dataTextField: "categoryName",
dataValueField: "id",
dataSource: categoriesList,
optionLabel: "----------------" ,
change: function() {
$("#products").data("kendoDropDownList").value(0);
}
});
$("#products").kendoDropDownList({
cascadeFrom: "categories",
dataTextField: "productName",
dataValueField: "id",
dataSource: productsList,
optionLabel: "----------------" ,
});
The documentation about cascading is available here: http://docs.kendoui.com/getting-started/web/combobox/cascading
Here is how filtering works:
If the parent has a value, then the child will be enabled and will
filter its data depending on it. Here how the filter options will look
like:
field: "parentID", //the dataValueField of the parent
operator: "eq",
value: "" //parent's value
This means that the child dropdownlist (combobox) will use the field configured via dataValueField of the parent to do the filtering (cascading). In your case this doesn't work because dataValueField of the parent is set to "id". This field however serves a different purpose in the productsList array.
Currently there is no feature which allows one to specify the field used for cascading.
You have two options:
Do what #OnaBai suggested. Rename the "id" field of the categoriesList to "categorie_id" and set dataValueField accordingly.
Implement cascading manually. First remove the cascadeFrom option and then do this in the change event of the parent:
change: function() {
var products = $("#products").data("kendoDropDownList");
products.dataSource.filter( {
field: "categorie_id",
value: this.value(),
operator: "eq"
});
products.value(0);
}
Here is a live demo: http://jsbin.com/ogEj/1/edit
When loading a dgrid from a dojo store, is there a way to specify a column to be sorted by default.
Say I have 2 columns, Name and Email, I want the name column sorted by default when the grid is first loaded. What I want is the equivalent of the user clicking on the 'Name' header (complete with the sort arrow indicating the sort direction).
Thanks,
John
You can do something like this :
var mygrid = new OnDemandGrid({
store : someStore,
queryOptions: {
sort: [{ attribute: "name" }]
}
// rest of your grid properties
}, "someNode");
dgrid 1.1.0 - set initial/default sort order
var TrackableRest = declare([Rest, SimpleQuery, Trackable]);
var store = new TrackableRest({target: apiUrl, useRangeHeaders: true, idProperty: 'id'});
var grid = new (declare([OnDemandGrid, Selection, Editor]))({
collection: store,
sort: [{"property":"name", "descending": false}],
className: "dgrid-autoheight",
columns: {
id: {
label: core.id
},
category_text: {
label: asset.category
},
name: {
label: asset.model,
},
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