How can I hide the toolbar (pager) for the KendoUI grid?
Any help would be appreciated.
Thank you.
$("#grid").kendoGrid({
dataBound: function() {
$("#grid .k-grid-pager").css('display','none');
}
});
If you want to display pageSize number of records but do not have pagination then simply define pageSize in the dataSource but pageable as false in the grid definition:
$("#grid").kendoGrid({
...
pageable: false
});
Related
I have kendo grid. This grid contains hierarchy of detail grids.
Can I take dataItem for this detail grid when I click by row?
You can use following callback code.
function(e) {
console.log($(e.target.closest('.k-grid')).data("kendoGrid").dataItem(e.target));
}
{
title: "Click",
width: "100px",
command: [
{
name: "Click",
click: function (e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
// You can access value of column by dataItem.columnID
}
}
]
}
Here is a command name 'Click' in kendo grid. When you will click on command, appropriate function will execute.
This work for me:
$("#main_grid_id").data("kendoGrid").dataItem($(e.currentTarget).closest("tr.k-detail-row").prev("tr"))
I am using kendo ui grid and tree in a cshtml page and want to drag and drop multiple rows from the grid to the tree. I am able to drag and drop a single row from the grid to the tree, but for multiple items, same approach does not work.
Here are my code segments:
$("#grid").kendoGrid({
selectable: "row",
sortable: true,
pageable: true,
columns: .......
$("#treeview").kendoTreeView({
dragAndDrop: true
});
And my kendoDraggable and kendoDropTarget events:
$("#grid").kendoDraggable({
filter: "tr",
hint: function () {
var g = $("#grid").data("kendoGrid")
return g.select().clone()
}
});
$("#treeview").kendoDropTarget({
drop: droptargetOnDrop
});
The above code segment works for dragging a single row from grid to the tree.
But if I change the grid definition for multiple row selection, the kendoDropTarget drop event no longer get triggered.
$("#grid").kendoGrid({
selectable: "multiple",
sortable: true,
pageable: true,
columns: .......
Please let me know if I am doing anything wrong and any possible solution to this.
Multiple selection on the grid does not play nicely with drag and drop due to the fact that selectable events and drag events both fire with selectable events taking precedence.
To work around this, you can cancel the selectable event when dragging.
To do this, change your kendoDraggable config to include the following in your dragstart function:
dragstart: function (e) {
$('#grid').data("kendoGrid").selectable.userEvents.cancel();
}
I have craete KendoChart pie with legend.
For some reason legend by default is interactive and by clicking on legend items chart enables/disables pieces of the pie.
I didn't find any way to disable this behavior: http://docs.telerik.com/kendo-ui/api/dataviz/chart
Could it be disabled?
I needed to do the same thing and after some research found out in the Kendo UI documentation the following solution:
- hook to the legendItemClick and legendItemHover events of the chart
- in the handler call e.preventDefault();
Here is the code I used (MVVM-style):
In HTML:
data-bind="events: { legendItemClick: disableEvent, legendItemHover: disableEvent } "
In the ViewModel:
disableEvent: function(e) {
e.preventDefault();
}
Here is the article - http://docs.telerik.com/kendo-ui/api/dataviz/chart
Use the code Below
legend: {
position: "bottom",
visible: false
},
With the particular database server we are using it's just as expensive to run a COUNT() query as it is to run the actual query, so I'd prefer to not display the count at all.
Normally, outside of kendo grid, I would just display previous and next buttons but not show the total count. Is it possible to achieve something similar with Kendo Grid?
Set the numeric property of the pageable object in your kendo grid options. That should disable the numeric buttons for you:
$("#grid").kendoGrid({
pageable: {
numeric: false
}
});
See http://docs.kendoui.com/api/web/grid#configuration-pageable.numeric for more info
To set the data to a specific count, in your kendo datasource options, use the schema.total function to return some large value to give you enough paged data:
var dataSource = new kendo.data.DataSource({
schema: {
total: function(response) {
return 100000000;
}
}
});
Hi i'm very much new to kendo UI, so need help in the below fix,
I'm using kendo grid UI as below for pagination:
<script>
$(document).ready(function(){
$("#table3").kendoGrid({
dataSource: {
pageSize: 10
},
pageable: true,
enter code hereheight: 300,
sortable: true,
});
$("#table3").show();
});
</script>
when user edits a record in a page, he's redirected to edit page with that record details so I need current page number because after editing a record in a page, I need to redirect user to the same page after saving the details of that record.
I'm using this in a coldfusion page.
Please help.
Thanks in advance
What you are after is here :
http://docs.kendoui.com/api/web/pager#methods-page
// get the page
var currentPage = grid.dataSource.page();
// later set the page
grid.dataSource.page(currentPage );
But I am bit confused with the redirect from the grid to edit page, why do you do that ? Kendo has inline batch edit and popup edit features, if you move to other page it will all get bit more complicated.
FYI : http://demos.kendoui.com/web/grid/editing.html
// declare page index as 1
var currentPage = 1;
pageable: {
change: function (e) {
currentPage = e.index;
},
page: currentPage,
sortable: true,
..`enter code here`
}
$scope.grid = dataSource;
$scope.grid._page = currentPage;// stay in the current page after grid refreshes