JQuery Grid

Invoke the cellhover method of the jqxGrid. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="jqxgrid"></div>
<div id="usersGrid"></div>
<div id="log"></div>

JavaScript

//var data = generatedata(50);
var cl = function (string) {
		console.log(string);
};
var theme = 'energyblue';
var initialData = {
		Groups: [{
    		GroupId: 101,
        GroupName: 'Admin',
        UsersList: [1002]
    }, {
    		GroupId: 102,
        GroupName: 'QA',
        UsersList: [1001, 1003, 1004]
    }, {
    		GroupId: 103,
        GroupName: 'Sales',
        UsersList: [1003, 1005]
    }],
    Users: [{
    		UserId: 1001,
    		Username: 'Ann'
    }, {
    		UserId: 1002,
    		Username: 'Peter'
    }, {
    		UserId: 1003,
    		Username: 'Dan'
    }, {
    		UserId: 1004,
    		Username: 'Lee'
    }, {
    		UserId: 1005,
    		Username: 'John'
    }]
};
var sourceFirstGrid = {
    localdata: initialData,
    datafields: [{    		
        map: 'GroupId',
        type: 'number'
    }, {
        name: 'groups',
        type: 'string',
        map: 'GroupName'
    }],
    datatype: "json",
    root: 'Groups'
};
var adapterFirstGrid = new $.jqx.dataAdapter(sourceFirstGrid);

$("#jqxgrid").jqxGrid({
    width: '69%',
    height: 171,
    theme: theme,
    source: adapterFirstGrid,
    columns: [
        { text: 'Groups', datafield: 'groups' }
    ]
});
var isInitialFiltering = false;
$('#jqxgrid').on('rowselect', function (event) 
{
    // event arguments.
    var args = event.args;
    // row's bound index.
    var rowBoundIndex = args.rowindex;
    // row's data. The row's data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row's firstName, use var firstName = rowData.firstName;
    var rowData = args.row;
    
    cl(rowData);
});

/* Users Grid */
var usersGridSource = {
    datatype: "json",
    datafields: [
        { name: 'id', type: 'number', map: 'UserId' },
        { name: 'user', type: 'string', map: 'Username' }
    ],
    root: 'Users',
    localdata: initialData,
    deleterow: function (rowid, commit)
    {
        // synchronize with the...