Grid dialog edit template

[Alex]

Hi! 

Is it possible to use custom dialog template for grid editing? 

Thx.

[Dhivya Rajendran]

Hi Alex, 

Thanks for contacting Syncfusion support, 

Query1: Is it possible to use custom dialog template for grid editing?  

Yes, we have create a sample for your reference. In the below sample we have customized the cell by using  edit property of column  in Grid. You can customize the each cell by using edit property. Kindly please refer the below sample and code snippet for more information. 

<div> 

    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" load="load" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true"> 

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings> 

        <e-grid-columns>     

            <e-grid-column field="OrderDate" headerText="Order Date" type= 'date' format= 'yMd' width="170"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

<script> 

    function load() { 

        this.columns[3].edit = {            // custom datepicker for orderDate column using edit property 

            create: function () { 

                elem = document.createElement('input'); 

                return elem; 

            }, 

            read: function () { 

                return datePickerObj.value; 

            }, 

            destroy: function () { 

                datePickerObj.destroy(); 

            }, 

            write: function (args) { 

                datePickerObj = new ej.calendars.DatePicker({ 

                    value: new Date(args.rowData[args.column.field]), 

                    floatLabelType: 'Never' 

                }); 

                datePickerObj.appendTo(elem); 

            } 

        } 

    } 

</script> 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/grid-core-editcell-template2090259063  

Documentation: https://ej2.syncfusion.com/16.1.24/documentation/grid/edit.html?lang=es5#cell-edit-template  

Regards,
R.Dhivya 

[Alex]

Thanks for quick reply, but i mean dialog template for customizing layout. How can i set dialog size and customize layout using bootstrap grid system?

[Sundararaman Krishnamoorthy]

Hi Alex, 

Refer the below link for customizing the dialog template for editing. Here the dialog is customized in the actionComplete event. 

https://ej2.syncfusion.com/16.1.32/aspnet/documentation/grid/how-to.html?syntax=tag#customize-dialog-when-editing 

Currently we don’t have support for this layout editing. For this kind of requirement we have feature called “Dialog template support for grid” . By this we can customize layout in editing. 

Regards,  

Sundararaman. K