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

Modify Grid Editor DialogTemplate custom buttons

Thread ID:

Created:

Updated:

Platform:

Replies:

127419 Nov 15,2016 01:35 AM Nov 21,2016 03:37 AM ASP.NET MVC 5
loading
Tags: Grid
Juan Acosta
Asked On November 15, 2016 01:35 AM

Hi, 

I was looking this answer and doing something similar to this answer. 


So, I added a dialog template and it works fine. However, I want to improve some things. 



I used this code for the template
<!-- template maintenance-->
<script type="text/template" id="templateMaintenance">
    <div style="text-align:center">
        <b>Document Details</b>
        <table cellspacing="10">
            <tr>
                <td style="text-align: right;">
                    File Name
                </td>
                <td style="text-align: left">
                    <input id="Name" name="Name" value="{{: Name}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable"
                           style="text-align: right; width: 116px; height: 28px" />
                </td>           
                <td style="text-align: right;">
                    Document #
                </td>
                <td style="text-align: left">
                    <input id="DocumentNumber" name="DocumentNumber" value="{{: DocumentNumber}}" class="e-field e-ejinputtext valid"
                           style="width: 116px; height: 28px" />
                </td>           
            </tr>
            <tr>
                <td style="text-align: right;">
                    Document Title
                </td>
                <td style="text-align: left">
                    <input id="DocumentTitle" name="DocumentTitle" value="{{: DocumentTitle}}" class="e-field e-ejinputtext valid"
                           style="text-align: right; width: 116px; height: 28px" />
                </td>
                <td style="text-align: right;">
                    Revision Number
                </td>
                <td style="text-align: left">
                    <input id="DocumentRevisionNumber" name="DocumentRevisionNumber" value="{{: DocumentRevisionNumber}}" class="e-field e-ejinputtext valid"
                           style="width: 116px; height: 28px" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    Document Page Size
                </td>
                <td style="text-align: left">
                    <select id="PageSizeId" name="PageSizeId"></select>
                </td>
                <td style="text-align: right;">
                    Area
                </td>
                <td style="text-align: left">
                    <select id="AreaId" name="AreaId"></select>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    Document Category
                </td>
                <td style="text-align: left">
                    <select id="DocumentCategoryId" name="DocumentCategoryId"></select>
                </td>
                <td style="text-align: right;">
                    Document Status
                </td>
                <td style="text-align: left">
                    <select id="DocumentStatusId" name="DocumentStatusId"></select>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    Tags
                </td>
                <td style="text-align: left">
                    <input id="Tags" name="Tags" value="{{: Tags}}" class="e-field e-ejinputtext valid"
                           style="text-align: right; width: 116px; height: 28px" />
                </td>
                <td style="text-align: right;">
                    Comments
                </td>
                <td style="text-align: left">
                    <textarea id="Comments" name="Comments" class="e-ejinputtext" value="{{: Comments}}">{{: Comments}}</textarea>
                    <!--<input id="Comments" name="Comments" value="{{: Comments}}" class="e-field e-ejinputtext valid"
                           style="width: 116px; height: 28px" />-->
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    Transmittal Number
                </td>
                <td style="text-align: left">
                    <input id="TransmittalNumber" name="TransmittalNumber" value="{{: TransmittalNumber}}" class="e-field e-ejinputtext valid"
                           style="text-align: right; width: 116px; height: 28px" />
                </td>
                <td style="text-align: right;">
                    Pages
                </td>
                <td style="text-align: left">
                    <input type="text" id="NumberOfPages" name="NumberOfPages" value="{{: NumberOfPages}}" />
                </td>
            </tr>   
        </table>
    </div>
</script>
Changes Required (if possible)

1. Title 

Currently, the dialog use the primary key as the title.  I want to use the File name instead, how can I overload that.

2. Buttons styles

The dialog has some predefined styles and even if I took away the main styles. The buttons are overload with some class.

//remove the main style
$("#EditDialog_GridDocumentMaintenance_Save").removeAttr('style');
$("#EditDialog_GridDocumentMaintenance_Cancel").removeAttr('style');

