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
Related
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>"
$("#ElementId").attr("disabled","disabled");
The Above code only works for the Date pickers which are declared in Html page.
But I want to Disable the kendo Date picker in the kendo Grid Header Filter area.
Here is a simple way of achieving what you want.
Disabled text input on grid filter
I have modified the date cell to have the following:
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}",
filterable: {
cell: {
template: function (element) {
element.element.kendoDatePicker({
});
element.element.attr('disabled', 'disabled');
}
}
}
}
You will notice that I have added a template to the cell which will override the default date picker and add my own date picker to the filter row.
Note if you want to do this via the menu you just need to do this at the first element item e.g. element.kendoDatePicker({})
Hope this is what you are after.
For more info on this take a look at this link:
kendo grid filter api
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.
I am using a template for the edit popup. I am trying to force the grid to go into edit mode and show the edit template popup when a link within one of the columns is clicked.
I tried using a command but I am unable to data bind the hyperlink's text to a field declared in the model, in this case to 'CourseType'. Is data binding supported within command columns?
columns: [
{
command: [
{
id: "edit",
title: "School Item",
template: '#=CourseType#',
width: 120
}
]
}
]
If data binding is not supported within a command column, then how do I put the grid into edit mode when the templated field is clicked?
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
I'm not sure why do you want to define the cell as an HTML anchor but there is no problem on making it enter on popup edit mode when clicking on the anchor.
1) Add to your template a class that would allow us to find those cells. Something like:
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
where I have include class="ob-edit-popup" to the template.
2) add to your grid definition the option editable: "popup".
3) add the following JavaScript code after the initialization.
$(".ob-edit-popup", grid.tbody).on("click", function (e) {
var row = $(this).closest("tr");
grid.editRow(row);
})
Where grid is the result of:
var grid = $("#grid").kendoGrid({...}).data("kendoGrid");