Kendo Grid: get all data from row with checked radio button - kendo-ui

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);

Related

Slickgrid multiple checkbox columns

I wish to have multiple checkbox columns in my slickgrid, along with the title of the column and when selecting that column, to select all items in that column.
I see on the slickgrid examples that it appears to only be used in one column with no title.
I am using VS 2019, and while trying to build a column and make it into checkbox column, I am showing an error underline (, expected)
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
var columns = [
{ id: "JobCards", name: "Job Card", field: "JobCards", checkboxSelector.getColumnDefinition(), maxWidth: 35, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox },
{ id: "Enabled", name: "Enabled", field: "Enabled", checkboxSelector.getColumnDefinition(), maxWidth: 35, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox }
];
var mygrid = new Slick.Grid("#GridAppUserList", AppUserRows, columns, sboptions);
mygrid.registerPlugin(checkboxSelector);
How do I create a column (with a column title) that I can select all the rows in that column?
Thanks.
It doesn't look like there's a way to do what you want with the pre-built checkbox selector. It's not set up for a title as well as the header checkbox. But it should be pretty easy to modify it a bit to do what you want.
Or you could try just combining your column definitions with the ones it produces:
var checkboxSelector1 = new Slick.CheckboxSelectColumn({
columnId: "JobCards",
cssClass: "slick-cell-checkboxsel"
});
var col1 = checkboxSelector1.getColumnDefinition();
col1.name = "Job Card " + col1.name;
col1.field = "JobCards";
col1.maxWidth = 35;
col1.formatter = Slick.Formatters.Checkmark;
col1.editor = Slick.Editors.Checkbox;
columns.push(col1);
// and same for column 2 ....
Note that your error above is because you are just dumping the getColumnDefinition() call into the object:
, field: "JobCards", checkboxSelector.getColumnDefinition(),
to get rid of the error, you'd need to make it
, field: "JobCards", someOtherName: checkboxSelector.getColumnDefinition(),
but then the column def you are getting from checkboxSelector would just be another property of the column, which is not what you want.

Show the sum of detail grid rows in outer grid row in Kendo Grid

I have many rows in Kendo detailed grid and I am trying to show the sum of the detailed rows in outer grid's data cells. Is there any way I can do so ?
Hi I have created an example for you in this example i am showing total of first grid's columns into second grid's cell.
code:-
//calucalte the total of value column of first grid and create new data
var total=0;
var data=$("#grid").data("kendoGrid").dataSource.data();
$.each(data,function(i,row)
{
total+=row.value;
});
//create dataSource for new grid
var source=[{"total":total}];
//create new grid here
$("#grid2").kendoGrid({
dataSource: source,
schema: {
model: {
id: "id",
fields: {
total: { type: "number", editable: false },
}
}
},
});
working example:-http://jsfiddle.net/mga6f/287/
thanks

Kendo UI Grid: Select single cell, get back DataItem, and prevent specific cells from being selected?

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)

Create a blank first column in kendo ui grid

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.

Kendo Grid - Edit mode when templated column is clicked

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");

Resources