FlexGrid Focus

FlexGrid adds a "wj-state-selected" class to the selected cells.

You can combine this with the "wj-state-focused" class added to the grid to create styles for highlighting the selection when grid has the focus:

Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35
6
US
Cameras
135,436
31,459.18
40,845.40
7
Germany
Stereos
169,610
99,190.22
1,631.26
8
UK
Phones
139,988
52,628.41
46,700.93
9
Japan
Computers
137,524
54,681.54
4,055.50
10
Italy
Cameras
37,424
45,332.72
14,858.59
11
Greece
Stereos
197,708
64,269.75
38,148.18
12
US
Phones
6,078
38,100.45
17,157.09
1
2
3
4
5
// This file locates: "Content/css/Lesson/C1Mvc/FlexGridFocus.css".
.wj-flexgrid.wj-state-focused .wj-cell.wj-state-selected {
    outline: 4px solid orange;
    z-index: 2
}
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: FlexGridFocus
        public ActionResult FlexGridFocus()
        {
            return View(Models.FlexGridData.GetSales(200));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1Mvc.FlexGridFocus_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.FlexGridFocus_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.FlexGridFocus_Text2)
</p>
@Html.C1().FlexGrid().Id("theGrid").ShowSelectedHeaders(C1.Web.Mvc.Grid.HeadersVisibility.All).Bind(Model).Height(250)