If data for a cell is missing in the grid dataSource, the output is undefined/null, depending on the cell type String/Number.
I haven't found a way to specify a default message for an empty cell yet.
field: "title",
title: "Title",
template: "#: UnitPrice #",
noDataMessage: "noData...",
width: "auto",
Is there a way to store a standard message for an empty cell, like noDataMessage?
My small Sample Code: https://dojo.telerik.com/AKInuYEG/2
The data set Ikura has no UnitPrice, hence the output of the empty cell with null
As i know, there is no configuration for cell/column like "NoDataMessage", so you should check your property for null in template:
template: "<div class=\'priceTempl\'>#: UnitPrice != null ? UnitPrice : 'No data'#</div>"
Related
What is the perfect meaning of editor and template in kendo grid
columns: [{
field: "CategoryId",
title: "#T("Admin.Catalog.Products.Categories.Fields.Category")",
width: 200,
editor: categoryDropDownEditor,
template: "#:Category#"
}]
With the editor property you can specify a function that is called when editing the cell (of course, the grid must be set to 'editable:true')
The function could look like this:
function numberEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 0,
step : 1,
min : 0
});
}
So when editing a cell, a NumericTextBox is shown which in this case only allows positive (min:0) integers (decimal:0). In general you can define how the cell can be edited.
The template defines how the value is displayed.In your case the value is just shown as it is.
You could for example add some html:
template: "<b>#:Category#</b>" // Display bold text
template: "#:Category#" // Display as link
The #:Category# accesses the data field with that name. You can also use multiple fields in one column:
template: "#:Category# / #:SomethingElse#"
I've got a Kendo UI Grid displaying a set of data and I need to be able to select specific cells (cells in specific columns), and when selected, return the DataItem for the row the selected cell is in, and the property of that DataItem that was clicked on. I don't know if this is possible, but I've been working on it all day and have concluded that I need some help.
Here's my grid and dataBound function, which currently gets me the DataItem, but that's it:
var hhGrid = hhDiv.kendoGrid({
dataSource: housing,
scrollable: false,
sortable: true,
selectable: 'cell',
columns: [
{ field: "Start", title: "Start", format: "{0:MM/dd/yyyy}", type: "date" },
{ field: "Stop", title: "Stop", format: "{0:MM/dd/yyyy}", type: "date" },
{ field: "Facility" },
{ field: "Area" },
{ field: "Pod" },
{ field: "Cell" },
{ field: "Comment" }
]
}).data('kendoGrid');
hhGrid.bind('change', grid_change);
function grid_change(e) {
var selectedCells = this.select();
var dataItem = this.dataItem(selectedCells[0].parentNode);
}
So first of all, is there a way to 'turn off' selection of specific columns in the grid definition? I can't find anything on doing this. I only want users to be able to select cells in the 'Area', 'Pod' and 'Cell' columns. If they click the other columns nothing should happen. Also, when they do click on those selected cells, I want to get the DataItem for the row the cell is in (which I currently can do using that grid_change method), as well as the column that was selected, or the property in the DataItem that was selected.
So, for example, if the user clicks a 'Pod' cell, I want to know that it was the pod cell that was clicked, and the other data for the row the cell is in. It seems that all of the data is there, so it shouldn't be this difficult, but I'm really struggling to find the data needed to accomplish this.
Thanks for your help!
Getting the data item is:
// Get selected cell
var selected = this.select();
// Get the row that the cell belongs to.
var row = this.select().closest("tr");
// Get the data item corresponding to this cell
var item = grid.dataItem(row);
For getting the column name you can get it doing:
// Get cell index (column number)
var idx = selected.index();
// Get column name from Grid column definition
var col = this.options.columns[idx].field;
An alternative method for getting the field associated to a columns is:
// Get column name from Grid column header data
var col = $("th", this.thead).eq(idx).data("field");
The advantage is that is columns are sortable this will work anyway.
In order to clear selection for columns that you don't want just need to invoke clearSelection().
if (col !== 'Area' && col !== 'Pod' && col !== 'Cell') {
this.clearSelection();
}
Check an example here : http://jsfiddle.net/OnaBai/m5J9J/1/ and here: http://jsfiddle.net/OnaBai/m5J9J/2/ (using column header for getting column name)
i need help about formatting a kendo grid cell.
I need to show the € symbol, in a cell of my kendo grid, but it shows me always the $ symbol.
I included the js file
<script src="../js/cultures/kendo.culture.it-IT.min.js"></script>
then this is the model.filed definition:
price: { type: "number"}
and here is the column.field definition
{
field: "price", title: "Price", width: 100, culture: "it-IT", format: "{0:c}"
}
.... and another question... can I represent that type of data in a field of "string" type???
any suggestion would be appreciated.
Are you calling kendo.culture("it-IT"); on your page before the grid is created ?
Yes, you can specify a template for the price field, and turn it into a string, or you can just specify the type in model.
price: { type: 'string' }
And kendo will convert it.
For Example:In kendo Grid Field like money or salary .Which showed with currency format.
By using below code.
kendo.culture("en-US");
kendo.toString(1.00, "c0");
Which gives $1.00
Do you show € symbol: kendo.culture("de-DE"); use this format
i have a Kendo Grid whit "x" number of columns, but the user can hide the columns and i need know what columns are visible to export data only for these columns, i access to the columns in JS whit
var columns = $("#grid").data("kedoGrid");
but it returns all columns not only the visibles.
tankz
You can just get the list of columns by using this:
var columns = $("#grid").data("kendoGrid").columns;
The result will be an array of all column objects which has a property name hidden: true for hidden columns by users. In my case it is like following. So simply you will be able to get the visible column list into an array using following code.
var visibleColumns = [];
jQuery.each(columns, function (index) {
if(!this.hidden) {
visibleColumns.push(this);
}
});
Hidden Column
attributes: Object
encoded: true
field: "pb"
footerAttributes: Object
headerAttributes: Object
hidden: true
title: "Price / Book"
width: 120
__proto__: Object
Visible Column
encoded: true
field: "name"
title: "Company Name"
width: 120
__proto__: Object
Hope this will help.
I am new to kendo ui grid development.
I have a requirement where I want to display data in kendo ui grid.
I am able to bind the data to kendo grid using java-script.
This is how I did it.
(document.getElementById(divId)).kendoGrid({
columns: cols,
dataSource: data,
change: onChange,
selectable: "multiple",
//selectable: "multiple cell",
schema: {
model: {
id: "ID"
}
}
}).data("kendoGrid");
The data is displayed in the grid.
Now, I want to create a blank first column in the grid that will display a image. How can I do this. The grid is bound to data dynamically. I have not specified any hard coded columns. All columns are created dynamically.
Please anyone can tell me on this.
You will have to explicitly define the columns because:
You want to add a columns that is not in the model.
The content of the column is an image that is not a KendoUI basic type that can be inferred from the model definition.
Said so, you have to add a column that is something like:
var cols = [
// Your other columns
...
{
title :"Image",
template: "<img src='my_image.gif'/>"
},
// More columns
...
];
In addition you might need to use an image that is not a constant but depending on the content of a column. Then you might do:
var cols = [
// Your other columns
...
{
title: "Status",
template: "# if (status) { # <img src='ok.gif'/> # } else { # <img src='nak.gif'/> # } #"
},
{
title : "Photo",
template: "<img src='#= image #'/>"
}
// More columns
...
];
Where depending on the value of field in your model called status I display the image ok.gif or nak.gif. Or directly use the content of the field image for generating the URL to the image being displayed.
Check here for an overview on KendoUI templates.