Is it possible to bind kendo grid dataItem on cell level - javascript

I am using kendo grid. i need to bind data over cell, not on tr level.
By default dataItem is assigned on tr level. Is there any possibility to bind dataItem over Individual td
if i do grid.dataItem(grid.select(), i dont get dataItem for the selected cell, i need to find the closest tr and get dataItem, that is not what i need.
i.e., if i do select on a cell, selectable:'cell', i have to get dataItem by
grid.dataItem(grid.select())

The approach which you are using is working only if selection mode is not set to cell. In your case, you need to do one step in addition - select row.
change: function(e){
var grid = $("#cellSelection").data('kendoGrid');
var row = this.select().closest("tr");
var selected = grid.dataItem(row);
console.log(selected);
},
Dojo example

Related

How do I access a row object of this grid?

I am trying to access an individual row from a grid in Kendo UI so that I can run operations on the selected entries in the row. However, my code is not correctly grabbing the row itself and I do not know how to resolve this.
I've tried binding the grid to an event that, when changed, will fire my method in order to grab whichever row was toggled.
const row = arg.sender.element.closest("tr")
const grid = $("#ECUs").getKendoGrid()
const dataItem = grid.dataItem(row)
Results:
I.fn.init [prevObject: I.fn.init(1)]
length: 0
prevObject: I.fn.init [div#ECUs.k-grid.k-widget.k-display-block]
__proto__: w
(Sorry, I apparently don't have enough reputation to post images)
Ideally, I would expect to get a tr object back in the first method, but I'm getting absolutely nothing instead. Does anybody know how to correct this to access the row?
If you have a click event on one of the columns, you can access the table row using some jquery.
function onClickListener(e) {
e.preventDefault();
var row = this.dataItem($(e.currentTarget).closest("tr"));
}
Option 1:
You can use the edit event of a grid to get the currently selected row model.
edit: function(e) { console.log(e.model); }
Here, e.model contains the row data and you can access the particular column value by e.model.columnName.
Option 2: You can get the row model data like below from the other functions.
https://stackoverflow.com/a/56478061/8733214

Selected Kendo UI grid rows to populate select menu?

I have a kendo grid with multiple row selection enabled; I'm trying to populate an external select menu based on a few of the fields from the aforementioned row selection(s); I'm getting nowhere; can this be done? Fiddle examples?
I checked out this fiddle, where they were populating another kendo grid based on what was selected in the first kendo grid; I figured I'd be build select options like:
$("#selectMenu").html("<option value=''></option>");
..but I can't figure out how to get the selected data OUT of the kendo grid..
That code is not very good IMO since it only relies on jQuery instead of using the grid API. You can use the change event to detect row changes, get the selected rows with the select methd and the data items with the dataItem method.
So you can start with something like this:
$("#states").kendoGrid({
selectable: "multiple",
dataSource: {
data: usStates
},
change: function() {
var that = this;
var html = "";
this.select().each(function() {
var dataItem = that.dataItem(this);
html += "<option>" + dataItem.name +"</option>";
});
$("#select").html(html);
}
});
(demo)

Cannot add click to only one table row

When I execute the following to add a click function to the cell at the end of A particular row, jQuery adds the click function to all of the rows. What am I missing here please?
og_rownum happens to equal a number 3, not a string, and the nth-child(8) column does exist in the table.
$("#game_lister_table tr:eq("+og_rownum+"), :nth-child(8)").click(function(e){
alert('here');
e.stopPropagation();
});
Thanks in advance....
It seems like you want to add a listener to only one row on your table. If thats the case just add id="yourID" to the tag that you want to manipulate.
Then in jquery, select it with
$('#yourID').click(function(e){
//code here
});
If you don't know which row needs to be manipulated, and want to choose it programmatically, then try this.
$("#game_lister_table tr").click(function(e){
$(this)...//selects the row that was clicked
})
I used to to this code when choosing specific Cell/ Cells in HTML table Like You
$("#game_lister_table tr:eq("+og_rownum+"), :nth-child(8)").click(function(e){
alert('here');
e.stopPropagation();
});
But I found there is an easy way is to Create Dynamically Id for cell every time you create row or cell you have an Easy way to use JQuery Selector for any (row , cell ,....etc)
var table = document.getElementById("myTable");
var rowIndex =table.rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
cell1.id="whatEver";
cell1.innerHTML = "<input type="text" id="txt'+rowIndex+'" />";
then your action came Next
$('#ID').on('click',function(e){});
Since the closest answer was removed, I'll add this.
Use "#game_lister_table tr:eq("+og_rownum+") td:nth-child(8)" to select the element you described.

How to detect select onChange in a row cell

I am creating a dynamic table using java script and jquery, one of my project requirement is a select box in a row cell,
From the this SO link i am able to place a on click listener on a table row which gives me id of table row and cell(tr and td) but i am not able to detect select onchange i have also tried "jQuery get value of select onChange" but it is also not working in my case!!
My problem is
How to detect select on Change in a row cell as i have to update that
changed data in database?
thanks in advance!!!!!
I believe this will get everything you'll need for your database (value selected, cell and row it was selected in)... something like:
JSFiddle
$("td select").on("change", function() {
var value = this.value;
var $cell = $(this).parent();
var $row = $cell.parent();
alert("Selected ["+value+"] in cell ["+$cell.index()+"] of row ["+$row.index()+"]");
});
$(document).on('change','td',function(){
//Do your abacadabra!
});

get value for each row on DB table

I have this Jquery code that is supposed to give me the result of a column if I click on it's row. I'm using Yii but the problem is mostly with the Jquery.
$(document).on('click', 'td.myLink a', function(){
$('input[name=\"ECCategory[ParentID]\"]').val($('#mainID').html());
$('.search-form form').submit();
});
This is what I have. What this does is gives me the result of the first row (mainID column) no matter which row I click on. What I want for example is to click on row 5 and get the mainID for row 5.
IDs are unique. So only one element can have the id mainID. You probably want to use $(this) within your click event to search from the selected element. For example:
$(function($){
$('td.myLink a').click(function(){
var tr = $(this).parent().parent(); // selected row
// get columns that you want from selected row using tr.find('...')
// ...
}
});

Categories