Custom fields on Edit and Add modal, and more

Question

Hi there.First of all, my code - that can be used to all questions about a Gantt as ResourceView:-------------------------------------------------------------------It is the Gantt that I'm creating:(Html.EJ() .Gantt("ResourceViewGantt") .DateFormat("dd/MM/yyyy") .ScheduleStartDate(DateTime.Now.AddDays(-30).ToString("dd/MM/yyyy")) .ScheduleEndDate(DateTime.Now.AddDays(30).ToString("dd/MM/yyyy")) .ViewType(GanttViewType.ResourceView) .HighlightWeekends(true) .IncludeWeekend(true) .EnableContextMenu(true) .AllowGanttChartEditing(true) .AllowColumnResize(true) .IsResponsive(true) .RowHeight(40) .SplitterSettings(ss => ss.Position("170")) .EditSettings(es => es.AllowAdding(true) .AllowDeleting(true) .AllowEditing(true) .EditMode("normal")) .ToolbarSettings(toolbar => { toolbar.ShowToolbar(true); toolbar.ToolbarItems(new List() { GanttToolBarItems.PrevTimeSpan, GanttToolBarItems.NextTimeSpan, }); }) .AddDialogFields(x => { x.Field("AlocacaoId").DisplayInGeneralTab(true).Add(); x.Field("ProjetoNome").DisplayInGeneralTab(true).Add(); x.Field("Inicio").DisplayInGeneralTab(true).Add(); x.Field("Termino").DisplayInGeneralTab(true).Add(); x.Field("CapacidadeDeHoras").DisplayInGeneralTab(true).Add(); }) .EditDialogFields(x => { x.Field("AlocacaoId").DisplayInGeneralTab(true).Add(); x.Field("ProjetoNome").DisplayInGeneralTab(true).Add(); x.Field("Inicio").DisplayInGeneralTab(true).Add(); x.Field("Termino").DisplayInGeneralTab(true).Add(); x.Field("CapacidadeDeHoras").DisplayInGeneralTab(true).Add(); }) .ClientSideEvents(eve => { eve.Load("Load"); }) .ResourceIdMapping("AlocacaoProfissionalId") .ResourceInfoMapping("ProfissionalId") .ResourceNameMapping("AlocacaoProfissionalNome") .TaskNameMapping("ProjetoNome") .TaskIdMapping("AlocacaoId") .StartDateMapping("Inicio") .EndDateMapping("Termino") .Resources(ViewBag.Profissionais) .Datasource(ViewBag.Alocacoes))It is My Load js Script: ----------------------------------------------------------------------------It is the way that I'm generating my data on my Control (All data is returning without erros to Viewbag):ViewBag.Profissionais = profissionais .Todos() .Where(x => string.IsNullOrEmpty(profissional) || x.Nome.ToLower().Contains(profissional.ToLower().Trim())) .Select(x => new AlocacaoProfissional() { AlocacaoProfissionalId = x.Id, AlocacaoProfissionalNome = x.Nome }) .GroupBy(y => y.AlocacaoProfissionalId) .Select(y => y.First()) .ToList(); ViewBag.Alocacoes = resultado .Select(x => new AlocacaoProjeto() { AlocacaoId = x.Id, CapacidadeDeHoras = x.CapacidadeDiariaHoras, Inicio = x.Inicio, Termino = x.Termino, ProfissionalId = new List

Jonesherine Stephen · Answer

Hi Igor,

Thank you for contacting Syncfusion support,

Query

Syncfusion Comments

1: I was trying to set up a custom Add/Edit modal with a field named CapacidadeDiariaHoras, but i was not able doing that way in my code. I tried to debug the columns variable on my Load Javascript function and it only returned me the resource Columns, not the task ones

In resource view Gantt, it is possible to display custom columns related to resource object alone in the TreeGrid part. But this custom column field will not be displayed in built-in add/edit dialog modal. Since the dialog will contain only the fields related to the specific tasks, it is not possible to include a custom column in the dialog which belongs to a resource object.

Also regarding custom add/edit modal, it is possible to suppress the rendering of default modal using actionBegin event with requestType argument as openAddDialog or openEditDialog, and thereby you can display your custom modal. But at present it is not possible to update a task in resource view Gantt at run time, for this we have logged a feature report regarding for updating a task dynamically in resource view Gantt. It will be implemented in of our upcoming 2018 volume 2 main release.

Using this feature, you can update the tasks using custom add/edit modal in resource view Gantt.

2: I'm with the same problem to add CapacidadeDiariaHoras inside a tooltip: it jsut does not show that custom information, just the default ones. Tried to do it directly or creating a own html to a tooltip display.

3: There is a way, like the custom html for a tooltip, to create a custom html to a Add/Edit modal?

4. I also noticed that there is no confirmation modal/popup before excluding a task in a Gantt control. I think it is possible creating a javascript function to intercept the delete action: how can we do it?

We have prepared the work around and rendered confirm dialog for child resource delete action using context menu. Using ‘actionBegin’ client side event we can render confirm dialog while deleting child resource.

Please find the code example below:

@(Html.EJ().Gantt("ResourceViewGantt")

.ClientSideEvents(cs =>

{

cs.ActionBegin("actionBegin");

})

.GroupCollection(ViewBag.groups)

.Resources(ViewBag.resources)

.Datasource(ViewBag.datasource)

) @(Html.EJ().ScriptManager())

function actionBegin(args) {

if (args.requestType == "delete" && args.data.eResourceTaskType == "resourceChildTask") {

if (!confirm("Are you sure you want to delete record?")) {

args.cancel = true;

}

</script>

We have also prepared the sample based on this. Please find the sample from below location

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

Please let us know if you need further assistance on this.

Regards,

Jone sherine P S

Ansumane Sambu · Answer

Good Evening,I was reading your response to this question, and have one question of my own. Here you say:"Also regarding custom add/edit modal, it is possible to suppress the rendering of default modal using actionBegin event with requestType argument as openAddDialog or openEditDialog, and thereby you can display your custom modal.  "Ok. I know that openAddDialog and openEditDialog are two types of request that cn happen when the actionBegin event is throw, and that I can intercept they and start my own custom modal from there... but how do, exacly I stop the dafult modal from open? What property do I have to use? an you please give me an example of "stop the default modal" from open?

Suriyaprasanth Ravikumar · Answer

Hi Ansumane,

We have analyzed your query, please find the response below.

Query1: Is it possible for me to configure the colors of each taskbar in Gantt chart using a value retrieved from my database?

Answer: We can able to achieve your requirement by using “QueryTaskbarInfo” public method, which get triggered while rendering each taskbar in the Gantt and by using “progressbarBackground” and “taskbarBackground” property. Please refer the code snippet below.

[CSHTML]

@(Html.EJ().Gantt("ResourceViewGantt")

//..

.ClientSideEvents(cs =>

{

cs.QueryTaskbarInfo("queryTaskbarInfo");

})

.Datasource(ViewBag.datasource)

) @(Html.EJ().ScriptManager())

function queryTaskbarInfo(args) {

var id = [1,3,6,9]; // “TaskId” of records which you need to provide colors.

if(id.indexOf(parseInt(args.data.taskId)) != -1){

args.progressbarBackground = "Green"; // Provide color for “progressbarBackground” which gets from database

args.taskbarBackground = "red"; // Provide color for “taskbarBackground” which gets from database

}

</script>

Query2: Make the taskbar be extended or shortened in a way that will allways occup a full day in the chart?

Answer: In Gantt, using the roundOffDuration event argument in “TaskbarEditing” client side event it is possible to edit the tasks with 1/Full day precision in Gantt(1,2,3,4 days etc.,). This event will be triggered while editing the taskbar. Please refer the code snippet below to achieve

[CSHTML]

@(Html.EJ().Gantt("ResourceViewGantt")

//..

.ClientSideEvents(cs =>

{

cs.TaskbarEditing("taskbarEditing");

})

.Datasource(ViewBag.datasource)

) @(Html.EJ().ScriptManager())

function taskbarEditing(args) {

args.roundOffDuration = true;

}

</script>

Note: Duration rounding-off while editing taskbars has been implemented in v15.4.0.20. Please upgrade the source version to v15.4.0.20 to use this feature.

Please let us know if require further assistance on this.

Thanks,

Suriyaprasanth R.

Ansumane Sambu · Answer

Good evening,I have two questions about the Gantt generator options:1. First of all, is it possible for me to configure the colors of each taskbar in Gantt chart using a value retrieved from my database? (In my cenario, each register has it own color's value, and the values are storage in my data base). Is it possible?2. Second: when I am moving a taskbar in gantt chart, I am able to put it in the mid of one day (for instance: I can move it to the middle of the "D" day in my chart - see the image below). Is it possible to block this behaviour and make the taskbar be extended or shortened in a way that will allways occup a full day in the chart?

Suriyaprasanth Ravikumar · Answer

Hi Ansumane,

We have analyzed your query, please find the response below.

Query1: Is it possible for me to configure the colors of each taskbar in Gantt chart using a value retrieved from my database?

Answer: We can able to achieve your requirement by using “QueryTaskbarInfo” public method, which get triggered while rendering each taskbar in the Gantt and by using “progressbarBackground” and “taskbarBackground” property. Please refer the code snippet below.

[CSHTML]

@(Html.EJ().Gantt("ResourceViewGantt")

//..

.ClientSideEvents(cs =>

{

cs.QueryTaskbarInfo("queryTaskbarInfo");

})

.Datasource(ViewBag.datasource)

) @(Html.EJ().ScriptManager())

function queryTaskbarInfo(args) {

var id = [1,3,6,9]; // “TaskId” of records which you need to provide colors.

if(id.indexOf(parseInt(args.data.taskId)) != -1){

args.progressbarBackground = "Green"; // Provide color for “progressbarBackground” which gets from database

args.taskbarBackground = "red"; // Provide color for “taskbarBackground” which gets from database

}

</script>

Query2: Make the taskbar be extended or shortened in a way that will allways occup a full day in the chart?

Answer: In Gantt, using the roundOffDuration event argument in “TaskbarEditing” client side event it is possible to edit the tasks with 1/Full day precision in Gantt(1,2,3,4 days etc.,). This event will be triggered while editing the taskbar. Please refer the code snippet below to achieve

[CSHTML]

@(Html.EJ().Gantt("ResourceViewGantt")

//..

.ClientSideEvents(cs =>

{

cs.TaskbarEditing("taskbarEditing");

})

.Datasource(ViewBag.datasource)

) @(Html.EJ().ScriptManager())

function taskbarEditing(args) {

args.roundOffDuration = true;

}

</script>

Note: Duration rounding-off while editing taskbars has been implemented in v15.4.0.20. Please upgrade the source version to v15.4.0.20 to use this feature.

Please let us know if require further assistance on this.

Thanks,

Suriyaprasanth R.

Ansumane Sambu · Answer

Query1: Is it possible for me to configure the colors of each taskbar in Gantt chart using a value retrieved from my database?

Thanks for the reply, but we already knew this solution.

It will not be viable for us to use this.

Is it possible to map colors (eg startDateMapping)?

Ansumane Sambu · Answer

Query2: Make the taskbar be extended or shortened in a way that will allways occup a full day in the chart? This solution does not work "roundOffDuration" comes as undefined.

Ansumane Sambu · Answer

Hi there again.To make my CRUD operations, I am using some of your `requestType` events as folIows:1. `recordUpdate` I am using it to update watch when my list of records that where changed direct on the Gantt chart (by dragging the taskbar) need to be updated;2.  `delete`, I am using to test when the user wants to delete a record and create a confirmation modal for him;3. `beforeOpenAddDialog` used to stop your default modal to open and open my custom modal instead (see code bellow);           if (args.requestType == "beforeOpenAddDialog")           {               args.cancel = true;               openCustomAddModal();           }4. `beforeOpenEditDialog` used same way as the number 3;As you can see, I my program logic depends directly of these events. With that in mind, I've run with a little weird behaviour: after I close my custom modal (created with bootbox.dialog), when I double click any taskbar it does not generates the `requestType` expected, but a new one called : `validateLinkedTask`.I wanna know what is that new `requestType`, what does it stand's for, and how can I make the program stop generating it and keep generating the requestTypes that I need to work on my application. Thanks for your attention,

Suriyaprasanth Ravikumar · Answer

Hi Ansumane,   
 
We have analyzed your query, Please review the response below. 
 
Query1: Is it possible to map colors (eg startDateMapping)? 
Answer: In Gantt, it is not possible to map the taskbar color from the data source directly to the control. You can either map the datasource field to the taskbar using “QueryTaskbarInfo” client side event with the “progressbarBackground” and “taskbarBackground” property or by using “taskbarTemplate” feature. 
 
Please refer the below link to know more about taskbar template feature, 
Link: http://mvc.syncfusion.com/demos/web/gantt/gantttaskbartemplate 
 
Query2: This solution does not work "roundOffDuration" comes as undefined. 
Answer: The event argument ‘roundOffDuration’ is available in the ‘taskbarEditing’ event, but it is not currently visible in the event argument list. You can use the event argument as said in our previous response and can define the Boolean values to toggle the round off values while editing the taskbars. We will resolve this argument listing issue in our upcoming 2018 volume 1 release. 
Note: Duration rounding-off while editing taskbars has been implemented in v15.4.0.20. Please upgrade the source version to v15.4.0.20 to use this feature.   
 
Query3: When I double click any taskbar it does not generates the `requestType` expected, but a new one called : `validateLinkedTask`. 
Answer: We have analyzed your query, the “actionBegin” event with “requestType” as “validateLinkedTask” is only triggered while editing the taskbar when “predecessorMapping” is enabled, it does not get triggered while simply double click the record. Hence the reported issue is not get reproduce from our side. 
In Gantt, we can’t able to prevent any event from triggering, but we can able to handle the event and restrict the custom action by using the “requestType” field as per your preference. 
 
Please let us know if you require any other assistance on this.    
  
Regards,    
Suriyaprasanth R.

Ansumane Sambu · Answer

About question 3, as I`ve said, it starts happen when I close my custom Bootboxjs modal dialog. Do you guys have any ideia of what, in this context, could be changing the `predecessorMapping`?

And, about the `predecessorMapping`, what is it? It is a property that exists in the args that I get when aan event is triggered? What`s it standing for, please?

Thank you for the help so far!

Suriyaprasanth Ravikumar · Answer

Hi Ansumane,    
 
We have analyzed your query. As we said in previous response, the “actionBegin” event with “requestType” as “validateLinkedTask” is only triggered while editing the taskbar, it does not get triggered while simply double clicking the record. We have tried even after closing the “custom Bootboxjs modal dialog”.  
 
The “predecessorMapping” is used to map the relationship/dependency between two tasks in Gantt. The “actionBegin” event with “requestType” as “validateLinkedTask” will be triggered to validate the relationship between two tasks, when one of the task is edited. Though the dependency lines will not be visible in resource view Gantt, the validation will be handled internally. You can ignore this event with this requestType while editing the taskbar. We have also logged an issue report for “Issue in event triggering for predecessor validation  without predecessor mapping”, we will fix this issue and the fix will be available in our upcoming 2018 volume 1 release, which is expected to be release 1st week of February, 2018. Until then, please ignore handling this event in your sample with the requestType as validateLinkedTask. 
 
Please refer the below link to know more about “Predecessor” 
Link: https://help.syncfusion.com/js/gantt/task-relationship 
 
Please let us know if you require any other assistance on this.   
 
Regards,   
Suriyaprasanth R.

Ansumane Sambu · Answer

Good Morning,I need to fetch the information in the database and grease the Gantt by clicking GanttToolBarItems.PrevTimeSpan or GanttToolBarItems.PrevTimeNext

Jayakumar Duraisamy · Answer

Hi Ansumane, 
We have analyzed your given requirement but currently it is possible to change the data using the toolbar button click only in project view Gantt. In resource view Gantt there is no support for updating the data source dynamically. Hence, we have created feature report on this.  
This feature will be included in our upcoming Volume 1 SP1 2018 release, which is expected to roll out at the end of February 2018. 
Regards, 
Jayakumar D