Our customer wanted a kendo grid where he can click anywhere on a row to open the corresponding detail page. I'm adding the rows like this:
const cols = [
{ field: "Date", title: "Date", template: "#=kendo.toString(kendo.parseDate(Date, 'yyyy-MM-dd), 'dd.MM.yyyy')#" },
{ field: "Title", title: "Title" },
{ field: "", command: ["destroy"], title: " " }];
let grid = $("#grid").kendoGrid({
dataSource: this.dataSource,
pageable: true,
filterable: true,
sortable: true,
columns: cols,
editable: "detail"
}).data("kendoGrid");
grid.one("dataBound", this.onDataBound.bind(this));
And in my function onDataBound():
const grid = $("#grid").data("kendoGrid");
$(grid.tbody).on("click", "tr", function (e) {
const rowData = grid.dataItem(this);
const URL = startInfo.ApplicationRoot + "SomeDetailPage?SomeId=" + rowData.get("SomeId");
window.open(URL, '_blank');
});
This works perfectly as expected. However, as you see, I have a column with a delete button. Here is the problem. Whenever I click on the delete button, I'm getting the confirmation message ("Are you sure to delete [...]?") and actually can delete the row successfully, but the detail page of the row opens as soon as I click the button.
How can I let the row know that it shouldn't open the detail page when I click the delete button?
You should use e.stopPropagation(); on delete button so it will not pass the event to the row also.
I've found a solution. I can check the tagName when binding the click function to the row:
$(grid.tbody).on("click", "tr", function (e) {
if (e.target.tagName == "TD") {
const URL = startInfo.ApplicationRoot + "SomeDetailPage?SomeId=" + rowData.get("SomeId");
window.open(URL, '_blank');
}
});
When I click the button, tagName get either "SPAN" or "A". Everything outside the button results in "TD".
Related
I have managed to get the community version of AgGrid (Javascript) to work
However, I cant get a button to work?
function drop( id) {
alert(id);
}
var columnDefs = [
{ headerName: "HELLO", field: "name", sortable: true, filter: true },
{ headerName: 'One', field: 'fieldName',
cellRenderer : function(params){
return '<div><button (click)="this.drop(params.id)">Click</button></div>'
}
}
];
I need the function to be called when the user clicks on the button
Nothing happens at all? No errors in the console even?
What am I doing wrong?
Is this functionality disabled for the community edition?
Please note that I need a Javascript solution not Angular or any other language/framework supported by the Ag Grid
Paul
While working with cellRenderer, you should not register the event like (click)="this.drop(params.id)".
Instead, register listener the javascript way. Have a look at below code.
colDef.cellRenderer = function(params) {
var eDiv = document.createElement('div');
eDiv.innerHTML = '<span class="my-css-class"><button class="btn-simple">Push Me</button></span>';
var eButton = eDiv.querySelectorAll('.btn-simple')[0];
eButton.addEventListener('click', function() {
console.log('button was clicked!!');
});
return eDiv;
}
Reference: ag-grid Cell Renderer
I have a site with a table build with Dojo/DGrid.
Some columns of the grid use editor: dijit/form/FilteringSelect as editor, which works perfect. As the user hits the return key, the value is accepted and the editor closes.
Other columns of the same grid have a custom defined renderCell, because the unterdying store url differs in every row:
function myCustomRenderCell(object, item, node) {
node.innerHTML = '<div class="myClass"></div>';
var filteringSelect = new FilteringSelect({
label: 'myLabel',
name: 'myName',
displayedValue: item.myValue,
store: new DstoreAdapter (
new RestMemoryStore ({
idProperty: 'id',
target: 'myUrlToJsonData',
})
),
onChange: function(newValue) {
var rowData = filteringSelect.store.get(newValue);
var gridCell = this.domNode.offsetParent;
var dataCell = grid.cell(gridCell);
rowData.then(function(row){
var eventObject = {
grid: this,
cell: dataCell,
oldValue: "",
value: row.name,
bubbles: true,
cancelable: true
};
on.emit(dataCell.element, 'dgrid-datachange', eventObject);
grid.updateDirty(dataCell.row.id, 'myLabel', row.name);
});
}
}, node.children[0]);
filteringSelect._destroyOnRemove = true;
filteringSelect.startup();
}
Unlike the default FilteringSelect mentions in the beginning this one is not left as the use hits the return key. The value is processed correctly. But except of pressing tab which places the cursor inside the next custom editor or using the mouse there is no way to leave this editor.
Any ideas how to set up this custom build FilteringSelect to dismiss on return like the default editor in the grid does?
try out: add an event handler for key press:
onKeyPress: function(event){
if (event.charOrCode == keys.ENTER) {
filteringSelect.set("focused", false);
}
}
Thanks to Manjunatha for the helpful hint.
I've a web application with kendo ui grid. The grid is load with Bakbone.js when I click a button and I can remove a row with the next code:
$(document).on("click", "#grid tbody tr .ob-delete", function (e) {
var item = grid.dataItem($(this).closest("tr"));
var check = confirm("Do I delete:" + item.City );
if (check) {
grid.removeRow($(this).closest("tr"));
}
});
The cofiguration of the button to delete:
command: [
"edit", {
name: "destroy",
text: "Remove",
className: "ob-delete"
}]
When I reload the content (grid) pushing the button, if I want to delete a row, item.City produce an error.
The complete example here
Edited:
Solved here! Thanks to #Whizkid747!
To add in
command: [ "edit",{
//...
click: deleteRow
}]
Then, when button is clicked a function is called:
function deleteRow(e){
var item = this.dataItem($(e.currentTarget).closest("tr"));
var check = confirm("Do I delete:" + item.City );
if (check) {
grid.removeRow($(e.currentTarget).closest("tr"));
}
}
Not sure, but your grid is actually not the same grid but the old (before the reload) one and second grid is created.
Following line changed:
var item = $('#grid').data().kendoGrid.dataItem($(this).closest("tr"));
updated version.
I suggest you to just change the data through the dataSource.data() method instead of recreating the Grid. Or change your logic so you actually destroy the widget before recreating it.
I have ExtJS GRID with checkcolumn, which is declared this way:
// the check column is created using a custom plugin
sel_column = new Ext.grid.CheckColumn({
sortable: false,
header: 'STE<br />SEL',
dataIndex: 'sel',
width: field_w,
listeners:
{
"mousedown":
{
fn : function(e)
{
$.log( "Sel cellclick" , e );
}
}
}
});
I want add some listener on changfe of it stae, or on mouse click.
Finaly - want id's of rows, where i click this column - to be stored in text field
For now i can understood how to catch click event, i use onMouseDown, this way:
// the check column is created using a custom plugin
sel_column = new Ext.grid.CheckColumn({
sortable: false,
header: 'STE<br />SEL',
dataIndex: 'sel',
width: field_w,
onMouseDown: function( e )
{
$.log( e,"MouseDown" );
}
});
But it fires, when i click ANY cell, not only checkboxed ...
Pls help me
checkbox plugin need modification, after which it can fire click event.
/*
**************************************************************
Sample to add event 'checkchange' in checkbox on checkcolumn,
works with ExtJS 4 or above
*/
//Add you checkcolumn id:'op_check'. No need separate plugin.
//Put this code in You Grid
listeners:{
afterrender:function(){
g = this; //This grid
Ext.getCmp('op_check').on('checkchange', function(c, i){
//Get id from row/record (if in store exist field 'id')
//"i" - in this function is index row, where clicked checkbox
rec = g.store.getAt(i);
id = rec.get('id');
console.log(id); //:)
});
}
}
When using jqGrid how do you force a cell to load in its editable view on page load as well as when it is clicked?
If you set up 'cell editing' like below, the check box only appears when you click on the cell.
{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" },
cellEdit:true,
Also on clicking checkbox, is there a way of sending a AJAX post to server instantly rather than having to rely on the user pressing enter?
To allow the checkboxes to always be click-able, use the checkbox formatter's disabled property:
{ name: 'MyCol', index: 'MyCol',
editable:true, edittype:'checkbox', editoptions: { value:"True:False"},
formatter: "checkbox", formatoptions: {disabled : false} , ...
To answer your second question, you will have to setup an event handler for the checkboxes, such that when one is clicked a function is called to, for example, send an AJAX POST to the server. Here is some example code to get you started. You can add this to the loadComplete event:
// Assuming check box is your only input field:
jQuery(".jqgrow td input").each(function(){
jQuery(this).click(function(){
// POST your data here...
});
});
This is an old one but has a lot of view so I decided to add my solution here too.
I'm making use of the .delegate function of JQuery to create a late binding implementation that will free you from the obligation of using the loadComplete event.
Just add the following:
$(document).delegate('#myGrid .jqgrow td input', 'click', function () { alert('aaa'); });
This will late bind that handler to every checkbox that's on the grid rows.
You may have a problem here if you have more than one checkbox column.
I had the same problem and I suppose that I found a good solution to handle checkbox click immediately. The main idea is to trigger editCell method when user clicks on the non-editable checkbox. Here is the code:
jQuery(".jqgrow td").find("input:checkbox").live('click', function(){
var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id'));
var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td'));
//I use edit-cell class to differ editable and non-editable checkbox
if(!$(this).parent('td').hasClass('edit-cell')){
//remove "checked" from non-editable checkbox
$(this).attr('checked',!($(this).attr('checked')));
jQuery("#grid").editCell(iRow,iCol,true);
}
});
Except this, you should define events for your grid:
afterEditCell: function(rowid, cellname, value, iRow, iCol){
//I use cellname, but possibly you need to apply it for each checkbox
if(cellname == 'locked'){
//add "checked" to editable checkbox
$("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked')));
//trigger request
jQuery("#grid").saveCell(iRow,iCol);
}
},
afterSaveCell: function(rowid, cellname, value, iRow, iCol){
if(cellname == 'locked'){
$("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell');
}
},
Then your checkbox will send edit requests every time when user clicks on it.
I have one submit function that sends all grid rows to webserver.
I resolved this problem using this code:
var checkboxFix = [];
$("#jqTable td[aria-describedby='columnId'] input").each(function () {
checkboxFix.push($(this).attr('checked'));
});
Then I mixed with values got from the code below.
$("#jqTable").jqGrid('getGridParam', 'data');
I hope it helps someone.
I had shared a full code at the link below, you can take a look if you need it.
http://www.trirand.com/blog/?page_id=393/bugs/celledit-checkbox-needs-an-enter-pressed-for-saving-state/#p23968
Better solution:
<script type="text/javascript">
var boxUnformat = function ( cellvalue, options, cell ) { return '-1'; },
checkboxTemplate = {width:40, editable:true,
edittype: "checkbox", align: "center", unformat: boxUnformat,
formatter: "checkbox", editoptions: {"value": "Yes:No"},
formatoptions: { disabled: false }};
jQuery(document).ready(function($) {
$(document).on('change', 'input[type="checkbox"]', function(e){
var td = $(this).parent(), tr = $(td).parent(),
checked = $(this).attr('checked'),
ids = td.attr('aria-describedby').split('_'),
grid = $('#'+ids[0]),
iRow = grid.getInd(tr.attr('id'));
iCol = tr.find('td').index(td);
grid.editCell(iRow,iCol,true);
$('input[type="checkbox"]',td).attr('checked',!checked);
grid.saveCell(iRow,iCol);
});
});
</script>
In your colModel:
...
{name:'allowAccess', template: checkboxTemplate},
...