Customize the dialog fields of Gantt

[Jacob]

These week I'm tried build a customized task edit dialog.

I have already referred to the demo code you offer there:

https://www.syncfusion.com/kb/7896/how-to-customize-the-dialog-fields-of-gantt

And when i want to extend it i have some issues.

=====================================================
Query about the EditDialog of general tab:

How should i do to customize the input elements? For example, change the TaskName edit's width or change the input type.

I have tried use jQuery find the ID GanttID+taskNameEdit and set width but not work.

And if it's possible I want the startdate and enddate combine to a daterangepicker like this:

http://mvc.syncfusion.com/demos/web/daterangepicker/default

=====================================================
Query about the EditDialog of notes tab:

Referred to the demo code, if I want customize the dialog fields I have to use the this code to add my class property.

        .EditDialogFields(eve =>
        {
            eve.Field("TaskName").Add();
            eve.Field("Progress").Add();
            eve.Field("StartDate").Add();
            eve.Field("EndDate").Add();
            eve.Field("Duration").Add();
            eve.Field("ResourceID").Add();
            eve.Field("Predecessors").Add();
            eve.Field("notes").Add();
            eve.Field("ExpectedDate").DisplayInGeneralTab(true).Add();//To display this custom column field in General Tab
        })

But when a task have {notes= "<p><b>Description:</b></p><p></p><ul style='list-style-type: square;'><li>The Rich Text Editor (RTE) control is an easy to render in client side. <br></li><li>Customer easy to edit the contents and get the HTML content for the displayed content.<br></li><li> A rich text editor control provides users with a toolbar that helps them to apply rich text formats to the text entered in the text area.<br></li></ul><p></p>",}

The notes tab will defined as string.

=====================================================
Query about the EditDialog of custom fields:

How to rename the custom fields tab name?

Is it possible add more custom fields tab?

And is there more possibility besides the demo custom fields column?

=====================================================

My issues is not very clearly so forgive me if you need more details and I will reply more information.

Thank you very much

Best regards
              

[Suriyaprasanth Ravikumar]

Hi Jacob, 

Please find the response below. 

Query 1: How should i do to customize the input elements? For example, change the TaskName edit's width or change the input type. I have tried use jQuery find the ID GanttID+taskNameEdit and set width but not work. 

Answer: We can achieve this requirement by using “ActionBegin” client side event. This event will be triggered when we open a add/edit dialog with argument “requestType” as“openEditDialog/OpenAddDialog”. 

By using this event we can customize the each element available in dialog. We have prepared a sample and updated the task name textbox width in this event. 

  

And also we can change the edit type of column by using “Load” client side event, in this event we have update the edit type of progress column to string from numeric. 

Please refer the following code snippet. 

[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> 

  

Query 2: And if it's possible I want the startdate and enddate combine to a daterangepicker like this: 

Answer: In Gant we have used ejDatePicker and ejDateTimePicker controls for start date and end date fields. We have done some internal validation with this fields in add/edit dialog. So we can’t replace the date picker/date time picker with date range picker control. 

  

Query 3: Query about the EditDialog of notes tab 

Answer:  Notes tab field accepts html string as value, if we pass encoded HTML string it assume this as valid text , so it will render as it is in RTE. 

If we give HTML string as notes field value, it will render as text in TreeGrid part and html element as in RTE. 

We have decoded your notes value by using custom method called “decodeHtml” and reassigned this value to notes field in data source. 

If we set notes field value in HTML string, no need decode this value. 

Please refer following code snippet. 

[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> 

  

Query 4: How to rename the custom fields tab name? 

Answer: By using “ActionBegin” client side event we can customize ejTab in add/edit dialog. We have modified the “Custom Fields“ tab name as “ChangedCustomName”. 

Please refer the following code snippet. 

  

[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> 

  

Query 5: Is it possible add more custom fields tab? 

Answer: By using “ActionBegin” client side event , we can add additional tabs in Add/Edit dialog,  We have added new tab called “New Item” in edit dialog with one custom field 

called “CustomTabCol”. To save this field value on editing action we need to read the value from custom tab. We can achieve this by using “ActionBegin” event with requestType as “save”. 

Please refer the following code snippet. 

[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> 

  

We have prepared a sample with all above mentioned requirement, please find the sample location below. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/GanttSample_MVC_13218595500814 

  

Please let us know if require further assistance on this. 

Thanks, 

Suriyaprasanth R. 

[Jacob]

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.

[Suriyaprasanth Ravikumar]

Hi Jacob, 

Please find the response below, 

Query 1: But I want add a issue about hide the TaskID property. 

Answer: We can hide the column in Gantt by using “Load” event or “hideColumn” public method. If we want to hide the column initially we can use “Load” event. 

To hide the column dynamically, we can use “hideColumn” public method. We have prepared a sample and hide the Task ID column at “Load” event.  

Please refer the following code snippet. 

 

<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> 

 

 

Query 2: Not only at the left Column, but also at the Tab Predecessors in Task Information Popup page.. 

Answer:  We can hide “ID” column in ‘predecessors’ tab of add/Edit dialog by using “ActionBegin” client side event with argument requestType as “openEditDialog/OpenAddDialog”. 

Using this event and “setModel” method of TreeGrid control, we can hide “ID” column in predecessors tab, please refer the following code snippet. 

<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> 

 

 

Query 3: 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. 

Answer: We have rendered the task name with id value to differentiate the tasks which has same name. 

As per your requirement we have prepared a sample and removed the task id value from the “taskName” field using “ActionBegin” client side event with argument requestType as “openEditDialog/OpenAddDialog”. 

We can also change the ‘taskName’ of newly added task by using this event. 

Please refer the following code snippet. 

   

<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> 

 

We have prepared a sample with all above mentioned requirement, please find the sample location below. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Gantt_MVC_F132185611107814 

 

Please let us know if require further assistance on this. 

Thanks, 

Suriyaprasanth R. 

[Jacob]

Hello, Suriyaprasanth

Thanks for the demo project, it really solved the issues.

Best regards,

Jacob.

[Suriyaprasanth Ravikumar]

Hi Jacob, 

  

Thanks for the update.  

Regards,  

Suriyaprasanth R.