Modify Grid Editor DialogTemplate custom buttons

[Juan Acosta]

Hi, 

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

https://www.syncfusion.com/forums/124352/datasource-of-bd-in-dropdownlist-in-gris

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]

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.    

 

https://help.syncfusion.com/js/api/ejgrid#members:editsettings-titleColumn  

 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

 

@(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, 

 

cancelEdit: https://help.syncfusion.com/api/js/ejgrid#methods:canceledit 

 

endEdit: https://help.syncfusion.com/api/js/ejgrid#methods:endedit 

 

destroy: https://help.syncfusion.com/api/js/ejbutton#methods:destroy 

 

 

<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.   

http://help.syncfusion.com/aspnetmvc/grid/editing?cs-save-lang=1&cs-lang=js#dialog-template-form 

 

@(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 }); 

                 

.. 

                } 

            } 

        } 

 

Sample: http://www.syncfusion.com/downloads/support/forum/127419/ze/SyncfusionMvcApplication81789139213 

 

Online demo sample: http://mvc.syncfusion.com/demos/web/grid/dialogediting 

 

Regards, 

 

Jayaprakash K. 

[Juan Acosta]

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]

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>

Sample:
http://www.syncfusion.com/downloads/support/forum/127419/ze/SyncfusionMvcApplication8-613704659

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.

http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box

Regards,

Jayaprakash K.

[Juan Acosta]

Hi Jayaprakash,

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

Kind regards,

Juan

[Jayaprakash Kamaraj]

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.