cellhover get columnName

[mustafaParticipant]

hi
How do I get the column name of the cell is?

example :
var columnName = $(element).ColumnName;

or
I just want to run the event in this photo column!!

thanks

  var photorenderer = function (row, column, value) {
        var imgurl = dataAdapter.records[0].Photo;
        imageCreate = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';

        return imageCreate;
    }

$("#Gd_ExpensesGrid").jqxGrid(
       {
           width: '98%',
           source: dataAdapter,
           pageable: true,
           sortable: true,
           altrows: true,
           autoheight: true,
           theme: 'arctic',
           initrowdetails: initrowdetails,
           virtualmode: false,
           cellhover: function (element, columnname,columnfield, properties, pageX, pageY, rowdata,e) {
             
                // example
                   if(columnName = "Photo") // but columnname or columnfieldname comes number (example : 367,825)
               {
                      $("#popup").empty();
                   $('#popup').append("<div class='CrewPopupImage' style='background-image: url(" + imageCreate + "); background-repeat: no-repeat; height:2000px;width:140px; max-height: 200px; max-width: 140px;'></div>");
                   $('#popup').bPopup({ modalClose: false, fadeSpeed: 'fast' });
            }
              
           },
           rowdetailstemplate: { rowdetails: "<div id='NestedGridDetail' ></div>", rowdetailsheight: 260, rowdetailshidden: true },
          
           rowdetails: true,
           rowsheight: 35,
           editable: false,
           columns: [
               { text: 'Photo', width: 50,  cellsrenderer: photorenderer },
               { text: 'Name', datafield: 'Name', disabled: true, width: 200, cellbeginedit: rowEdit },
               { text: 'Last Name', datafield: 'LastName', disabled: true, width: 200, cellbeginedit: rowEdit },

[DimitarParticipant]

Hello mustafa,

Here is how to achieve this:

$("#jqxgrid").jqxGrid(
{
    width: 850,
    source: dataAdapter,
    pageable: true,
    autoheight: true,
    sortable: true,
    altrows: true,
    enabletooltips: true,
    editable: true,
    selectionmode: 'multiplecellsadvanced',
    cellhover: function (element, pageX, pageY) {
        var cell = $('#jqxgrid').jqxGrid('getcellatposition', pageX, pageY);
        alert(cell.column);
    },
    columns: [
        { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
        { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
        { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
        { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
        { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
    ],
    columngroups: [
        { text: 'Product Details', align: 'center', name: 'ProductDetails' }
    ]
});

Best Regards,
Dimitar

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

[mustafaParticipant]

hello dimitar thank you answer

[Author]

Posts