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
