FlexGrid highlight row on hover

Posted by: 048alexsandr1992 on 5 March 2018, 8:10 pm EST

    • Post Options:
    • Link

    Posted 5 March 2018, 8:10 pm EST

    Hi,

    I want to use hover event for grid, but his layout don’t divide grid on rows

    http://joxi.ru/KAx7p1aT4lkxD2

    What can be help?

  • Posted 6 March 2018, 9:44 pm EST

    Hi,

    You need to use the ItemFormatter for this purpose .

    function csFlexGrid_HoverItemFormatter(panel, r, c, cell) {
             console.log("if");
                    if (panel.cellType == wijmo.grid.CellType.Cell) {
                        if (c == 1 && r == 3) {
                            var className = 'highLight_' + r.toString();
                            $(cell).addClass(className);
                            $(cell).addClass('mouseOutClass');
                            $(cell).on('mouseover', null, function () {
                                var cellClassName = $(cell).attr('class');
                                var splitItems = cellClassName.split('_');
                                var idNum = parseInt(splitItems[1]);
                                if (!isNaN(idNum)) {
                                    var matchId = 'highLight_' + idNum.toString();
                                    $('.' + matchId).css('background', '#80ADBF');
                                    $('.' + matchId).css('color', '#FFFFFF');
                                }
                            });
    
                            $(cell).on('mouseout', null, function () {
                                var cellClassName = $(cell).attr('class');
                                var splitItems = cellClassName.split('_');
                                var idNum = parseInt(splitItems[1]);
                                if (!isNaN(idNum)) {
                                    var matchId = 'highLight_' + idNum.toString();
                                    if ($(cell).hasClass('wj-alt')) {
                                        $('.' + matchId).css('background', '#F9F9F9');
                                        $('.' + matchId).css('color', '#222222');
                                    } else {
                                        $('.' + matchId).css('background', '#FFFFFF');
                                        $('.' + matchId).css('color', '#222222');
                                    }
                                }
                            });
        }
    
     @(Html.C1().FlexGrid<OrderItemViewModel>()
                   .Id("flexGrid")
       	.ItemFormatter("csFlexGrid_HoverItemFormatter")
                   .CssClass("grid"))
    

    PS: This code has dependency on Jquery. Please make sure its referenced in your project.

  • Posted 8 March 2018, 5:22 pm EST

    Great thanks!

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels