Hi Emir,
Thank you for contacting Syncfusion support.
We can’t use editMode as batch and dialog at same time. Because the batch edit mode is like excel in editing and Dialog edit mode is differ from that. So, please provide more details and let us know the purpose on why you want to use batch and dialog edit modes at same time. It would be helpful for us to find the problem and provide a better solution as earliest.
Regards,Venkatesh Ayothiraman.
<Style>
<style type="text/css" class="cssStyles">
.Expand:before {
content: "\e627";
}
.Collapse:before
{
content:"\e625";
}
</style>
<Grid>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource:window.gridData,
allowPaging: true,
allowFiltering: true,
filterSettings: { filterType: "menu" },
actionBegin: "actionBegin",
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarClick:"toolbarClick",
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel], customToolbarItems: ["Expand", "Collapse"] },
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID" },
{ field: "EmployeeID", headerText: 'Employee ID' },
{ field: "Freight", headerText: 'Freight', format: "{0:C}" },
{ field: "ShipCity", headerText: 'Ship City' },
{ field: "OrderDate", headerText: "DateColumn", format: "{0:dd/MM/yyyy}", editType: "datetimepicker" }
]
});
});
<toolbarClick event>
function toolbarClick(args) {
if (args.itemName == "Expand")
$("#Grid").ejGrid("option", { editSettings: { editMode: "batch" } }) // change the editmode by using setModel
else if (args.itemName == "Collapse")
$("#Grid").ejGrid("option", { editSettings: { editMode: "dialog" } })// change the editmode by using setModel
}
|
Hi Emir,
Thank you for the update.
We have created a sample for your requirement. In this sample we can change the edit mode by custom icons in the toolbar using toolbarClick event in the Grid. Please refer to the code example, sample and Help document,Code example:
<Style><style type="text/css" class="cssStyles">.Expand:before {content: "\e627";}.Collapse:before{content:"\e625";}</style><Grid><script type="text/javascript">$(function () {$("#Grid").ejGrid({dataSource:window.gridData,allowPaging: true,allowFiltering: true,filterSettings: { filterType: "menu" },actionBegin: "actionBegin",editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },toolbarClick:"toolbarClick",toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel], customToolbarItems: ["Expand", "Collapse"] },columns: [{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID" },{ field: "EmployeeID", headerText: 'Employee ID' },{ field: "Freight", headerText: 'Freight', format: "{0:C}" },{ field: "ShipCity", headerText: 'Ship City' },{ field: "OrderDate", headerText: "DateColumn", format: "{0:dd/MM/yyyy}", editType: "datetimepicker" }]});});<toolbarClick event>function toolbarClick(args) {if (args.itemName == "Expand")$("#Grid").ejGrid("option", { editSettings: { editMode: "batch" } }) // change the editmode by using setModelelse if (args.itemName == "Collapse")$("#Grid").ejGrid("option", { editSettings: { editMode: "dialog" } })// change the editmode by using setModel}
Help document: http://help.syncfusion.com/js/api/ejgrid#events:toolbarclick
Regards,Venkatesh Ayothiraman.