jQuery UI Widgets Forums Grid On cell enter

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 11 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • On cell enter #26749

    reblutus
    Blocked

    How can I attach a function on cell enter by the mouse on a grid cell?

    Thank you

    On cell enter #26774

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    On cell enter #26811

    reblutus
    Blocked

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

    On cell enter #26813

    Dimitar
    Participant

    Hi reblutus,

    You should bind to the event in the $(document).ready() function.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    On cell enter #26819

    reblutus
    Blocked

    $(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.

    On cell enter #26862

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.