|
RadiantQ jQuery Gantt Package
GanttTable Editing
|   |
|
RadiantQ jQuery Gantt Package
GanttTable Editing
| |
VWGrid supports incell and popup editing, incell is the default editing mode. The following steps illustrates how to setup editing in GanttTable.
Incell Editing :
Step 1: Create an editor template for the column.
Define a custom cell-editor template.
|
<script id="projectGanttNameEditor" type="text/x-jquery-tmpl"> <div class="rq-grid-expand-indentWidth" style="height: 1px; width: ${data.IndentWidth_M()}px;"></div> <div style="width: 12px; display: ${data.IsParent_M() ? "block":"none" }" class="arrowContainer"> <div onclick="ExpanderOnclick(this,event)" id="arrow" class="${ data.IsExpanded_M() ? " rq-grid-expand-arrow rq-grid-collapse-arrow": "rq-grid-expand-arrow"} rq-Ignore-click"></div> </div> <div class="rq-grid-expander-text"><input data-bind="value: Activity_M().ActivityName_M "/></div> </script> |
Step 2: Specify the Editor in Column definition
Specify the above editor in the Column definition.
|
{ field: "Activity_M().ActivityName_M()", title: "Activity Name", width: 200, editor: $.trim($("#projectGanttNameEditor").html()), template: RadiantQ.Default.Template.ProjectGanttExpandableTextBlockTemplate() }, |
Step 3: Specify the property, if editable and if parent editable
You must specify which property to edit, in the column definition using "column.field" field. The object that will be in the data context while editing a row is the "activity view" instance, so you can refer any property or sub-property of the activity view instance.
So, you can simply reference the properties of the activity view instance like this: field: "Activity.ActivityName".
Or you can reference any property in your data bound object representing the task, like this: field: "Activity.DataSource.Cost" this is illustrated in ..Samples/GanttControlCostTracking.htm)
|
$gantt_container = $('#gantt_container'); $gantt_container.GanttControl({ .............. .............. GanttTableOptions: { columns: [{ field: "Activity.DataSource.Cost", title: "Cost", editor: "<input data-bind='value:Activity.DataSource.Cost' data-role=\"spinner\" />", template:"<div>${ToDollarString(data)}</div>", width: 100, iseditable: true, isParentEditable: false }], startEdit: function (cell, dataItem, column) { // Preventing the row edit when cost is geater than 1000 if (data.activity.DataSource.Cost >= 1000) return false; } }, ............. ............. }); |
This is illustrated in this samples:
In HTML : ..\Samples\GanttControlTableCustomization.htm.
In ASP.NET MVC : ..\Views\Home\ProjectGantt\GanttControlTableCustomization.cshtml.
In ASP.NET : ..\Samples\ProjectGantt\GanttControlTableCustomization.aspx.
Popup Editing :
Step 1: Create an custom editor in Popup.
By default, the Gantt provides you an expandable textbox element for editing the name column value. You can use the following custom editor function to use input element instead of expandable textbox for editing the name value in popup.
|
function nameEditor($elem, options, data, ispopupEditing) { if (ispopupEditing) return "<input data-bind='value:Activity_M().ActivityName_M'/>"; else return RadiantQ.Default.Template.ProjectGanttExpandableTextboxEditor(); } |
Step 2: Specify the Editor in Column definition
Specify the above editor function in the Column definition.
|
Columns=[{ field: "Activity_M().ActivityName_M()", title: "Activity Name", width: 100, editor: nameEditor, template: RadiantQ.Default.Template.ProjectGanttExpandableTextBlockTemplate() }, ........ ], |
Step 3: Specify the property for Popup Editmode in GanttTableOptions
To enable "popup editing" you have to set the Editmode to "popup" . Popup will open when user clicks on a row which is already selected.
|
$gantt_container.GanttControl({ GanttTableOptions: { editmode: "popup" } }); |
This is illustrated in this samples:
In HTML : ..\Samples\TaskEditingDialog.htm.
In ASP.NET MVC : ..\Views\Home\Common\TaskEditingDialog.cshtml.
In ASP.NET : ..\Samples\Common\TaskEditingDialog.aspx.
� RadiantQ 2022. All Rights Reserved.