jQuery UI Widgets › Forums › Grid › On cell enter
Tagged: Cell, grid, jqxgrid, mouseenter, ready
This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 11 years, 6 months ago.
-
AuthorOn cell enter Posts
-
How can I attach a function on cell enter by the mouse on a grid cell?
Thank you
Hello reblutus,
Here is how to bind to the mouseenter event on a grid cell:
$("#jqxGrid .jqx-grid-cell").mouseenter(function (event) { // code to execute});
where “jqxGrid” is the id of your grid.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/It doesn’t work. Here is my code
var deleteCellsRenderer = function (rowindex, columnfield, value, defaulthtml, columnproperties) {
var rowdata = $(“#calendarGrid”).jqxGrid(‘getrowdata’, rowindex);
return ‘‘;
}var editCellsRenderer = function (rowindex, columnfield, value, defaulthtml, columnproperties) {
var rowdata = $(“#calendarGrid”).jqxGrid(‘getrowdata’, rowindex);
return ‘‘;
}var calendarSource = {
url : jsRoutes.controllers.JsonDataProvider.getCalendars ( @brand.id ).url,
datatype : “json”,
datafields :[ { name : ‘name’, type : ‘string’ }, { name : ‘id’, type : ‘int’ } ]}
var calendarDataAdapter = new $.jqx.dataAdapter(calendarSource);
function getCalendars() {
$(“#calendarGrid”).jqxGrid({
width:”100%”,
source : calendarDataAdapter,
columns :[
{text:”Id”, dataField:”id”, hidden:true}
,{text:”@Messages(“schedules.name”)”, datafield:’name’, cellclassname:”nameField” }
,{text:””, cellsrenderer:editCellsRenderer, width:gridIconCellWidth, cellsalign:”center”}
,{text:””, cellsrenderer:deleteCellsRenderer, cellclassname:”deleteAction”, width:gridIconCellWidth}
]
})
}$(function(){
getCalendars();
$(“#calendarGrid .jqx-grid-cell”).mouseenter(function (event) {
console.log(“enter”+event);
})
});Hi reblutus,
You should bind to the event in the $(document).ready() function.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/$(function(){}); and $(document).ready(function(){}); are the same thing…
Never the less, I tried it with
$(document).ready(function(){
getCalendars();
$(“#calendarGrid .jqx-grid-cell”).mouseenter(function (event) {
console.log(“enter”+event);
})
});… and as expected, it didn’t work either.
Hi reblutus,
You should make sure the grid is not still loading when you bind to the mouseenter event. A solution is to bind in the ready callback function, e.g.:
$("#jqxgrid").jqxGrid({ width: 670, source: dataAdapter, theme: theme, pageable: true, autoheight: true, sortable: true, altrows: true, enabletooltips: false, editable: true, selectionmode: 'singlecell', columns: [ { text: 'Product Name', datafield: 'ProductName', width: 250 }, { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 }, { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }, ], ready: function () { $("#jqxgrid .jqx-grid-cell").mouseenter(function (event) { console.log("enter" + event); }); }});
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.