We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

set title in edit dialog

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.

7 Replies

RS Renjith Singh Rajendran Syncfusion Team February 11, 2020 01:28 AM

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. 



HZ haizhi zhong February 11, 2020 01:32 PM

Thank you for the reply.

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

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


RS Renjith Singh Rajendran Syncfusion Team February 12, 2020 01:38 AM

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.    

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, 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



HZ haizhi zhong February 13, 2020 12:20 AM

Thank you very much. 

That saves me tons of time for trying.




RS Renjith Singh Rajendran Syncfusion Team February 13, 2020 11:27 PM

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. 




DA Davy May 6, 2020 01:15 AM

Hello, is this released already?


RS Renjith Singh Rajendran Syncfusion Team May 7, 2020 12:33 AM

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, 
 
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, 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Loader.
Live Chat Icon For mobile
Up arrow icon