I have a kendo ui grid with dropdownlists in the cells. The problems is that I lose the selected row when somebody select a new value in a dropdownlist. Can somebody help me with this?
What is probably happening is that the selection of an item in the DropDownList is changing the value on the bound data item. This causes the DataSource to fire a "change" event so hat the table knows it needs to update. The way the Kendo Grid is written, when it gets a change event from the DataSource, it recreates the table cells. I'm pretty sure the existing table cells get removed from the DOM and a new set added in its place. When this happens, the selection is getting removed.
One way to preserve the selected row would be to add a function handler to the grid's "change" event, and save the uid of the selected data item. Then on the "dataBound" event, you can re-select that row.
For example:
var selectedUid;
$("#grid").kendoGrid({
...
change: function () {
selectedUid = this.select().data("uid");
}
dataBound: function () {
if(selectedUid) {
this.select($(this.element).find('tr[data-uid="' + selectedUid + '"]'));
}
}
});
Related
I am using devextreme dxdatagrid tables. in that case if I am clicking to a row in OnEditorPreparing event to retrieve the data on that row.
function editorPreparing(e) {
console.log(e.row);
}
when I clicked the row and use e.row, I can easily get what is the value in the row.
However when using
console.log(e.row.data);
I get an error such
Is there any way to retrieve the row values.
I am not sure why you use onEditorPreparing event to get the row data, I would use onRowClick instead, you can see it in the example below:
onRowClick: function (e) {
console.log(e.data);
}
I want to know without update button row change data when checkbox is checked or click on . Kendo grid view have sample code for this , my problem is when get data from datasource in ng-click button not updated datasource
I used the flowing code for ng-click
$scope.saveLayerRole = function () {
var model = {};
console.log($("#layerGrid").data().kendoGrid._data);
}
If you want to update the Kendo DataSource manually from you button's click, you have to do this :
$("#layerGrid").data('kendoGrid').dataSource.read();
How to get row value of a table on mouse click? Data in this table is populated from the data returned using AJAX.
Below is the code which is not working:
$('table#tblBdy tbody tr').click(function() {
$('tr').click(function () {
var tableData = $(this).closest("tr").children("td").map(function() {
return $(this).text();
}).get();
$('#bx1txt').val($.trim(tableData[0]));
$('#bx2txt').val($.trim(tableData[1]));
$('#oldqty').val($.trim(tableData[1]));
});
I'm not sure I completely follow your question, your title and descriptions seem to conflict. Are you looking to get the value you a specific cell on click? Your question says you want the value of a row...
If I understand it correctly, you either want the value of a specific cell when it is clicked, or you want to highlight the row of that cell that you are clicking.
I have setup a codepen http://codepen.io/anon/pen/oXNeMx with a simple solution.
Depending on how the table is generated, you can put that javascript code into it's own function and call that function whenever you have new AJAX data so that the click handler gets bound to the table and elements.
//handles table cell click events
$('td').click(function(){
//updates the value
var cellValue = $(this).html();
//find the row of table where cell was clicked
var tr = $(this).closest('tr');
//removes select class from all rows
$(tr).siblings().removeClass('highlight');
//adds class to highlight selected row
tr.addClass('highlight');
});
The reason your code is not working is because you attach an event handler to some elements, but then you replace those elements with new ones from the AJAX call.
You need to set an event handler on an element that will not change, for example, the table (if you table gets replaced in its entirely, you need to find a higher ancestor that never changes).
// ancestor event real selector
$('#tblBdy').on('click', 'tbody td', function() {
// Same code as yours in the handlers
});
I am working on a scenario of dragging the radtreeview node onto Radgrid row ,where I need to get the row id value as soon as I leave the node upon the grid row.
I have seen examples but they are giving the row cell value (not comple row values) when I drop the node on it
So I want to write a MouseUp event similar to MouseOver.
I want to know how to implement MouseUp/MouseDown events on the radgrid row.
Thank you
Ramesh.T.
If you use jquery,
function droppedOnGrid(args)
{
var target = args.get_htmlElement();
// To get the row of cell
var row = $(target).parent()
// Find the value in the cell which you want
var id = row.children()[index].val();
......
hope that helps
I have a table for adding a new budget details like the image below:
When I select an Income Account then another row is added to the viewmodel collection:
I want to set all field values to "0.00" when the new row is added and also I have a problem because if I delete a row then the "change" event of the combo doesnt exist so there is no way to add a new row when changing the last combo.
Any clue? Here is the fiddle working sample: http://jsfiddle.net/rLUyS/9/
Here is the code that I use to bind the change action to the last added combo:
$('select[name=cboincomeaccount_' + newRowIndex + ']').bind("change", {
combo: $(this)
}, handler);
function handler(event) {
newRowIndex++;
var combo = jQuery(this);
var row = combo.parent().parent();
appViewModel.addRow();
// Unbind
combo.unbind('change');
// Bind new combo
jQuery('select[name=cboincomeaccount_' + newRowIndex + ']').bind("change", {
combo: jQuery(this)
}, handler)
jQuery(row).find('input[name^="txtincmonth"]').removeAttr('disabled');
};
Thanks in advance!!
This might not be so much of a Knockout issue as it is a user interface issue.
I want to set all field values to "0.00" when the new row is added
Well that's easy enough. Simply initialize the the observable row to all zeros.
When I select an Income Account then another row is added to the viewmodel collection...
and also I have a problem because if I delete a row then the "change" event of the combo doesnt exist so there is no way to add a new row when changing the last combo.
This is probably a negotiable requirement.
Why not create an 'Add' button instead of insisting on this "nifty" behavior that adds a row when the user makes a section in the dropdown list?
Besides, even if we could accomplish what you're asking for (and I can envision a way that we could do this), what will you do when it's time to save the user's input to the server? Were you planning on ignore that last empty row?