I am using Kendo library for grid. I want to have a toolbar in that grid.
I have followed this link -
http://demos.kendoui.com/web/grid/toolbar-template.html
and created a toolbar at the top
I also want to add another toolbar at the bottom of grid. Below or above pagination bar. I could not find any way to create this extra toolbar. Please help.
There are two ways of getting it:
You let Kendo UI generate in the top and then you move it to the bottom
You generate it to the bottom.
The first approach is fast and if you don't need header toolbar is the best. Just add the following code:
$("#grid).data("kendoGrid").wrapper.append($(".k-toolbar"));
See it here : http://jsfiddle.net/OnaBai/WsRqP/1/
The second approach -using as base the example that you mention in your original question- would be something like this:
Step 1: Define a template, you might use the same than in the example:
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px"/>
</div>
</script>
Step 2: Initialize the grid, as you are doing now (in my case I will not include the toolbar as header but only as footer):
var grid = $("#grid").kendoGrid({
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize : 20,
serverPaging : true,
serverSorting : true,
serverFiltering: true
},
height : 430,
sortable : true,
pageable : true,
columns : [
{ field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", width: 100 },
{ field: "QuantityPerUnit", title: "Quantity Per Unit" }
]
}).data("kendoGrid");
Step 3: Add a dataBound handler for creating the footer after the grid has been initialized. We have to do it on dataBound otherwise the Grid is still not correctly formatted and the footer will look wrong. I've implemented creating the footer toolbar in a separate function to do not mess dataBound in case you do more stuff here.
dataBound : function () {
initFooterToolbar(this, kendo.template($("#template").html()));
}
Step 4: Implement this initFooterToolbar:
function initFooterToolbar(grid, template) {
if (!this._footer) {
this._footer = $("<div class='k-toolbar k-grid-toolbar k-widget'></div>")
.append(template);
grid.wrapper.append(this._footer);
// Other code for initializing your template
...
}
}
What initFooterToolbar does is first check that it has not already been initialized otherwise if you do pagination of refresh the data you might end-up with multiple footer toolbars.
Finally append the toolbar to grid.wrapper.
So the important part for creating a footer toolbar is invoking grid.wrapper.append(...) and doing it when the grid is already created.
The original example modified here : http://jsfiddle.net/OnaBai/WsRqP/
I avoid using kendo toolbars and just make an external 1 which you can then tweak with greater control.
For example,
#Html.DropDownList("Year", (SelectList)ViewBag.YearList, "All years")
transport: {
read: {
url: '#Url.Action("_List", "Applications")',
data: refreshGridParams,
type: 'POST'
},
function refreshGridParams() {
return {
Year: $('#Year').val()
};
}
$('#Year').change(function () {
theGrid.dataSource.read({
Year: $('#Year').val()
});
});
Then in my controller,
[HttpPost]
public JsonResult _List(int? Year, int skip, int take)
{
Last
_db.Blargh.Where(w => w.Year== Year).Skip(skip).Take(take).ToList().ForEach(x => { waList.Add(new WAListDTO(x)); });
This should cover all the core code needed but means you can keep adding as many toolbars/dropdowns/datepickers/text searchs or etc and just alter each stage to include the additional data.
Here is another hack which uses column footertemplate. When databound is triggered, footertemplate table is arranged to have one column with colspan equals to the number of grid columns.
http://plnkr.co/edit/1BvMqSC7tTUEiuw4hWZp
$("#grid").kendoGrid({
columns:[{
field:'name',
footerTemplate : "Row Count: #= data.name.count #"
},{
field:'age'
}],
dataSource: new kendo.data.DataSource({
aggregate: [{
field:"name",
aggregate: "count"
}],
data: [{
name: "Jane",
age: 31
}, {
name: "John",
age: 33
}]
}),
dataBound: function() {
var footer = this.wrapper.find('.k-footer-template');
footer.children(":first").attr('colspan', this.columns.length);
footer.children().not(':first').remove();
}
});
Related
I'm using AgGrid table in my application. Here is the demo. According to the documentation i want to stop movement of the columns. For this i used:
suppressMovable: true
The above code I used here:
columnDefs: [
{
headerName: 'Athlete', //the generic name of header
children: [
{
field: 'athlete', //children header from generic header
width: 150,
suppressMovable:true
},
{
field: 'age',
lockVisible: true,
cellClass: 'locked-visible',
suppressMovable:true
},
{
field: 'country',
width: 150,
},
{ field: 'year' },
{ field: 'date' },
{ field: 'sport' },
],
...
suppressMovable:true, it works, and the athlete and age columns aren't possible to be moved like others, but this code also disable the movement of the main column: Athlete. So when i try to switch the place of Athlete and Medals columns, i can't, but i don't want this, i want to set this 2 main columns as movable.Question: How to disable movement of columns inside the Athlete and Column, but to keep the movement functionality of these 2 main columns?
Out of the box answer is you can't.
If any child is fixed, then AG Grid doesn't allow moving the group.
you can write custom event listener(if possible) to change the suppressMovable property of child columns while the parent column is being dragged and then again set them to not movable/suppressMovable to true. else you can programatically move all columns in a group using moveColumnByIndex(from,to)
I have a Kendo UI Grid that has the "auto-bind" property set to false. I have also set the "pageable.alwaysVisible" property to false to hide the grid's pager when it's not needed.
The problem I'm having is that because the grid is not data bound when it first loads, the "alwaysVisible" property does not work and the pager is shown. At this stage I would expect the pager to be hidden as there is no data to be paged.
Is there anyway I can hide the pager on first load when the grid is not data bound?
It doesn't look like what you want is available out-of-the-box, but you could achieve it using a bit of CSS. This is probably a better approach than my previous answer, which in essence triggered the grid to bind itself anyway. How about hiding the pager initially until the grid is eventually bound, at which point it takes over management of the pager visibility?
<style>
#grid>.k-pager-wrap.k-grid-pager {
display: none;
}
</style>
<div id="grid"></div>
<button onclick="javascript:$('#grid').data('kendoGrid').dataSource.read()">Refresh</button>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
pageable: {
pageSize: 3,
alwaysVisible: false
},
autoBind: false
});
</script>
Example here: https://dojo.telerik.com/EBaZAjAc
This looks like a quirk of the grid when it doesn't know that it has no data yet. Perhaps you could try pushing "no data" into your datasource in the first instance? The following snippet demonstrates your problem; un-commenting the last line fixes it:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: new kendo.data.DataSource(),
pageable: {
pageSize: 5,
alwaysVisible: false
},
autoBind: false,
});
//$("#grid").data("kendoGrid").dataSource.data([]);
</script>
Example here: https://dojo.telerik.com/OZAXugOt
You can use something like this:
dataBound: function(e){
if(e.sender.dataSource.total() <= e.sender.dataSource.pageSize()){
e.sender.pager.element.hide();
} else {
e.sender.pager.element.show();
}
Take a look at this example:
http://dojo.telerik.com/OhEDo
I've got a Kendo grid which is being created in JS. This code is not mine, but someone else's, and I really don't think we should be changing many of the fundamentals of it. However, there is one column in it which we would ideally like to display as a dropdown box all the time, or at least look like one. Code is below:
self.caGridOptions = {
widget: self.caKendoGrid,
data: undefined,
dataSource: {
schema: {
model: {
fields: {
id: { type: "number" },
description: { type: "string", editable: false },
value: { type: "number", editable: false },
caTypeDescription: { type: "string", editable: false }
}
}
},
autoSync: true
},
sortable: true,
scrollable: false,
editable: true,
columns: [
{ field: "id", title: "Code", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'code') : id #", editor: self.caDropDownEditor },
{ field: "description", title: "Description", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'description') : id #" },
{ field: "value", title: "Value", width: 90, format: "{0:n2}", template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'value') : id #" },
{ field: "caTypeDescription", title: "Type", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'caTypeDescription') : id #" },
{ width: 90, filterable: false, template: kendo.template('<a class="btn btn-danger btn-sm" title="delete"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a>') }
],
dataBound: self.gridButtons,
noRecords: true,
messages: {
noRecords: "There is no data available"
}
};
//
// functions
self.getca = function (id, type) {
if (id == null) return null;
return self.caOptions().filter(function (item) { return item.id == id; })[0][type];
};
The ID field (first column) goes into a dropdown box when it is edited, as you can see. However, what we would like is for this to appear as a dropdown box all the time. Not necessarily by always having the editor on (which I believe would be impossible, as Kendo can only turn the editor on on one row at a time), but perhaps by simply formatting it like a dropdown.
Any help would be gratefully appreciated. It's annoying as this is a tiny, minor thing and we've got examples of it working elsewhere, but they're grids which have been written primarily in cshtml (using Kendo MVC, I think) and I really don't want to rewrite the entire grid for something so trivial, as well as possibly any other functions that rely on its data.
The primary issue you are facing is that the cell is just a table cell until you actually start editing. At that time, it dynamically creates the input.
I had a similar requirement in the past and it ended up being easier to decorate the cell to look like a drop-down as opposed to trying to render a drop-down in every row of the grid. This allows you to keep the default grid behavior intact and allows the user to see that there will be a list of values when they edit that cell. We ended up just putting a down-arrow icon to the right of the value in the display template - from your code, it looks like you are using some font-awesome icons, but there are some delivered by Kendo UI as well - so, the template could be something like this:
template: '#=id# <span class="k-icon k-icon-s"></span>'
UPDATE:
The kendo icons do depend on your version and I had a typo in the name above. In any case, here is an example you can look at:
This Kendo demo shows adding a custom editor (dropdown) on the Category column:
http://demos.telerik.com/kendo-ui/grid/editing-custom
If you scroll down, there is a button to "Edit this Example" - here, you'll see that the Category column uses a template:
template: "#=Category.CategoryName#"
You can change the template to the following to create a drop-down looking effect:
template: "<span style='border-style:solid; border-width: 1px; padding: 4px; width: 150px; display: block'>#=Category.CategoryName# <span class='k-icon k-i-arrow-60-down' style='float:right'></span></span>"
You can tune the css to get it closer to exactly what you want, but this give you the idea. Other possibilities include actually defining css classes that can be applied so you don't need to include so much in-line styling.
I'm displaying a grid with remote data, if I don't add pagination the full set of data is displayed, of course this is not desired.
The following is the code I'm using to display data on a grid:
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "http://127.0.0.1:81/SismosService.svc/usuario/index",
dataType: "json"
}
},
schema: {
data: "Response"
},
pageSize: 5
});
$("#usuariosGrid").kendoGrid({
pageable: {
refresh: true
},
columns: [
{ field: "UsuarioId", title: "ID", width: "100px" },
{ field: "Nombre", title: "Nombre", width: "100px" },
{ field: "ApellidoP", title: "Apellido Paterno", width: "100px" },
{ field: "ApellidoM", title: "Apellido Materno", width: "100px" },
{ command: [{ text: "Editar", click: editFunction }, { text: "Eliminar", click: deleteFunction }], title: " ", width: "200px" }
],
dataSource: ds
});
This renders a grid with 5 items on it, but that's it, I can't navigate through the rest of the entries. The number of pages and items to display is marked as zero, disabling the navigation controls.
Am I missing something in my cofiguration? Thanks for any help you can provide.
When paging is done in the server (check serverpaging), you need to return the total number of records. See total for information.
I had the same issue because I misunderstood serverPaging. If you set serverPaging to true, you also have to modify what the server returns.
Previously, I had the server returning all of the data. To fix this, I used ToDataSourceResult to modify what my server returns.
See:
How to implement Server side paging in Client side Kendo UI grid in asp.net mvc
spend a day on this minor issue, all you have to do is return the total number of records, if your service doesn't return the total number of records, do the following
schema: {
data: "Response"
},
total: function(response)
{
return response."your method name".length;
}
I am now building a web application with Ext-JS 4.0.2, and I am using a editable grid to control the data to be shown for a table on the same page.
To make the grid editable, I followed the API documentation and used the following:
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})
]
However, for this grid, there are several cells that are not supposed to be changed.
I could simply let the event handler change the data back to the right state once it is changed in the grid, but this seems to be hacky, hard to maintain, and unreadable. Is there any better way to do this? I read the API but cannot find any useful attributes.
UPDATE
As for this particular app, just disable the first row would work. But I am also interested in choose several grid and make them not editable (imagine a Sudoku game with a grid).
As I've understand from comments you want to make first row not editable. There is ugly but quick solution. Assign to your plugin beforeedit handler. And when event is being fired check what row is being edited. If first - return false:
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,
listeners: {
beforeedit: function(e, editor){
if (e.rowIdx == 0)
return false;
}
}
})
]
Check out docs for beforeedit.
UPDATE
Docs say that beforeedit has such set of params:
beforeedit( Ext.grid.plugin.Editing editor, Object e, Object options )
But there is mistake. The correct sequance is:
beforeedit( Object e, Ext.grid.plugin.Editing editor, Object options )
I've updated example due to this fact.
You can specify ColumnModel to declare editable and not editable columns:
var cm = new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'id',
header: 'id',
hidden: true
},{
dataIndex: '1',
header: '1',
editor: new Ext.form.TextField({})
},{
dataIndex: '2',
header: '2',
editor: new Ext.form.NumberField({})
},{
dataIndex: '3',
header: '3'
}]
});
var grid = new Ext.grid.EditorGridPanel({
store: store,
clicksToEdit: 2,
cm: cm
...
In this example column id is unvisible, columns 1 and 2 editable (with text and number editors) and column 3 is not editable.
UPDATE:
Prevent row editing:
grid.on('beforeedit', function(event) {
if (event.row == 0) {
this.store.rejectChanges();
event.cancel = true;
}
}, grid);
As Ziyao Wei mentioned the documentation for the beforeEdit event is wrong. However you need to reference the 'editor' parameter to get the row index and other values, not the first object parameter 'e'.
Updated example:
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,
listeners: {
beforeedit: function(e, editor){
if (editor.rowIdx == 0)
return false;
}
}
})
]