jQuery UI Widgets Forums Grid cellhover get columnName

This topic contains 2 replies, has 2 voices, and was last updated by  mustafa 8 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • cellhover get columnName #60993

    mustafa
    Participant

    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 },
    • This topic was modified 8 years, 3 months ago by  mustafa.
    • This topic was modified 8 years, 3 months ago by  mustafa.
    • This topic was modified 8 years, 3 months ago by  mustafa.
    • This topic was modified 8 years, 3 months ago by  mustafa.
    • This topic was modified 8 years, 3 months ago by  mustafa.
    • This topic was modified 8 years, 3 months ago by  mustafa.
    • This topic was modified 8 years, 3 months ago by  mustafa.
    • This topic was modified 8 years, 3 months ago by  mustafa.
    cellhover get columnName #61032

    Dimitar
    Participant

    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/

    cellhover get columnName #61037

    mustafa
    Participant

    hello dimitar thank you answer

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

You must be logged in to reply to this topic.