Full Row Selection
26 Oct 20174 minutes to read
The TreeView control provides the option to highlight a full row of tree view nodes. When fullRowSelect is true, a selection highlights the entire width of the tree view, display instead of the width of just the tree node text. It makes selection easier.
<!--create the TreeView wrapper-->
<div id="fullRowTree"></div>
/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />
module TreeViewComponent {
var localData = [
{ id: 1, name: "Discover Music", hasChild: true, expanded: true },
{ id: 2, pid: 1, name: "Hot Singles", selected: true },
{ id: 3, pid: 1, name: "Rising Artists" },
{ id: 4, pid: 1, name: "Live Music" },
{ id: 6, pid: 1, name: "Best of 2013 So Far" },
{ id: 7, name: "Sales and Events", hasChild: true, expanded: true },
{ id: 8, pid: 7, name: "100 Albums - $5 Each" },
{ id: 9, pid: 7, name: "Hip-Hop and R&B Sale" },
{ id: 10, pid: 7, name: "CD Deals" },
{ id: 11, name: "Categories", hasChild: true },
{ id: 12, pid: 11, name: "Songs" },
{ id: 13, pid: 11, name: "Bestselling Albums" },
{ id: 14, pid: 11, name: "New Releases" },
{ id: 15, pid: 11, name: "Bestselling Songs" },
{ id: 16, name: "MP3 Albums", hasChild: true },
{ id: 17, pid: 16, name: "Rock" },
{ id: 18, pid: 16, name: "Gospel" },
{ id: 19, pid: 16, name: "Latin Music" },
{ id: 20, pid: 16, name: "Jazz" },
{ id: 21, name: "More in Music", hasChild: true },
{ id: 22, pid: 21, name: "Music Trade-In" },
{ id: 23, pid: 21, name: "Redeem a Gift Card" },
{ id: 24, pid: 21, name: "Band T-Shirts" },
{ id: 25, pid: 21, name: "Mobile MVC" }
];
$(function () {
var tree = new ej.TreeView($("#fullRowTree"), {
fullRowSelect: true, //enable full row selection in TreeView
fields: {
dataSource: localData, id: "id", parentId: "pid", text: "name",
hasChild: "hasChild", expanded: "expanded", selected: "selected"
}
});
});
}
For more details about full row selection in TreeView, refer the sample here.