Add two input areas to the Add Edit Dialog

[desmond]

I want to add two TextAreas to the Add Edit Dialog of Gantt. Obviously adding two columns can solve the problem immediately, but is there any better solution that allows me to do the same thing without editing my data model? Maybe writing some JS works? The values in the two TextAreas is not related to the data model, and will not store in the database. The values are for determining if there should be an extra popup to let user fill in something else.

[Ajithkumar Gopalakrishnan]

Hi Desmond,

Greetings from Syncfusion Support,

When data models are added as columns, we can get the updated values when edited. If it not added but defined in the Gantt column collection, we cannot retrieve the edited values. Below is the code snippet for reference:

<GanttColumns>

    …

   <GanttColumn Field="AddtionalInfo"></GanttColumn>

</GanttColumns>

To meet your requirement, as you have expected, we can invoke JavaScript for adding two text area fields in the General tab. We use the GanttDialogOpened event in the Gantt chart. This event triggers after the dialog is opened, allowing JavaScript to be invoked to add and update the fields. Refer to the code snippet and sample below:

<SfGantt @ref="gantt" >

    …

   

    <GanttEvents TValue="TaskInfoModel" GanttDialogOpened="GanttDialogOpenedHandler" ></GanttEvents>

</SfGantt>

public async void GanttDialogOpenedHandler(GanttDialogOpenedEventArgs<TaskInfoModel> args)

{

    //Here, you can customize your code.

    await JSRuntime.InvokeVoidAsync("myInteropNamespace.addTextareaInputs");

}

 

[JSInvokable]

public static void OnTextareaValueChanged(string textarea1Value, string textarea2Value)

{

    // Handle the values from the textareas here

    Console.WriteLine($"Textarea 1: {textarea1Value}");

    Console.WriteLine($"Textarea 2: {textarea2Value}");

 

    // You can also update Blazor state or perform other actions with these values

}

// interopFunctions.js

window.myInteropNamespace = {

    addTextareaInputs: function () {

        // Get the parent element of the target element

        var parentElement = document.getElementById(' EditGeneralTabContainer'); // Gantt id + GeneralTabContainer

       

        // Create the textarea input boxes

        var textarea1 = document.createElement('textarea');

        var textarea2 = document.createElement('textarea');

 

        const textareaStyle = {

            display: 'block',

            float: 'left',

            padding: '15px 20px 0 18px',

            width: 'calc(50% - 20px)',  // Adjust width and margin

            marginRight: '20px'  // Space between the two textareas

        };

 

        Object.assign(textarea1.style, textareaStyle);

        Object.assign(textarea2.style, textareaStyle);

 

        // Optionally, set attributes or styles for the textareas

        textarea1.setAttribute('placeholder', 'Enter text here');

        textarea2.setAttribute('placeholder', 'Enter text here');

       

 

        // Append the textarea input boxes as the last children of the parent element

        parentElement.appendChild(textarea1);

        parentElement.appendChild(textarea2);

 

        textarea1.addEventListener('change', function () {

            window.sendTextareaValues(textarea1.value, textarea2.value);

        });

 

        textarea2.addEventListener('change', function () {

            window.sendTextareaValues(textarea1.value, textarea2.value);

        });

    },

    setBlazorMethod: function (methodName) {

        window.sendTextareaValues = function (textarea1Value, textarea2Value) {

            DotNet.invokeMethodAsync('SupportSample', methodName, textarea1Value, textarea2Value)

                .catch(error => console.error(error));

        };

    }

};

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TaskbarEdit-811016639.zip

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G

[desmond]

Thanks a lot for your help. For some reason, I now also need a sample that can edit two custom columns in the General Tab. Is it possible to make args.Data include the two columns when Syncfusion.Blazor.Gantt.Action.Save event occurs after I click save?

[Ajithkumar Gopalakrishnan]

Hi Desmond,

To achieve your requirement, we suggest using the GanttEditDialogField and GanttAddDialogField properties in the Gantt chart. These properties allow custom columns to be rendered in the General tab, even when they are custom fields. The custom column values can then be retrieved in the RowUpdated event through args.Data. We have attached a code snippet and sample for reference.

<SfGantt >

     …

    <GanttColumns>

         …

        <GanttColumn Field="customColumn1"  HeaderText="customColumn1"></GanttColumn>

         <GanttColumn Field="customColumn2" HeaderText="customColumn2"></GanttColumn>

    </GanttColumns>

    <GanttAddDialogFields>

        <GanttAddDialogField Fields="@Fields"></GanttAddDialogField>

    </GanttAddDialogFields>

    <GanttEditDialogFields>

        <GanttEditDialogField Fields="@Fields"></GanttEditDialogField>

    </GanttEditDialogFields>

     <GanttEvents RowUpdated="RowUpdatedHandler" TValue="TaskData"></GanttEvents>

</SfGantt>

private string[] Fields = new string[] { "TaskId", "TaskName", "StartDate", "EndDate", "customColumn1", "customColumn2", "Duration" };

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Index-2086038824.zip



For more information, you may refer to the following link:

https://blazor.syncfusion.com/documentation/gantt-chart/editing-tasks#limiting-data-fields-in-general-tab

Additionally, we previously shared a sample without a model class where two custom columns were added in the General tab.

Note:-  If you want to access the value, it is necessary to add the properties in model class. Then only the custom column values can be accessed through args.Data in TValue, which is standard behavior not only for the Gantt chart but also for all Syncfusion Blazor components. If further clarification is needed, please share the relevant details, along with a sample and video reference, so we can provide additional assistance.

Regards,

Ajithkumar G