//centered buttons not recognized
$("#EditDialog_GridDocumentMaintenance_Cancel").css('text-align', 'center');


//added new styles bootstrap not recognized
 $("#EditDialog_GridDocumentMaintenance_Cancel").addClass("btn-success");
 $("#EditDialog_GridDocumentMaintenance_Cancel").addClass("btn");

I want top finish with this style of buttons, centred.



3. Numeric editor in the fields.

The field
col.Field(p => p.NumberOfPages).Tooltip("#colTip").HeaderText("Pages").EditType(EditingType.Numeric).TextAlign(TextAlign.Right).Add();
It should ppear as number , with controls to go up and down. If I took out the dialog template it works.



What could be the error in the definition?

<tr>
                <td style="text-align: right;">
                    Transmittal Number
                </td>
                <td style="text-align: left">
                    <input id="TransmittalNumber" name="TransmittalNumber" value="{{: TransmittalNumber}}" class="e-field e-ejinputtext valid"
                           style="text-align: right; width: 116px; height: 28px" />
                </td>
                <td style="text-align: right;">
                    Pages
                </td>
                <td style="text-align: left">
                    <input type="text" id="NumberOfPages" name="NumberOfPages" value="{{: NumberOfPages}}" />
                </td>
            </tr>   

I will appreciate if you can guide me to solve this small issues.

Kind regards,
Juan


Jayaprakash Kamaraj [Syncfusion]
Replied On November 16, 2016 07:27 AM

Hi Juan, 
 
Thank you for contacting Syncfusion support. 
 
Query 1 : Currently, the dialog use the primary key as the title.  I want to use the File name instead, how can I overload that.  

You can change the value in the edit form title with the value of any column, using the TitleColumn property of the Grid editSettings.    
 
 
 
@(Html.EJ().Grid<SyncfusionMvcApplication8.OrdersView>("FlatGrid")     
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).TitleColumn("CustomerID").DialogEditorTemplateID("#template"); }) 
        .. 
) 
 
 
Query 2: The dialog has some predefined styles and even if I took away the main styles. The buttons are overload with some class.  
 
You need to change ejButton to normal input button using the destroy method of ejButton, and then you can apply any style for Save and Cancel button. In Save button click,  call endEdit method to perform save operation in Grid, and in Cancel button click, call cancelEdit method to cancel the edit operation. Please refer to the below help document and code example 
Help document for, 
 
 
 
 
 
<script type="text/javascript"> 
 
        function complete(args) { 
            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 
                $("#" + this._id + "_dialogEdit").ejDialog({ title: "Details of File Name" }); 
                              // FlatGrid is Grid  id 
 
                $("#EditDialog_FlatGrid_Save").ejButton("destroy"); 
                $("#EditDialog_FlatGrid_Save").addClass('btn-success btn'); 
                $("#EditDialog_FlatGrid_Save").css({ "width": "100px", "height": "50px", "margin-left": "100px" }); 
                $("#EditDialog_FlatGrid_Cancel").ejButton("destroy"); 
                $("#EditDialog_FlatGrid_Cancel").addClass('btn-success btn'); 
                $("#EditDialog_FlatGrid_Cancel").css({ "width": "100px", "height": "50px", "margin-left": "10px" }).. 
                } 
            } 
        } 
        $("#EditDialog_FlatGrid_Save").click(function () { 
            var obj = $("#FlatGrid").ejGrid("instance"); 
            obj.endEdit();  
        }); 
 
        $("#EditDialog_FlatGrid_Cancel").click(function () { 
           var obj =  $("#FlatGrid").ejGrid("instance") 
           obj.cancelEdit(); 
        }); 
 
</script> 
 
Query 3: Numeric editor in the fields. 
 
While using template, you can change the elements that are defined in the Template, to appropriate JS controls based on the column type. This can be achieved by using the ActionComplete event of grid. Please refer to the below Help document, code example and sample.   
 
