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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom dialog edit template for grid

Thread ID:

Created:

Updated:

Platform:

Replies:

141160 Nov 27,2018 02:44 PM UTC Nov 29,2018 08:39 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
Vanderlei
Asked On November 27, 2018 03:09 PM UTC

Hi guys,

I am using dialog edit template with partial views and CRUD is working fine. Although I have some design issues I'd like to ask you some support.
Please check de picture bellow:
 

#1 - I'd like to customize header information (please remember I'm using template and partial views). Is there a way to do it?
#2 - Combo boxes doesn't render its arrow button in the right side of line (as you can see the combobox botton line is beyond arrow button). Even when using a larger column width (col-md-12) arrow button is rendered at the same place you see in the picture above. How to fix this?
#3 - Dialog form height is ok when I am on a grid page with at least 5 or 6 rows. When the grid page has zero or few rows form height "shrinks" and some fields are not shown. Is there a way to fix dialog form height to keep its height no matter how many rows appears on grid?
#4 - I'd like to show to the users an option to print (or not) a register just after saving it. Could it be a notification component? How to do it?

Thanks in advance!


Madhu Sudhanan P [Syncfusion]
Replied On November 28, 2018 11:14 AM UTC

Hi Vanderlei, 

Thanks for contacting Syncfusion support. 

Query #1: I'd like to customize header information (please remember I'm using template and partial views). Is there a way to do it? 

You can customize the Dialog template header in the actionComplete event of Grid component. Please refer to the below code example and documentation link. 

[index.cshtml] 
<div class="control-section"> 
        @Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.dataSource).ActionComplete("actionComplete").Columns(col => 
   { 
        .  .  . 
   }).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
    </div> 
 
    <script> 
        var div = ej.base.createElement('div', { id: 'dlg' }); 
        function actionComplete(args) { 
            if (args.requestType === 'beginEdit') { 
                args.dialog.header = 'Edit Dialog'; 
                .  .  .            } 
            if (args.requestType === 'add') { 
                args.dialog.header = 'Add Dialog'; 
                .  .  . 
            } 
        } 
    </script> 


Query #2: Combo boxes doesn't render its arrow button in the right side of line (as you can see the combobox botton line is beyond arrow button). Even when using a larger column width (col-md-12) arrow button is rendered at the same place you see in the picture above. How to fix this? 

Before providing solution, Could you please share your template for the Edit dialog. So we can validate the query and provide a better solution as soon as possible. 

Query #3: Is there a way to fix dialog form height to keep its height no matter how many rows appears on grid? 

You can set the height for the Dialog template in the actionComplete event of Grid component in which you can get the Edit/Add Dialog object. Please refer to the below code example and documentation link. 

[index.cshtml] 
<div class="control-section"> 
        @Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.dataSource).ActionComplete("actionComplete").Columns(col => 
   { 
         .  .  . 
   }).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
    </div> 
 
    <script> 
        function actionComplete(args) { 
            if (args.requestType === 'beginEdit') { 
                args.dialog.height = '400px'; 
                  .  . . 
            } 
             
        } 
    </script> 


Query #4: I'd like to show to the users an option to print (or not) a register just after saving it. Could it be a notification component? How to do it? 

You can render a notification component after a saving the data in the actionComplete event with requestType ‘save’. Please refer to the below code example and sample link. 

[index.cshtml] 
<div class="control-section"> 
        @Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.dataSource).ActionComplete("actionComplete").Columns(col => 
   { 
        .  .  . 
   }).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
    </div> 
 
    <script> 
        function actionComplete(args) { 
               .   .   . 
            if (args.requestType === 'save') { 
                var toastObj = new ej.notifications.Toast({ 
                    position: { 
                        X: 'Right' 
                    }, target: document.body 
                    
                }); 
                toastObj.appendTo('#DialogTemplateEdit'); 
                toastObj.show({ title: 'Information!', content: 'You can Print the data now.', cssClass: 'e-toast-info', icon: 'e-info toast-icons' }); 
            } 
        } 
    </script> 

 

Regards, 
Madhu Sudhanan P 


Vanderlei
Replied On November 28, 2018 02:10 PM UTC

Hi Madhu,

Query #2: Combo boxes doesn't render its arrow button in the right side of line (as you can see the combobox botton line is beyond arrow button). Even when using a larger column width (col-md-12) arrow button is rendered at the same place you see in the picture above. How to fix this? 

Before providing solution, Could you please share your template for the Edit dialog. So we can validate the query and provide a better solution as soon as possible. 

I pointed the script in the picture bellow. Please have the full code attached.



Thanks for the support!

Attachment: _DemandasDialogAddPartial_f07806c9.7z

Madhu Sudhanan P [Syncfusion]
Replied On November 29, 2018 08:39 AM UTC

Hi Vanderlei, 
 
We have validated your query and found that the reported problem occurred because of the default MVC (site.css) styles override the provided CSS .  
 
We suggest you to remove the below CSS reference from App_Start/BundleConfig.cs in your application or override input max-width property as 100% to resolve the reported problem. 

[BundleConfig.cs] 
namespace mvc_ej2 
{ 
    public class BundleConfig 
    { 
        public static void RegisterBundles(BundleCollection bundles) 
        { 
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include( 
                        "~/Scripts/jquery-{version}.js")); 
            . . . . . 
            bundles.Add(new StyleBundle("~/Content/css").Include( 
                      "~/Content/bootstrap.css", 
                      "~/Content/site.css")); // remove the default site.css 
        } 
    } 
} 



 
<style> 
   .e-dlg-content .e-gridform input, select, textarea { 
        max-width: 100% !important; 
    } 
</style> 

Regards, 
Madhu Sudhanan P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon