I set column property like this:
columns: [
{data: "data", renderer: "html"},
]
then, I set background color of cell like this:
cell: [
{renderer: customRenderer}
]
in customRender I have set cell background. Unfortunetly as a result I get cell with proper background color, but without html render. How can merge this two render types or how to set color cell in html?
You need to apply the renderers using type property.
Set column property as:
columns:[
{data: "data", type: {renderer: htmlRenderer}}
]
And set cell property as:
cells: function (row, col, prop) {
var cellProperties = {};
cellProperties.type = {renderer: greenRenderer}
return cellProperties;
}
Please refer to fiddle for similar scenario http://jsfiddle.net/Mazzu/rmnzcwkr/
Related
I've looked all over for help on this, which should be extremely easy, but I can't find exactly what I need. Here is my jsFiddle, which contains a super basic Kendo grid. I just want to get all data for the row that is currently selected (using a column of radio buttons) when the button is clicked.
http://jsfiddle.net/HTXua/412/
I know that when a row is selected, it is altering a property in the css class. Therefore, the row that I am trying to retrieve is going to have the property:
.detailGridRowSelector:checked
I have managed to implement the first row using checkboxes (instead of radio buttons) and count how many are checked, but I can't access the data for some reason!
var dataSource = {
data: [
{
"first": "Adam",
"last": "Paul"},
{
"first": "Shannon",
"last": "Harris"},
{
"first": "Frank",
"last": "Rolinson"},
]
};
var columns = [
{
template:'<input type="radio" class="detailGridRowSelector" title="Select Lines" name="radioLineSelector" />', width: 20
},
{
field: "first",
title: "First Name",
width: "90px"},
{
field: "last",
title: "Last Name",
width: "90px"},
];
$("#grid1").kendoGrid({
dataSource: dataSource,
columns: columns,
});
$("#getInfoButton").bind("click", function () {
var lineData ="line data would be set here";
//I know the selected row has the property: .detailGridRowSelector:checked
alert(lineData);
});
You should do:
// Get a reference to the grid
var grid = $("#grid1").data("kendoGrid");
// Get checked row by getting the input and then the row containing the input
var row = $("input:checked", grid.tbody).closest("tr");
// Get the item
var item = grid.dataItem(row);
// Format and display item
alert (JSON.stringify(item));
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/HTXua/414/
SOLVED
Turns out I was making this way too hard on myself. I just learned that Kendo has a feature built in that handles this for you, so instead of using a column of radio buttons, I deleted it and implemented the
selectable: 'row'
feature. Then I just got it using
var grid = $("#grid1").data("kendoGrid");
var row = grid.select();
var data = grid.dataItem(row);
alert(data.first);
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 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.
In a column a of a grid panel I use a combobox as editor and a renderer to display values :
editor: {
xtype: 'combobox',
alias: 'bienTypeCombobox',
store: 'BienTypesStore',
valueField: 'id_bien_type',
displayField: 'nom',
autoHeight: true,
editable: false,
autoSelect: true,
allowBlank: false
},
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
var display = '';
Ext.data.StoreManager.get("BienTypesStore").each(
function (rec) {
if (rec.get('id_bien_type') === value) {
display = rec.get('nom');
return false;
}
});
return display;
}
So, when the cells are edited the combo box is displayed and when the cells are not edited the displayField of this combo box is displayed.
My problem is that for now,, when I click on the header of this column, the rows are sorted by the valueField of the combo box.
I would like to make the user able to sort this column by the displayedField of the combo box.
Please help, thanks
I don't think there is easy solution for this. The only one way I can think of is the following:
Create a virtual field in your model (with display field basically). Create convert function for this virtual field, so when it's set real value field is get updated.
Use this virtual field in the grid without additional rendered
Use editor for this field with both valueField and displayField pointing to this field.