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?
Forums Home / ComponentOne / ASP.NET MVC Edition
Posted by: 048alexsandr1992 on 5 March 2018, 8:10 pm EST
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!