@(Html.EJ().Grid<SyncfusionMvcApplication8.OrdersView>("FlatGrid") 
.. 
 
        .Columns(col => 
        { 
.. 
            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).EditType(EditingType.Numeric).Format("{0:C}").Add(); 
.. 
        }) 
        .ClientSideEvents(eve => { eve.ActionComplete("complete"); }) 
) 
<script type="text/template" id="template"> 
    <b>Order Details</b> 
    <table cellspacing="10"> 
        .. 
 
           <td style="text-align: right;"> 
                Freight 
            </td> 
            <td style="text-align: left"> 
                <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 
            </td> 
            .. 
 
</script> 
 
function complete(args) { 
            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 
.. 
                $("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", height: "28px", decimalPlaces: 2 }); 
                 
.. 
                } 
            } 
        } 
 

 
 
Regards, 
 
Jayaprakash K. 


Juan Acosta
Replied On November 16, 2016 07:41 PM

Hi Jayaprakash,

Thank you for your answer. Everything works fine.

One last question,

I have this type of buttons, in the rest of the app.



Those buttons are defined like this

 <button type="submit" class="btn btn-success" onclick="searchFilesSaveChanges()">
        <i class="fa fa-save fa-fw"></i>
        <span>Save Changes</span>
    </button>

I implemented you suggestions and I get something like this.



Using this code(that you implemented):

 $("#EditDialog_GridDocumentMaintenance_Save").ejButton("destroy");
            $("#EditDialog_GridDocumentMaintenance_Save").addClass('btn btn-success btn-sm');
            $("#EditDialog_GridDocumentMaintenance_Save").css({ "width": "100px", "height": "50px","font-size":"17px","margin-left": "190px" });

There is a way to add the icon to that button?

Kind regards,

Juan










 

Jayaprakash Kamaraj [Syncfusion]
Replied On November 17, 2016 08:02 AM

Hi Juan, 

Query : There is a way to add the icon to that button? 
 
Method 1 :  
 
We have achieved your requirement by creating <button> element instead of input element. We need to hide the default input elements for save and cancel actions and then create button element with icon as in the below code example. 
 
<script type="text/javascript"> 
 
        function complete(args) { 
            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 
                $("#EditDialog_FlatGrid_Save").ejButton("destroy"); 
                $($("#EditDialog_FlatGrid_Save").hide()).after('<button id="save" type="button" onclick="savess();" class="btn btn-success btn-sm" > <span class="glyphicon glyphicon-save"></span> Save</button>'); 
                $("#save").css({ "width": "100px", "height": "50px", "font-size": "17px", "margin-left": "190px" }); 
                $("#EditDialog_FlatGrid_Cancel").ejButton("destroy"); 
                $($("#EditDialog_FlatGrid_Cancel").hide()).after(' <button type="button" id="cancel" onclick="cancelss()" class="btn btn-success btn-sm" ><span class="glyphicon glyphicon-remove-circle"></span> Cancel</button>'); 
                $("#cancel").css({ "width": "100px", "height": "50px", "margin-left": "10px" }) 
.. 
                } 
            } 
        } 
        function savess() { 
            var obj = $("#FlatGrid").ejGrid("instance"); 
            obj.endEdit(); 
 
        } 
    function cancelss(){ 
            var obj =  $("#FlatGrid").ejGrid("instance") 
            obj.cancelEdit(); 
        } 
 
</script> 


Method 2 :  

We can append bootstrap icons in input elements using custom css. Please refer to the below online link where this query has been discussed.



Regards, 

Jayaprakash K. 


Juan Acosta
Replied On November 20, 2016 07:06 PM

Hi Jayaprakash,

Thanks for your help. I used the first option and everything seems to work fine.

Kind regards,

Juan

Jayaprakash Kamaraj [Syncfusion]
Replied On November 21, 2016 03:37 AM

Hi Juan,  
 
We are happy that the provided suggestion helped you.  
Please get back to us if you need any further assistance.   
 
Regards,  
 
Jayaprakash K. 


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.

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.

;