[CSHTML]
@(Html.EJ().Gantt("GanttContainer")
//...
.ClientSideEvents(cs =>
{
cs.ActionBegin("ActionBegin");
cs.Load("load");
})
.Datasource(ViewBag.datasource)
//...
)
@(Html.EJ().ScriptManager())
<script type="text/javascript">
function load(args) {
var columns = this.getColumns();
//Change the edittype of field you want.
columns[4].editType = "stringedit";
}
//Event trigger at the dialog edit
function ActionBegin(args) {
if (args.requestType == "openEditDialog") {
//...
$("#"+this._id+"taskNameEdit").css('width', '150px');
}
if (args.requestType == "OpenAddDialog") {
//...
$("#"+this._id+"taskNameAdd").css('width', '150px');
}
}
</script> |
[CSHTML]
@(Html.EJ().ScriptManager())
<script type="text/javascript">
function load(args) {
//...
// Method to change the notes value of datasource.
changeNotesVal(args);
}
//Update the notes value of parent tasks.
function changeNotesVal(args) {
var data = args.model.dataSource;
for (var index = 0; index < data.length; index++) {
var ganttRec = data[index];
if (data[index].notes) {
var decodedvalue = decodeHtml(data[index].notes);
data[index].notes = decodedvalue;
}
if (data[index].SubTasks) {
updateChildNotes(data);
}
}
}
// Update the notes value of child tasks.
function updateChildNotes(record) {
var childRecords = record[0].SubTasks,
length = childRecords.length,
count, currentRecord;
for (count = 0; count < length; count++) {
currentRecord = childRecords[count];
if (currentRecord.notes) {
var decodedvalue = decodeHtml(currentRecord.notes);
currentRecord.notes = decodedvalue;
}
if (currentRecord.SubTasks) {
updateChildNotes(currentRecord);
}
}
}
// Decode the notes text to Html.
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
</script> |
[CSHTML]
@(Html.EJ().ScriptManager())
<script type="text/javascript">
//Event trigger at the dialog edit
function ActionBegin(args) {
if (args.requestType == "openEditDialog") {
//...
$("#"+this._id+"EditTab").find("li:eq(2)").find("a").text("ChangedCustomColName");
}
if (args.requestType == "OpenAddDialog") {
//... $("#"+this._id+"AddTab").find("li:eq(2)").find("a").text("ChangedCustomColName");
} }
</script> |
[CSHTML]
@(Html.EJ().ScriptManager())
<script type="text/javascript">
//Event trigger at the dialog edit
function ActionBegin(args) {
if (args.requestType == "beforeOpenEditDialog") {
var tabObj = $("#"+this._id+"EditTab").data("ejTab");
// Add new tab items with given list
tabObj.addItem("#tabtemplate", "New Item", 4, "e-link","newItem");
$("#newItem").append("<div id='tabtemplate'>Custom Tab Field : <input class='e-field e-ejinputtext' id='GanttContainerCustomTabColEdit' /></div>");
if (args.data && args.data.item && args.data.item.CustomTabCol) {
$("#"+this._id+"CustomTabColEdit").val(args.data.item.CustomTabCol);
}
}
//read value from custom new tab
if (args.requestType == "save") {
args.currentRecord.item.CustomTabCol = args.data.CustomTabCol = $("#tabtemplate").find('input').val();
}
}
</script> |
Hello, Suriyaprasanth
I am very grateful for the solution you provided, it's very helpful and solved most of issues.
But I want add a issue about hide the TaskID property.
Not only at the left Column, but also at the Tab Predecessors in Task Information Popup page.
I guess the default Task Name value's rule is obj.taskID + "-" + obj.taskName, and I want it also hide the ID just display the taskName only.
I have already tried this Url demo code:
Https://www.syncfusion.com/kb/7876/how-to-show-or-hide-the-columns-in-gantt
Function load (args) {
Var ganttObj = $ ("# GanttContainer"). Data ("ejGantt");
GanttObj.hideColumn ("Task Name");
}
But the gantt page will not load success.
I want do this because of the TaskID may be very messy after some Tasks deleted, added, or adjusted.
Thanks a lot.
Best regards.
<body>
@(Html.EJ().Gantt("GanttContainer")
//...
.ClientSideEvents(cs =>
{
//...
cs.Load("load");
})
)
<script type="text/javascript">
function load(args) {
var columns = this.getColumns();
columns[0].visible = false;
}
</script>
</body> |
<body>
@(Html.EJ().Gantt("GanttContainer")
//...
.ClientSideEvents(cs =>
{
//...
cs.ActionBegin("ActionBegin");
})
)
<script type="text/javascript">
//Event trigger at the dialog edit
function ActionBegin(args) {
if (args.requestType == "openEditDialog") {
var predecessorTreeGridObj = $("#treegridGanttContainerpredecessorEdit").ejTreeGrid('instance'), columns = [];
$.extend(columns, predecessorTreeGridObj.model.columns);
columns[0].visible = false; // Hide the ID column from predecessor tab
//..
predecessorTreeGridObj.setModel({ "columns": columns });
}
if (args.requestType == "OpenAddDialog") {
var predecessorTreeGridObj = $("#treegridGanttContainerpredecessorAdd").ejTreeGrid('instance'), columns = [];
$.extend(columns, predecessorTreeGridObj.model.columns);
columns[0].visible = false; // Hide the ID column from predecessor tab
//..
predecessorTreeGridObj.setModel({ "columns": columns });
}
}
</script>
</body> |
<body>
@(Html.EJ().Gantt("GanttContainer")
//...
.ClientSideEvents(cs =>
{
//...
cs.ActionBegin("ActionBegin");
})
)
<script type="text/javascript">
//Event trigger at the dialog edit
function ActionBegin(args) {
if (args.requestType == "beforeOpenAddDialog") {
args.data.TaskName = "New Task"; // Change the newly added task Name value.
}
if (args.requestType == "openEditDialog") {
var predecessorTreeGridObj = $("#treegridGanttContainerpredecessorEdit").ejTreeGrid('instance'), columns = [];
$.extend(columns, predecessorTreeGridObj.model.columns);
// Remove the ID from task name.
updatePredecessorDropDown(columns);
predecessorTreeGridObj.setModel({ "columns": columns });
}
if (args.requestType == "OpenAddDialog") {
var predecessorTreeGridObj = $("#treegridGanttContainerpredecessorAdd").ejTreeGrid('instance'), columns = [];
$.extend(columns, predecessorTreeGridObj.model.columns);
// Remove the ID from task name.
updatePredecessorDropDown(columns);
predecessorTreeGridObj.setModel({ "columns": columns });
}
}
function updatePredecessorDropDown(columns) {
var dropDownArray = columns[1].dropdownData;
for (var x = 0; x < dropDownArray.length; x++) {
var text = dropDownArray[x].text;
dropDownArray[x].text = text.slice(text.indexOf("-") + 1, text.length);
}
}
</script>
</body> |
Hello, Suriyaprasanth
Thanks for the demo project, it really solved the issues.
Best regards,
Jacob.