set title in edit dialog

[haizhi zhong]

Hi guys, 

In the grid editing, I am using dialog mode with customer template.

The default title there is "Details of #id", but the #id is a database primary key which the user shouldn't see at all. 

Is there a way to change the title?  It is not critical, but annoying.

[Renjith Singh Rajendran]

Hi Haizhi, 

Thanks for contacting Syncfusion support. 

We suggest you to define the Dialog property of GridEditSettings. This gives you the dialog instance, through which you can define your own customized header using Header property. Please use the code below,   

 

<EjsGrid ...> 

    ... 

    <GridEditSettings AllowAdding="true" AllowEditing="true" Dialog="DialogParams" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings> 

    ... 

</EjsGrid> 

 

@code{ 

    public static string Header { get; set; } 

   public object DialogParams = new 

    { 

       @@params = new DialogModel { Header = "Custom Dialog header" } 

    }; 

} 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[haizhi zhong]

Thank you for the reply.

But I have already tried that solution, with OnActionComplete="OnComplete" like what mentioned in 

https://ej2.syncfusion.com/blazor/documentation/grid/editing/#customize-the-dialog-header

It simple didn't work. I think that solution doesn't support using template in dialog. 

[Renjith Singh Rajendran]

Hi Haizhi, 

Currently we don’t have support to update the Dialog edit header dynamically by using the “OnActionComplete” event(as suggested in our documentation). We have already logged a feature task “Support to change the Edit / Add Dialog Header dynamically” and added to our feature request list. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts.   

  

We have considered this requirement for our 2020 Volume 1 release which is expected to rolled out in the month of March 2020.   

  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    

Feedback Link : https://www.syncfusion.com/feedback/11038/support-to-change-the-edit-add-dialog-header-dynamically 

Until then you can display a customized header for the Edit Dialog in Grid by using the previously suggested static way. We have prepared a sample based on the previously suggested solution. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1745004425 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[haizhi zhong]

Thank you very much. 

That saves me tons of time for trying.

[Renjith Singh Rajendran]

Hi Haizhi, 

Thanks for your update. 

As promised we will implement this support in our upcoming Volume 1, 2020 release. Once its rolled out you can use the codes in the documentation to update the Edit Dialog header dynamically. 

Until then we appreciate your patience. 

Regards, 

Renjith Singh Rajendran. 

[Davy]

Hello, is this released already?

[Renjith Singh Rajendran]

Hi Davy, 

Thanks for your update. 

Yes, we have rolled out this feature in our earlier release version. Please refer the release notes from the link below, 

Release Notes : https://blazor.syncfusion.com/documentation/release-notes/17.4.51/#grid 

 

Now you can customize the entire Add/Edit Dialog based on your requirement. We suggest you to use as like the below code to achieve this requirement. 

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"> 

        <HeaderTemplate> 

            @{  

                var text = GetHeader((context as Order)); 

                <span>@text</span>  

            } 

        </HeaderTemplate> 

        <FooterTemplate> 

            <SfButton OnClick="@Save">@ButtonText</SfButton> 

            <SfButton OnClick="@Cancel">Cancel</SfButton> 

        </FooterTemplate> 

    </GridEditSettings> 

    ... 

</SfGrid> 

 

   @code{  

            SfGrid<Order> Grid { get; set; } 

            public List<Order> Orders { get; set; } 

            public string Header { get; set; } 

            public string ButtonText { get; set; } 

            public string GetHeader(Order Value) 

            { 

                if (Value.OrderID == null) 

                { 

                    ButtonText = "Insert"; 

                    return "Insert New Order"; 

                } 

                else 

                { 

                    ButtonText = "Save Changes"; 

                    return "Edit Record Details of " + Value.OrderID.ToString(); 

                } 

            } 

            public void Cancel() 

            { 

                Grid.CloseEdit();                   //Cancel editing action 

            } 

            public void Save() 

            { 

                Grid.EndEdit();                      //Save the edited/added data to Grid 

            } 

            ... 

   } 

We are also attaching a sample in our latest version 18.1.0.48 based on this scenario for your reference. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-840411137 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Jens Chr. Thomsen]

This line gives me an error.
@@params = new DialogModel { Header = "Custom Dialog header" } 

And what is DialogModel

[Prathap Senthil]

Hi Jens,

Based on the reported problem, we would like to inform you that after the Volume 2020 Volume 2 release, the property has been changed from 'object' to 'DialogSettings.' If you want to change the header in the dialog, we suggest using 'HeaderTemplate' in 'GridEditSettings.' Please refer to the code snippet and sample below for your reference.

      <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@Syncfusion.Blazor.Grids.EditMode.Dialog" Dialog="@dialogParams">

      

       

      <HeaderTemplate>

         Custom Dialog Header

      </HeaderTemplate>

   <FooterTemplate>

        Check footer

    </FooterTemplate>

</GridEditSettings>

@code{
  public DialogSettings dialogParams = new DialogSettings { Width = "800px", ShowCloseIcon = false,  };

}

Sample Link:
https://blazorplayground.syncfusion.com/embed/LXVAWhDCfInwnOOH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference:
https://blazor.syncfusion.com/documentation/datagrid/dialog-editing#customize-the-edit-dialog

https://blazor.syncfusion.com/documentation/release-notes/18.2.44?type=all#grid

Regards,
Prathap S

[Jens Chr. Thomsen]

I am interested in the header parameter not the width and shoqicon, but I cannot use header in your example.
I want to remove the details on xx header an

[Prathap Senthil]

After the release of Volume 2 in 2020, the property has been changed from 'object' to 'DialogSettings.' So, if you want to change the header in the dialog, we suggest using 'HeaderTemplate' in 'GridEditSettings.' In the Dialog setting, we support the property mentioned in the link below. Kindly refer to the following UG for your reference

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.DialogSettings.html