列
甘特图的TreeList部分中的列可以单独配置。支持以下配置选项:
绑定-将任务绑定到指定的模型字段。列-将在此组列标题下呈现为子列的列。编辑器提供一种为列指定自定义编辑UI的方法。可编辑的-表示该列是否可以编辑。可扩展的-如果设置为真正的，该列将显示用于展开和折叠子行的图标。默认情况下，TreeList的第一列是可扩展的。场-来自任务模型的字段，将用于填充列。滤过性的-如果设置为真正的如果启用了过滤，将为该列显示一个过滤菜单。如果设置为假，则不会显示过滤菜单。默认情况下，当通过filterable选项启用过滤时，将为所有列显示过滤菜单。滤过性的。用户界面——角色filter菜单中使用的小部件的data属性，或者初始化该小部件的JavaScript函数。格式-表示列中数据的格式。HeaderAttributes-表格标题单元格的HTML属性(th)，为列呈现。HeaderTemplate-呈现列标题内容的模板。默认情况下，标题列选项的值显示在列标题单元格中。HeaderTemplateId-头模板id。隐藏的-如果设置为真正的时，甘特图将不显示该列。默认情况下，显示所有列。HtmlAttributes-表格单元格的HTML属性道明)，为列呈现。菜单-如果设置为真正的，甘特图将在列菜单中显示该列。默认情况下，列菜单包含所有数据绑定列。MinScreenWidth-像素的屏幕宽度，下面的列将被隐藏。该设置优先于隐藏设置，并且两者不能同时使用。可分类的-表示该列是否可以排序。如果设置为真正的在启用排序后，用户可以单击列标题并按列字段对树列表进行排序。如果设置为假，将禁用此列的排序。默认情况下，如果通过sortable选项启用排序，则所有列都是可排序的。可分类的。比较-A用于比较值的JavaScript函数。模板-呈现列内容的模板。甘特显示表行(tr)，表示数据源项。每个表行由表单元格(道明)，表示树表列。默认情况下，在列中显示该字段的html编码值。TemplateId-列模板id。标题-列的标题文本。宽度-列的宽度。
下面的示例演示如何配置甘特列。
@ (Html.Kendo()。甘特() .Name("gantt") .Columns(columns => { columns.Bound(c => c.TaskID).Title("ID").Width(50); columns.Bound(c => c.Title).Editable(true).Sortable(true); columns.Bound(c => c.Start).Width(100).Editable(true).Sortable(true); columns.Bound(c => c.End).Width(100).Editable(true).Sortable(true); }) .Resizable(true) .Views(views => { views.DayView(); views.WeekView(weekView => weekView.Selected(true)); views.MonthView(); }) .DataSource(d => d .Model(m => { m.Id(f => f.TaskID); m.ParentId(f => f.ParentID); m.Field(f => f.Expanded).DefaultValue(true); }) .Read("ReadTasks", "Gantt") .Destroy("DestroyTask", "Gantt") .Update(update => update.Action("UpdateTask", "Gantt").Data("onUpdateCreate")) .Create(create => create.Action("CreateTask", "Gantt").Data("onUpdateCreate")) ) .DependenciesDataSource(d => d .Model(m => { m.Id(f => f.DependencyID); m.PredecessorId(f => f.PredecessorID); m.SuccessorId(f => f.SuccessorID); }) .Read("ReadDependencies", "Gantt") .Create("CreateDependency", "Gantt") .Destroy("DestroyDependency", "Gantt") ) ) 列调整
可以通过单击列之间的拖动手柄并用鼠标拖动来调整甘特图的TreeList部分中的列的大小。要启用此行为，请使用.Resizable(真正的)配置选项。