From a grid I can get the data source using:
var ds = $(#mygrid).data("kendoGrid").dataSource;
or from a listview:
var ds = $(#mylist).data("kendoListView").dataSource;
But how do I get it if I do not know if its a grid or listview (or scheduler)?
For example:
// Refresh data for any dataSource based control:
$(#myControl).data("???").dataSource.read();
You can get the widget of an object like this:
var control = kendo.widgetInstance($('#myControl'), kendo.ui);
Then you could check if there is a dataSource, and do something with it:
if(control.dataSource) {
control.dataSource.read();
}
Related
I am trying to set pagesize of the grid dynamically with the window size and populate the data items/rows inside it. I've added a function to calculate how many rows the grid can fit in. I've tested the function and it works correctly. But the thing is the data items/rows are not displayed inside the grid. FYI: here, I am just using local datasource as a testing purpose.
Calculating rows function:
function RowCount(){
var TableHead = $('.k-grid-header').height();
var WWidth = $(window).height();
var TablePager = Math.round($('.k-grid-pager').height());
var ExtraSpace=TableHead+TablePager;
var EachRow=$('td:first-child').height();
var GridContent = Math.round(WWidth-ExtraSpace);
var Rows=Math.round((WWidth-ExtraSpace)/EachRow);
//return (Rows);
alert(Rows);
}
Finally re binding with grid and getting the data:
var grid = $("#grid").data("kendoGrid");
//grid.hideColumn(0);
grid.bind("dataBound", RowCount);
grid.dataSource.fetch();
However, data items/rows are not displayed.
Where am I doing wrong? I've also set autobindig: false
And this is my dojo: http://dojo.telerik.com/afUZeL/12
You can't get a RowCount until the grid is loaded. You can't load the grid without know the PageSize.
I would suggest you set an initial size and then refresh with your calculations using the pagesize of the datasource.
var grid = $("#grid").data("kendoGrid");
//grid.hideColumn(0);
//grid.bind("dataBound",RowCount);
//grid.dataSource.fetch();
grid.dataSource.pageSize(RowCount());
grid.refresh();
I have a application that has a kendo grid.
I can filter the grid using several dropdownlists that are outside the grid.
When I click on search, I add filters to the datasource filter list. For example,
var dataSource = $("#grid").data("kendoGrid").dataSource;
var dataSourceFilterQuery = new Array();
if ($("#something").data("kendoDropDownList").value() !== null) {
dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
}
dataSource.filter(dataSourceFilterQuery);
Then I get the results I want. It works.
I then have the possibility of saving the values of all the dropdownlists as one filter in localStorage.
const filtersObject = {
Something: whatever.value(),
...
};
this.storage.setItem("Filter", JSON.stringify(filtersObject));
When I restart the application, the dropdownlists are populated with whatever is in localStorage
const filter = JSON.parse(localStorage.getItem("Filter"));
$("#something").data("kendoDropDownList").value(filters.whatever || "");
}
The thing is, I wanted to add these filters, if they exist on localStorage, to the datasource when the application starts so that the user can see the results of the filter he saved when the applications starts and not have to click on search again.
So, what I want is to do apply this
var dataSource = $("#grid").data("kendoGrid").dataSource;
var dataSourceFilterQuery = new Array();
if ($("#something").data("kendoDropDownList").value() !== null) {
dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
}
dataSource.filter(dataSourceFilterQuery);
before the grid is displayed.
Is this possible?
Tks in advance.
Configure the Grid with
autoBind: false
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-autoBind
and when the page loads, call your filter setup, then trigger the grid load manually (via dataSource.read())
Has anyone got a working sample of a chart embedded inside a listView using Kendo?
The chart must use the same datasource as the ListView.
There is a partial sample on the Kendo forums http://www.telerik.com/forums/sparkline-inside-listview-html-template-
The last snippet doesnt quite work for me.
function createChart(){
var data = this.dataSource.data();
for (var i = 0; i < data.length; i++) {
var item = this.wrapper.find("[data-uid='" + data[i].uid + "']");
var chart = item.find(".chart");
chart.kendoChart({
//....
});
};
Cheers
Michael
Basically you should use the dataBound event if you want to initialize a widget inside a client template of a listview or grid.
Here is an example that shows it with a Grid, same approach can be used for a ListView.
Let's assume you have a div with the class of chart inside your client template.
dataBound:function(){
$(".chart").kendoChart({
//chart options
})
}
Here is one demo where the data for the chart is hard-coded. And here is another one that actually uses the grid dataItem for that row to get the collection for the chart.
I have both TreeView and Grid on the same page and I need to populate the TreeView from the grid data. So the flow is like this:
User selects a something from a dropdown and clicks on a button -> web service call -> populate the grid with data from web service -> populate TreeView with some massage of the grid data
The logic to populate TreeView is currently in the grid.dataSource.fetch() method like this:
// this function is called when user clicks on the button
function getData() {
grid.dataSource.read();
grid.dataSource.page(1);
grid.dataSource.fetch(function () {
var data = this.data();
... // logic to massage the data to populate TreeView
...
}
}
However, if the user selects another thing from the dropdown and clicks on the button again, this.data() seems to have the old data (fromt the 1st time), as a result, TreeView is populated with old data.
Which is the right event/method other than fetch() I should use to put my logic in?
I think you should use kendoGrid's dataBound event.
http://docs.kendoui.com/api/web/grid#events-dataBound.
Here is the sample code for kendoGrid dataBound event handler:
function Grid_DataBound(e) {
console.log("Grid_DataBound", e);
var grid = e.sender;
var dataItems = grid.dataSource.view();
console.log(dataItems);
var treeData = new Array();
for (var i = 0; i < dataItems.length; i++) {
treeData.push({
OrderId: dataItems[i].OrderID,
ShipName: dataItems[i].ShipName
});
}
var dataSource = new kendo.data.HierarchicalDataSource({
data: treeData,
schema: {
model: {
id: "OrderId"
}
}
});
$("#treeview").data("kendoTreeView").setDataSource(dataSource);
}
Let me know if you need full sample code.
I have a kendo grid,and treeview with checkboxes in my application.I want to filter the grid based on treeview checkbox selection,i tried this one but its not working properly
my treeview code is
$("#treeview").on("change", function (e) {
var ds = $("#grid").data("kendoGrid").dataSource;
ds.filter([
{"logic":"or",
"filters":[
{
"field":"OrderId",
"operator":"eq",
}
]} ]);
});
my fiddle is http://jsfiddle.net/RHh67/66/
In treeview on change event you need to catch the checked nodes,and then filter the grid datasource based on your condition with field,operator and value of the treeview selected node.
$("#treeview").on("change", function (e) {
var selected = $('#treeview :checked').closest('li');
var ds = grid.dataSource;
var filter = {
logic : "or",
filters: []
};
This is the updated fiddle:
http://jsfiddle.net/RHh67/87/
Cheers,
Happy coding