This knowledge base explains how to lock the first row from editing in JavaScript Spreadsheet. To achieve this requirement, you can use cellEdit event to prevent editing and actionBegin event to prevent the clipboard actions by setting args.cancel property as true. [HTML] <div id="spreadsheet"></div> [TS] import { BeforePasteEventArgs, CellEditEventArgs, getRangeIndexes, Spreadsheet } from '@syncfusion/ej2-spreadsheet'; import * as dataSource from './default-data.json'; let spreadsheet: Spreadsheet = new Spreadsheet({ sheets: [ { ranges: [{ dataSource: (dataSource as any).defaultData }], }, ], cellEdit(args: CellEditEventArgs) { // Prevent the editing in 1st row by checking the row index. let cell: string = spreadsheet.getActiveSheet().activeCell; let range: number[] = getRangeIndexes(cell); if (range[0] == 0) { args.cancel = true; } }, actionBegin(args: { action: string; args: BeforePasteEventArgs }) { // Prevent clipboard functionalities in 1st row. let cell: string = spreadsheet.getActiveSheet().activeCell; let range: number[] = getRangeIndexes(cell); let argsValue: BeforePasteEventArgs = args.args; if ((range[0] == 0 && args.action === 'copy') || args.action === 'cut') { argsValue.cancel = true; } if (range[0] == 0 && args.action === 'clipboard') { (argsValue as any).eventArgs.cancel = true; } }, }); spreadsheet.appendTo('#spreadsheet'); Sample Link: https://stackblitz.com/edit/sqsdx1-ejhdfg?file=index.ts Output: Documentation link: https://ej2.syncfusion.com/documentation/spreadsheet/editing https://ej2.syncfusion.com/documentation/spreadsheet/clipboard
You can validate the newly adding row value based on the existing records by using the CurrentCellValidating event in WinUI DataGrid (SfDataGrid). //Event subscription this.dataGrid.CurrentCellValidating += OnCurrentCellValidating; //Event customization private void OnCurrentCellValidating(object sender, CurrentCellValidatingEventArgs args) { // Check whether the row is in add new row or not bool isAddNewRow = dataGrid.IsAddNewIndex(dataGrid.SelectionController.CurrentCellManager.CurrentRowColumnIndex.RowIndex); if (!isAddNewRow) return; // Check whether the column is CustomerName or not if (args.Column.MappingName == "CustomerName") { // Get the value of the cell var text = args.NewValue.ToString(); // Check whether the value is already existing or not var datacontext = (this.dataGrid.DataContext as ViewModel).Orders; var listOfNames = datacontext.Where(e => e.CustomerName.Equals(text)).ToList(); if (listOfNames.Count > 0) { args.ErrorMessage = "Entered Name is already existing"; args.IsValid = false; } } } You can also use the RowValidating event to validate the row when the cell is edited. The RowValidating event occurs when the edited cells try to commit the row data or lose the focus. //Event subscription this.dataGrid.RowValidating += OnRowValidating; //Event customization private void OnRowValidating(object sender, RowValidatingEventArgs e) { // Check whether the row is in add new row or not bool isAddNewRow = dataGrid.IsAddNewIndex(dataGrid.SelectionController.CurrentCellManager.CurrentRowColumnIndex.RowIndex); if (!isAddNewRow) return; // Get the value of the column var data = e.RowData.GetType().GetProperty("CustomerName").GetValue(e.RowData); // Check whether the value is already existing or not var datacontext = (this.dataGrid.DataContext as ViewModel).Orders; var listOfNames = datacontext.Where(e => e.CustomerName.Equals(data)).ToList(); if (listOfNames.Count > 0) { e.IsValid = false; e.ErrorMessages.Add("CustomerName", "Entered Name is already existing"); } } Take a moment to peruse the WinUI DataGrid - Data Validation documentation, where you can find about data validation with code examples. View sample in GitHub
The Syncfusion Flutter DataGrid supports to edit the cell values by setting the SfDataGrid.allowEditing property as true and SfDataGrid.navigationMode as cell, SfDataGrid.selectionMode as other than none. This article will demonstrate how to update a specific column's value based on other columns when updating values at runtime in the Flutter DataGrid. Specifically, we will update the balance column value when the credit or debit value is changed at runtime. Step 1: To map data to the SfDataGrid, create a data source class by extending DataGridSource. In the DataGridSource.onCellSubmit method, you can update the dependent column value when the corresponding column value changes. After that, call the notifyDataSourceListeners method with the corresponding dependent column RowColumnIndex to notify the dependent column value in the underlying collection has changed, and the DataGrid will refresh that cell accordingly. In this article, we will demonstrate how to update the “balance” column cell value when the “credit” or “debit” column cell value is changed at runtime. class EmployeeDataSource extends DataGridSource { EmployeeDataSource(this.employees) { dataGridRows = employees.map((dataGridRow) => dataGridRow.getDataGridRow()).toList(); } List<Employee> employees = []; List<DataGridRow> dataGridRows = []; // Helps to hold the new value of all editable widget. // Based on the new value we will commit the new value into the corresponding // [DataGridCell] on [onSubmitCell] method. dynamic newCellValue; // Help to control the editable text in [TextField] widget. TextEditingController editingController = TextEditingController(); @override List<DataGridRow> get rows => dataGridRows; @override DataGridRowAdapter? buildRow(DataGridRow row) { return DataGridRowAdapter( cells: row.getCells().map((dataGridCell) { return Container( alignment: (dataGridCell.columnName == 'id' || dataGridCell.columnName == 'credit' || dataGridCell.columnName == 'debit' || dataGridCell.columnName == 'balance') ? Alignment.centerRight : Alignment.centerLeft, padding: const EdgeInsets.symmetric(horizontal: 8.0), child: Text( dataGridCell.value != null ? dataGridCell.value.toString() : "", overflow: TextOverflow.ellipsis, )); }).toList()); } @override void onCellSubmit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex, GridColumn column) { final dynamic oldValue = dataGridRow .getCells() .firstWhereOrNull((DataGridCell dataGridCell) => dataGridCell.columnName == column.columnName) ?.value ?? ''; final int dataRowIndex = dataGridRows.indexOf(dataGridRow); if (newCellValue == null || oldValue == newCellValue) { return; } if (column.columnName == 'id') { dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = DataGridCell<int>(columnName: 'id', value: newCellValue); employees[dataRowIndex].id = newCellValue as int; } else if (column.columnName == 'name') { dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = DataGridCell<String>(columnName: 'name', value: newCellValue); employees[dataRowIndex].name = newCellValue.toString(); } else if (column.columnName == 'credit') { dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = DataGridCell<int>(columnName: 'credit', value: newCellValue); employees[dataRowIndex].credit = newCellValue as int; // Get the value of the 'debit' column for the given dataGridRow, int debitValue = dataGridRow .getCells() .firstWhereOrNull( (DataGridCell dataGridCell) => dataGridCell.columnName == 'debit') ?.value; // Calculate the balance by subtracting debitValue from newCellValue int balance = newCellValue - debitValue; // Get the index of the 'balance' cell for the given row int balanceCellIndex = dataGridRow .getCells() .indexWhere((element) => element.columnName == 'balance'); // Update the value of the 'balance' column for the given row dataGridRows[dataRowIndex].getCells()[balanceCellIndex] = DataGridCell<int>(columnName: 'balance', value: balance); employees[dataRowIndex].balance = balance; // Call the `notifyDataSourceListeners()` method with the corresponding row and column // indices to refresh the cell with the updated value. notifyDataSourceListeners( rowColumnIndex: RowColumnIndex(rowColumnIndex.rowIndex, balanceCellIndex)); } else if (column.columnName == 'debit') { dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = DataGridCell<int>(columnName: 'debit', value: newCellValue); employees[dataRowIndex].debit = newCellValue as int; // Get the value of the 'credit' column for the given dataGridRow, int creditValue = dataGridRow .getCells() .firstWhereOrNull((DataGridCell dataGridCell) => dataGridCell.columnName == 'credit') ?.value; // Calculate the balance by subtracting the new cell value from the credit value. int balance = creditValue - newCellValue as int; // Get the index of the 'balance' cell for the given row int balanceCellIndex = dataGridRow .getCells() .indexWhere((element) => element.columnName == 'balance'); // Update the value of the 'balance' column for the given row dataGridRows[dataRowIndex].getCells()[balanceCellIndex] = DataGridCell<int>(columnName: 'balance', value: balance); employees[dataRowIndex].balance = balance; // Call the `notifyDataSourceListeners()` method with the corresponding row and column // indices to refresh the cell with the updated value. notifyDataSourceListeners( rowColumnIndex: RowColumnIndex(rowColumnIndex.rowIndex, balanceCellIndex)); } else { dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = DataGridCell<int>(columnName: 'balance', value: newCellValue); employees[dataRowIndex].balance = newCellValue as int; } } … } Step 2: Initialize the SfDataGrid widget with all the required properties. List<Employee> _employees = []; late EmployeeDataSource _employeeDataSource; @override void initState() { super.initState(); _employees = getEmployeeData(); _employeeDataSource = EmployeeDataSource(_employees); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')), body: SfDataGrid( source: _employeeDataSource, allowEditing: true, editingGestureType: EditingGestureType.tap, navigationMode: GridNavigationMode.cell, selectionMode: SelectionMode.single, columnWidthMode: ColumnWidthMode.auto, columns: [ GridColumn( columnName: 'id', label: Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), alignment: Alignment.centerRight, child: const Text('ID'))), GridColumn( columnName: 'name', label: Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), alignment: Alignment.centerLeft, child: const Text('Name'))), GridColumn( columnName: 'credit', label: Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), alignment: Alignment.centerRight, child: const Text('Credit'))), GridColumn( columnName: 'debit', label: Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), alignment: Alignment.centerRight, child: const Text('Debit'))), GridColumn( columnName: 'balance', label: Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), alignment: Alignment.centerRight, child: const Text('Balance'))), ], ), ); } View the GitHub sample here. Conclusion I hope you enjoyed learning about how update cell in specific column based on other column cell value when editing at run time in Flutter DataTable (SfDataGrid). You can refer to our Flutter DataGrid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter DataGrid documentation to understand how to present and manipulate data. For current customers, you can check out our Flutter components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our Flutter DataGrid and other Flutter components. If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The EditorSelectionBehavior as SelectAll will not work when the GridTemplateColumn is in edit mode in WinUI DataGrid (SfDataGrid). Because the element loaded inside the edit template cannot be predicted. You can achieve this by programmatically selecting all the text whenever the edit element got focused. In the following sample, TextBox has been loaded as an edit element of GridTemplateColumn and all the text has been selected which is present inside the TextBox by setting the TextBox custom property AutoSelectable to true. Refer to the following code snippet to achieve the EditorSelectionBehavior as SelectAll in GridTemplateColumn. XAML <Syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Orders,Mode=TwoWay}" AllowFiltering="True" EditorSelectionBehavior="SelectAll" ShowGroupDropArea="True" AutoGenerateColumns="False" AllowEditing="True"> <Syncfusion:SfDataGrid.Columns> <Syncfusion:GridNumericColumn MappingName="OrderID" HeaderText="Order ID" /> <Syncfusion:GridTemplateColumn MappingName="CustomerID"> <Syncfusion:GridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding CustomerID}" /> </DataTemplate> </Syncfusion:GridTemplateColumn.CellTemplate> <Syncfusion:GridTemplateColumn.EditTemplate> <DataTemplate> <local:CustomTextBox AutoSelectable="True" Text="{Binding CustomerID, Mode=TwoWay}" /> </DataTemplate> </Syncfusion:GridTemplateColumn.EditTemplate> </Syncfusion:GridTemplateColumn> <Syncfusion:GridTextColumn MappingName="ShipCity" HeaderText="Ship City" /> <Syncfusion:GridNumericColumn MappingName="UnitPrice" HeaderText="Unit Price" /> <Syncfusion:GridCheckBoxColumn MappingName="Review" HeaderText="Review" /> </Syncfusion:SfDataGrid.Columns> </Syncfusion:SfDataGrid> Code snippet related to CustomTextBox public class CustomTextBox : TextBox { public CustomTextBox() : base() { } public static bool GetAutoSelectable(DependencyObject obj) { return (bool)obj.GetValue(AutoSelectableProperty); } public static void SetAutoSelectable(DependencyObject obj, bool value) { obj.SetValue(AutoSelectableProperty, value); } public static readonly DependencyProperty AutoSelectableProperty = DependencyProperty.RegisterAttached("AutoSelectable", typeof(bool), typeof(CustomTextBox), new PropertyMetadata(false, AutoFocusableChangedHandler)); private static void AutoFocusableChangedHandler(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (e.NewValue != e.OldValue) { if ((bool)e.NewValue == true) { (d as TextBox).GotFocus += OnGotFocusHandler; } else { (d as TextBox).GotFocus -= OnGotFocusHandler; } } } private static void OnGotFocusHandler(object sender, RoutedEventArgs e) { (sender as TextBox).SelectAll(); } } Take a moment to peruse the WinUI DataGrid - Column Types documentation, to learn more about column types with code examples. View sample in GitHub Conclusion:Hope you enjoyed learning about how to achieve the EditorSelectionBehavior as SelectAll in GridTemplateColumn in WinUI DataGrid (SfDataGrid).You can refer to our WinUI DataGrid’s feature tour page to learn about its other groundbreaking feature representations. You can explore our WinUI DataGrid documentation to understand how to present and manipulate data.For current customers, you can check out our WinUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WinUI DataGrid and other WinUI components.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can select multiple cells by setting SelectionUnit as Cell or Any and SelectionMode as Multiple or Extended in WinUI DataGrid (SfDataGrid). You can edit and change the value of all the selected cells when editing completes by handling CurrentCellEndEdit event in SfDataGrid. You have to set a value for all the selected cells in the CurrentCellEndEdit event as shown in the below code snippet. If the current cell property type is not matched with the selected cell type, then you have to convert the value to the associated type of respective cells. //Event subscription dataGrid.CurrentCellEndEdit += OnCurrentCellEndEdit; //Event customization void OnCurrentCellEndEdit(object sender, CurrentCellEndEditEventArgs args) { //Get DataGrid var dataGrid = sender as SfDataGrid; if (dataGrid != null) { //Get the collection of SelectedCells using GetSelectedCells helper method var selectedcells = dataGrid.GetSelectedCells(); if (selectedcells != null && dataGrid.View != null) { var propertyAccessProvider = dataGrid.View.GetPropertyAccessProvider(); var itemProperties = dataGrid.View.GetItemProperties(); if (propertyAccessProvider != null && itemProperties != null) { if (dataGrid.CurrentItem != null && dataGrid.CurrentColumn != null && dataGrid.CurrentColumn.MappingName != null) { //Get the edited value in CurrentItem property var newValue = propertyAccessProvider.GetValue(dataGrid.CurrentItem, dataGrid.CurrentColumn.MappingName); //Check the selectedcells have 0r not if (selectedcells.Count > 0) { try { selectedcells.ForEach(item => { var cellInfo = item as GridCellInfo; var propInfo = itemProperties.Find(cellInfo.Column.MappingName, true); if (propInfo != null && propInfo.PropertyType == newValue.GetType()) propertyAccessProvider.SetValue(cellInfo.RowData, cellInfo.Column.MappingName, newValue); else if (propInfo != null) { var value = Convert.ChangeType(newValue, propInfo.PropertyType); propertyAccessProvider.SetValue(cellInfo.RowData, cellInfo.Column.MappingName, value); } }); } catch (Exception e) { Debug.WriteLine(e.Message); } } } } } } } View sample in GitHub. Conclusion I hope you enjoyed learning about how to change the cell value of selected cells in WinUI DataGrid (SfDataGrid). You can refer to our WinUI DataGrid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WinUI DataGrid documentation to understand how to present and manipulate data. For current customers, you can check out our WinUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WinUI DataGrid and other WinUI components. If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The BeginEdit and EndEdit events are not triggered when you check or uncheck the CheckBox control in TreeGridCheckBoxColumn in WinUI TreeGrid (SfTreeGrid). However, you can get the notification while changing the CheckBox state by using the CurrentCellValueChanged event. //Event subscription this.sfTreeGrid.CurrentCellValueChanged += OnCurrentCellValueChanged; //Event customization private void OnCurrentCellValueChanged(object sender, TreeGridCurrentCellValueChangedEventArgs e) { int columnindex = sfTreeGrid.ResolveToGridVisibleColumnIndex(e.RowColumnIndex.ColumnIndex); if (columnindex < 0) return; var column = sfTreeGrid.Columns[columnindex]; if (column is TreeGridCheckBoxColumn) { var recordIndex = sfTreeGrid.ResolveToNodeIndex(e.RowColumnIndex.RowIndex); if (recordIndex < 0) return; TreeNode node = null; if (this.sfTreeGrid.View != null) { //Get the TreeNode node = this.sfTreeGrid.View.Nodes[recordIndex]; if (node != null) { //Checkbox property changed value is stored here. var value = (node.Item as EmployeeInfo).Availability; } } } } Take a moment to peruse the WinUI TreeGrid - Column Types documentation, to learn more about column types with code examples. View sample in GitHub
The BeginEdit and EndEdit events are not triggered when you check or uncheck the CheckBox control in GridCheckBoxColumn in WinUI DataGrid (SfDataGrid). However, you can get the notification while changing the CheckBox state by using the CurrentCellValueChanged event. //Event subscription this.dataGrid.CurrentCellValueChanged += OnCurrentCellValueChanged; //Event customization public void OnCurrentCellValueChanged(object sender, CurrentCellValueChangedEventArgs args) { int columnindex = dataGrid.ResolveToGridVisibleColumnIndex(args.RowColumnIndex.ColumnIndex); if (columnindex < 0) return; var column = dataGrid.Columns[columnindex]; if (column is GridCheckBoxColumn) { var rowIndex = this.dataGrid.ResolveToRecordIndex(args.RowColumnIndex.RowIndex); if (rowIndex < 0) return; RecordEntry record = null; if (this.dataGrid.View != null) { if (this.dataGrid.View.TopLevelGroup != null) { //Get the record when grouping applied in SfDataGrid record = (this.dataGrid.View.TopLevelGroup.DisplayElements[rowIndex] as RecordEntry); } else { record = this.dataGrid.View.Records[rowIndex] as RecordEntry; } if (record != null) { //Checkbox property changed value is stored here. var value = (record.Data as OrderInfo).Review; } } } } Take a moment to peruse the WinUI DataGrid - Column Types documentation, to learn more about column types with code examples. View sample in GitHub Conclusion: Hope you enjoyed learning about how to use the editing related events in GridCheckBoxColumn of WinUI DataGrid (SfDataGrid) You can refer to our WinUI DataGrid’s feature tour page to learn about its other groundbreaking feature representations. You can explore our WinUI DataGrid documentation to understand how to present and manipulate data. For current customers, you can check out our WinUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WinUI DataGrid and other WinUI components. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
It is possible to set the edit type as dropdown for TreeGrid column. We can also customize the data inside drop down with or without checkbox. So that we can choose single or multiple options from the dropdown box. Please find the below code snippet to set dropdown edit type for the TreeGrid column. CSHTML @(Html.EJ().TreeGrid("TreeGridContainer") //… .Columns(co => { //… co.Field("Resource").HeaderText("Resource").EditType(TreeGridEditingType.Dropdown).DropDownData((IEnumerable<object>)ViewBag.resource).Add(); } ) ) C# public ActionResult Index() { var DataSource = TreeGridDefaultData.GetData(); ViewBag.datasource = DataSource; ResourceList resource = new ResourceList(); ViewBag.resource = resource.GetResources(); return View(); } public class Resource { public int id { get; set; } public string text { get; set; } public string value { get; set; } } public class ResourceList { public List<Resource> GetResources() { List<Resource> ResourceCollection = new List<Resource>(); ResourceCollection.Add(new Resource() { id = 1, text = "Project Manager", value = "Project Manager" }); ResourceCollection.Add(new Resource() { id = 2, text = "Software Analyst", value = "Software Analyst" }); //… } } A sample to define and enable the dropdown data in TreeGrid is available in the following link. SampleConclusion I hope you enjoyed learning about how to set dropdown edit type for the .NET MVC TreeGrid column.You can refer to our .NET MVC TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data. .NET MVC TreeGrid.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In certain cases, changing the dataSource of one dropdown on selecting a value from other dropdown is known as the cascading effect. This effect can be applied to two dropdown controls within Grid upon editing that is explained in detail in this document. Solution The following example explains in detail on how to achieve the cascading effect in Grid for two ForeignKey columns that refreshes the dataSource of one dropdown based on the value selected in another dropdown. Example Render the Grid control. HTML: <div id="Grid"></div> Javascript: <script> var data = @Html.Raw(Json.Encode(ViewBag.designation)) var data1 = @Html.Raw(Json.Encode(ViewBag.country)) $(function () { $("#Grid").ejGrid({ // the datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js' dataSource: window.gridData, allowPaging:true, editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true}, toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] }, actionComplete:"Complete", columns: [ { field: "OrderID", headerText: 'OrderID', isPrimaryKey: true, width: 75 }, { field: "EmployeeID", headerText: 'EmployeeID', width: 75 }, { field: "CustomerID", headerText: 'Designation', foreignKeyField: "CustomerID", foreignKeyValue: "Designation", dataSource: data, width: 75 }, { field: "ShipCity", headerText: 'Country', foreignKeyField: "ShipCity", foreignKeyValue: "country", dataSource: data1, width: 75 } ] }); }); </script> C# namespace EJGrid.Controllers { public class HomeController : Controller { public static List<Orders> order = new List<Orders>(); public static List<Customers> customer = new List<Customers>(); public static List<Country> city = new List<Country>(); public ActionResult Index() { BindDataSource(); ViewBag.datasource = order; ViewBag.designation = customer; ViewBag.country = city; return View(); } public ActionResult DataSource(string designation) { var userTemplates = city.Where(c => c.Designation == designation).Distinct().ToList(); var data = new List<object>(); foreach (var Cust in userTemplates) { data.Add(new { value = Cust.ShipCity, text = Cust.country }); } return Json(data, JsonRequestBehavior.AllowGet); } private void BindDataSource() { int code = 10000; for (int i = 1; i < 10; i++) { order.Add(new Orders(code + 1, "ALFKI", i + 2, 2.3 * i, "Berlin", "Germany")); order.Add(new Orders(code + 2, "ANATR", i + 0, 3.3 * i, "Madrid", "Spain")); order.Add(new Orders(code + 3, "ANTON", i + 4, 4.3 * i, "Cholchester", "UK")); order.Add(new Orders(code + 4, "BLONP", i + 1, 5.3 * i, "Marseille", "France")); order.Add(new Orders(code + 5, "BOLID", i + 3, 6.3 * i, "Tsawassen", "Canada")); code += 5; } customer.Add(new Customers("ALFKI", "Sales Rep")); customer.Add(new Customers("ANATR", "Admin")); customer.Add(new Customers("ANTON", "Manager")); customer.Add(new Customers("BLONP", "Representative")); customer.Add(new Customers("BOLID", "Assistant Manager")); city.Add(new Country("Berlin", "Sales Rep", "India")); city.Add(new Country("Madrid", "Admin", "USA")); city.Add(new Country("Cholchester", "Manager", "Russia")); city.Add(new Country("Marseille", "Representative", "Australia")); city.Add(new Country("Tsawassen", "Assistant Manager", "UK")); } } } MVC RAZOR: @(Html.EJ().Grid<object>("Grid") .Datasource(((IEnumerable<object>)ViewBag.datasource)) .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) .AllowPaging() .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Add); items.AddTool(ToolBarItems.Edit); items.AddTool(ToolBarItems.Delete); items.AddTool(ToolBarItems.Update); items.AddTool(ToolBarItems.Cancel); }); }) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(75).Add(); col.Field("EmployeeID").HeaderText("Employee ID").Width(75).Add(); col.Field("CustomerID").HeaderText("Designation").ForeignKeyField("CustomerID").ForeignKeyValue("Designation").DataSource(((IEnumerable<object>)ViewBag.designation)).Width(75).Add();//Dropdownlist based on which the Country column dropdown is refreshed col.Field("ShipCity").HeaderText("Country").ForeignKeyField("ShipCity").ForeignKeyValue("country").DataSource(((IEnumerable<object>)ViewBag.country)).Width(75).Add();//Refreshed upon change in Designation Column }) .ClientSideEvents(eve => eve.ActionComplete("Complete") )) C# namespace EJGrid.Controllers { public class HomeController : Controller { public static List<Orders> order = new List<Orders>(); public static List<Customers> customer = new List<Customers>(); public static List<Country> city = new List<Country>(); public ActionResult Index() { BindDataSource(); ViewBag.datasource = order; ViewBag.designation = customer; ViewBag.country = city; return View(); } public ActionResult DataSource(string designation) { var userTemplates = city.Where(c => c.Designation == designation).Distinct().ToList(); var data = new List<object>(); foreach (var Cust in userTemplates) { data.Add(new { value = Cust.ShipCity, text = Cust.country }); } return Json(data, JsonRequestBehavior.AllowGet); } private void BindDataSource() { int code = 10000; for (int i = 1; i < 10; i++) { order.Add(new Orders(code + 1, "ALFKI", i + 2, 2.3 * i, "Berlin", "Germany")); order.Add(new Orders(code + 2, "ANATR", i + 0, 3.3 * i, "Madrid", "Spain")); order.Add(new Orders(code + 3, "ANTON", i + 4, 4.3 * i, "Cholchester", "UK")); order.Add(new Orders(code + 4, "BLONP", i + 1, 5.3 * i, "Marseille", "France")); order.Add(new Orders(code + 5, "BOLID", i + 3, 6.3 * i, "Tsawassen", "Canada")); code += 5; } customer.Add(new Customers("ALFKI", "Sales Rep")); customer.Add(new Customers("ANATR", "Admin")); customer.Add(new Customers("ANTON", "Manager")); customer.Add(new Customers("BLONP", "Representative")); customer.Add(new Customers("BOLID", "Assistant Manager")); city.Add(new Country("Berlin", "Sales Rep", "India")); city.Add(new Country("Madrid", "Admin", "USA")); city.Add(new Country("Cholchester", "Manager", "Russia")); city.Add(new Country("Marseille", "Representative", "Australia")); city.Add(new Country("Tsawassen", "Assistant Manager", "UK")); } } } ASP.NET <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true"> <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></EditSettings> <ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> <ClientSideEvents ActionComplete="Complete" /> <Columns> <ej:Column Field="OrderID" HeaderText="OrderID" IsPrimaryKey="true" Width="75"/> <ej:Column Field="EmployeeID" HeaderText="EmployeeID" Width="75"/> <ej:Column Field="CustomerID" HeaderText="Designation" ForeignKeyField="CustomerID" ForeignKeyValue="Designation" Width="75"/> <ej:Column Field="ShipCity" HeaderText=”Country" ForeignKeyField="ShipCity" ForeignKeyValue="country" Width="75" /> </Columns> </ej:Grid> C# namespace WebApplication21 { public partial class _Default : Page { public static List<Orders> order = new List<Orders>(); public static List<Customers> customer = new List<Customers>(); public static List<Country> city = new List<Country>(); protected void Page_Load(object sender, EventArgs e) { BindDataSource(); } [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static object DataSource(string designation) { var userTemplates = city.Where(c => c.Designation == designation).Distinct().ToList(); var data = new List<object>(); foreach (var Cust in userTemplates) { data.Add(new { value = Cust.ShipCity, text = Cust.country }); } return data; } private void BindDataSource() { int code = 10000; for (int i = 1; i < 10; i++) { order.Add(new Orders(code + 1, "ALFKI", i + 2, 2.3 * i, "Berlin", "Germany")); order.Add(new Orders(code + 2, "ANATR", i + 0, 3.3 * i, "Madrid", "Spain")); order.Add(new Orders(code + 3, "ANTON", i + 4, 4.3 * i, "Cholchester", "UK")); order.Add(new Orders(code + 4, "BLONP", i + 1, 5.3 * i, "Marseille", "France")); order.Add(new Orders(code + 5, "BOLID", i + 3, 6.3 * i, "Tsawassen", "Canada")); code += 5; } this.FlatGrid.DataSource = order; this.FlatGrid.DataBind(); customer.Add(new Customers("ALFKI", "Sales Rep")); customer.Add(new Customers("ANATR", "Admin")); customer.Add(new Customers("ANTON", "Manager")); customer.Add(new Customers("BLONP", "Representative")); customer.Add(new Customers("BOLID", "Assistant Manager")); var index = this.FlatGrid.Columns.FindIndex(col => col.Field == "CustomerID"); this.FlatGrid.Columns.ElementAt(index).DataSource = customer; city.Add(new Country("Berlin", "Sales Rep","India")); city.Add(new Country("Madrid", "Admin","USA")); city.Add(new Country("Cholchester", "Manager","Russia")); city.Add(new Country("Marseille", "Representative","Australia")); city.Add(new Country("Tsawassen", "Sales Rep","UK")); var index1 = this.FlatGrid.Columns.FindIndex(col => col.Field == "ShipCity"); this.FlatGrid.Columns.ElementAt(index1).DataSource = city; } ASP.NET CORE HTML <ej-grid id="FlatGrid" datasource="ViewBag.datasource" action-complete="Complete"> <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"></e-edit-settings> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> <e-columns> <e-column field="OrderID" header-text="OrderID" width="75" is-primary-key="true"></e-column> <e-column field="EmployeeID" header-text="EmployeeID" width="75"></e-column> <e-column field="CustomerID" header-text="Designation" foreign-key-field="CustomerID" foreign-key-value="Designation" datasource="ViewBag.designation" width="75"></e-column> <e-column field="ShipCity" header-text="Country" foreign-key-field="ShipCity" foreign-key-value="country" datasource="ViewBag.country" width="75"></e-column> </e-columns> </ej-grid> C# namespace WebApplication1.Controllers { public class HomeController : Controller { public static List<Orders> order = new List<Orders>(); public static List<Customers> customer = new List<Customers>(); public static List<Country> city = new List<Country>(); public IActionResult Index() { BindDataSource(); ViewBag.datasource = order; ViewBag.designation = customer; ViewBag.country = city; return View(); } public ActionResult DataSource(string designation) { var userTemplates = city.Where(c => c.Designation == designation).Distinct().ToList(); var data = new List<object>(); foreach (var Cust in userTemplates) { data.Add(new { value = Cust.ShipCity, text = Cust.country }); } return Json(data); } private void BindDataSource() { int code = 10000; for (int i = 1; i < 10; i++) { order.Add(new Orders(code + 1, "ALFKI", i + 2, 2.3 * i, "Berlin", "Germany")); order.Add(new Orders(code + 2, "ANATR", i + 0, 3.3 * i, "Madrid", "Spain")); order.Add(new Orders(code + 3, "ANTON", i + 4, 4.3 * i, "Cholchester", "UK")); order.Add(new Orders(code + 4, "BLONP", i + 1, 5.3 * i, "Marseille", "France")); order.Add(new Orders(code + 5, "BOLID", i + 3, 6.3 * i, "Tsawassen", "Canada")); code += 5; } customer.Add(new Customers("ALFKI", "Sales Rep")); customer.Add(new Customers("ANATR", "Admin")); customer.Add(new Customers("ANTON", "Manager")); customer.Add(new Customers("BLONP", "Representative")); customer.Add(new Customers("BOLID", "Assistant Manager")); city.Add(new Country("Berlin", "Sales Rep", "India")); city.Add(new Country("Madrid", "Admin", "USA")); city.Add(new Country("Cholchester", "Manager", "Russia")); city.Add(new Country("Marseille", "Representative", "Australia")); city.Add(new Country("Tsawassen", "Assistant Manager", "UK")); } } } ANGULAR HTML <ej-grid id="Grid" #grid [dataSource]="datasource" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" (actionComplete)="Complete($event)" > <e-columns> <e-column field="OrderID" headerText="OrderID" isPrimaryKey="true" width="75"></e-column> <e-column field="EmployeeID" headerText="EmployeeID" width="75" ></e-column> <e-column field="CustomerID" headerText="Designation" width="75" foreignKeyField= "CustomerID" foreignKeyValue= "Designation" [dataSource]= "data"></e-column> <e-column field="ShipCity" headerText="Country" width="75" foreignKeyField= "ShipCity" foreignKeyValue= "country" [dataSource]= "data1"></e-column> </e-columns> </ej-grid> TS import {Component, ViewEncapsulation,ViewChild} from '@angular/core'; import {CommonModule} from "@angular/common"; import { EJComponents } from "ej-angular2/src/ej/core"; @Component({ selector: 'ej-app', templateUrl: 'src/grid/grid.component.html', }) export class GridComponent { public datasource; public editSettings; public toolbarItems; public data; public data1; @ViewChild('grid') grid: EJComponents<any, any>; constructor() { //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js' this.datasource = [ {OrderID:10001,EmployeeID:1,CustomerID:"ALFKI",ShipCity:"Berlin"}, {OrderID:10001,EmployeeID:1,CustomerID:"ALFKI",ShipCity:"Berlin"}, {OrderID:10002,EmployeeID:2,CustomerID:"ANATR",ShipCity:"Madrid"}, {OrderID:10003,EmployeeID:3,CustomerID:"BOLID",ShipCity:"Cholchester"}, {OrderID:10004,EmployeeID:4,CustomerID:"ANATR",ShipCity:"Tsawassen"}, {OrderID:10005,EmployeeID:5,CustomerID:"ANTON",ShipCity:"Berlin"}, {OrderID:10006,EmployeeID:6,CustomerID:"ALFKI",ShipCity:"Cholchester"}, {OrderID:10007,EmployeeID:7,CustomerID:"BLONP",ShipCity:"Marseille"}, {OrderID:10008,EmployeeID:8,CustomerID:"BOLID",ShipCity:"Tsawassen"} ]; this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true}; this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]}; this.data = [ {CustomerID:"ALFKI",Designation:"Sales Rep"}, {CustomerID:"ANATR",Designation:"Admin"}, {CustomerID:"ANTON",Designation:"Manager"}, {CustomerID:"BLONP",Designation:"Representative"}, {CustomerID:"BOLID",Designation:"Assistant Manager"}]; this.data1 = [ {ShipCity:"Berlin",Designation:"Sales Rep",country:"India"}, {ShipCity:"Madrid",Designation:"Admin",country:"USA"}, {ShipCity:"Cholchester",Designation:"Manager",country:"Russia"}, {ShipCity:"Marseille",Designation:"Representative",country:"Australia"}, {ShipCity:"Tsawassen",Designation:"Assistant Manager",country:"UK"} ]; } Complete(args: any) { if (args.requestType == "beginedit" || args.requestType == "add") { $("#GridCustomerID").ejDropDownList({ change: function(e){ $.ajax({ url: 'http://localhost:49449/Home/Datasource', type: 'GET', data: { "designation": e.text },//pass the selectedValue of the dropdown to server side success: function (data1) { $("#GridShipCity").ejDropDownList({ dataSource: data1 });//assign the filtered dataSource obtained from serverSide $("#GridShipCity").ejDropDownList({ selectedIndex: 0 }); } }) } });//bind the change event to dropdown if (args.requestType == "beginedit") { var titleObj = $("#GridCustomerID").data("ejDropDownList");//get the edited dropdown object titleObj.selectItemByValue(args.rowData.CustomerID); $.ajax({ url: 'http://localhost:49449/Home/Datasource', type: 'GET', data: { "designation": titleObj.getSelectedValue() },//passed the selectedValue of the dropdown to server side success: function (data1) { $("#GridShipCity").ejDropDownList({ dataSource: data1, selectedItemIndex: 0 });//assign the filtered dataSource obtained from serverSide } }) } } } } 2. In the ActionComplete events of the Grid, the ValChange function is bound to the Change event of the ejDropDownList. The selected value of the Designation dropdown is passed to the server side on the Ajax call, getting the filtered data from the server side and assigning it to the Country dropdown’s dataSource. <script type="text/javascript"> function Complete(args) { if (args.requestType == "beginedit" || args.requestType == "add") { $("#GridCustomerID").ejDropDownList({ change: "ValChange" });//bind the change event to dropdown if (args.requestType == "beginedit") { var titleObj = $("#GridCustomerID").data("ejDropDownList");//get the edited dropdown object $.ajax({ url: 'Home/DataSource', type: 'GET', data: { "designation": titleObj.selectedTextValue},//passed the selectedValue of the dropdown to server side success: function (data1) { $("#GridShipCity").ejDropDownList({ dataSource: data1 ,selectedItemIndex:0 });//assign the filtered dataSource obtained from serverSide } }) } } } </script> In the change event of the Designation dropdown, the selected value of the Designation dropdown is passed to the server side on the Ajax call, getting the filtered data from the server side and assigning it to the Country dropdown’s dataSource. //change event of the Designation dropdown. function ValChange(e) { $.ajax({ url: 'Home/DataSource', type: 'GET', data: { "designation": e.text },//pass the selectedValue of the dropdown to server side success: function (data1) { $("#GridShipCity").ejDropDownList({ dataSource: data1, selectedItemIndex: 0 });//assign the filtered dataSource obtained from serverSide } }) } Result: Figure SEQ Figure \* ARABIC 1Initial rendering of grid Figure SEQ Figure \* ARABIC 2On editing a record Figure SEQ Figure \* ARABIC 3On changing the value of designation columnConclusionI hope you enjoyed learning about how to render cascading dropdown while editing in ASP.NET MVC DataGridYou can refer to our ASP.NET MVC DataGrid feature tourpage to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC DataGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can disable the Cell Edit Template column by disabling the custom editor component based on your conditions. This is explained in the following code example in which, the “OrderDate” column editing feature is disabled by setting the “enabled” property of the “TimePicker” component based on some conditions to determine whether it is the user or admin. Razor <ejs-grid id="Grid" dataSource="@ViewBag.data" allowPaging="true" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings> <e-grid-columns> <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> <e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right" width="120"></e-grid-column> <e-grid-column field="OrderDate" allowEditing="false" headerText="Order Date" customFormat="@(new { type ="date", format="hh:mm a" })" edit="@(new {create = "onCreate", read = "onRead", write = "onWrite", destroy= "onDestroy"})" width="130"></e-grid-column> <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column> </e-grid-columns> </ejs-grid> JS var isUser = true; function onCreate(args) { element = document.createElement('input'); return element; } function onRead(e) { return picker.value; } function onDestroy() { picker.destroy(); } function onWrite(args) { picker = new ej.calendars.TimePicker({ // Rendering TimePicker component value: args.rowData[args.column.field], format: 'hh:mm a', enabled: !isUser; // Disables the editing when “isUser” is true }); picker.appendTo(element); } Output Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2GridSample1339747363
By default, AngularJS data grid renders textbox component for all editable columns. Also, it offers the following in-built editor components to edit a column value based on the corresponding column data type. In this article, we are going to render a dropdownlist component while editing a Ship Country column (string column) for this we need to set columns.editType property as 'dropdownedit' for the corresponding column. NumericTextBox Component for integers, double and decimal data types. TextBox Component for string data type. DropdownList Component to show all unique values related to that field. CheckBox Component for Boolean data type. DatePicker Component for date data type. DateTimePicker Component for date time data type. This article explains how to render dropdownlist component for string column instead of default textbox in grid edit mode. HTML <ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar'> <e-columns> <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> <e-column field='CustomerName' headerText='Customer Name' width='120' [validationRules]='customeridrules'></e-column> <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column> <e-column field='OrderDate' headerText='Order Date' width='130' editType='datepickeredit' format='yMd' textAlign='Right'></e-column> <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column> <e-column field='ShipAddress' headerText='Ship Address' width='200'></e-column> </e-columns> </ejs-grid> Component.ts import { Component, OnInit } from '@angular/core'; import { orderDetails } from './data'; import { EditService, ToolbarService} from '@syncfusion/ej2-angular-grids'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', providers: [ToolbarService, EditService] }) export class AppComponent { public data: Object[]; public editSettings: Object; public toolbar: string[]; public orderidrules: Object; public customeridrules: Object; public freightrules: Object; public pageSettings: Object; public editparams: Object; public ngOnInit(): void { this.data = orderDetails; this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode:"Normal"}; this.toolbar = ['Add', 'Edit', 'Delete']; this.orderidrules = { required: true, number: true }; this.customeridrules = { required: true }; this.freightrules = { required: true }; this.editparams = { params: { popupHeight: '150px' }}; } } Console Output Sample : https://stackblitz.com/edit/syncfusion-angular-editable-grid?file=main.ts
The Essential JS 2 Angular 4 Data Grid supports the following edit modes to perform CRUD ( Create, Read, Update and Delete) actions through an interactive UI with simple configuration. Inline Dialog Batch Inline/Dialog Template In this knowledge base, we are going to explain about, how to enable inline editing in Syncfusion Angular 4 Data Grid. Grid Editing feature requires EditService and ToolbarService for performing edit actions so we need to define this services in app.module.ts file. import { EditService,ToolbarService } from '@syncfusion/ej2-angular-grids'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, GridModule ], providers: [EditService, ToolbarService], bootstrap: [AppComponent] }) export class AppModule { } To perform editing in Angular 4 data grid its requires to set a isPrimaryKey property of column as true for the unique column in the data source since the CRUD actions performed based on this unique column. <ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='315px'> <e-columns> <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' width=100></e-column> <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> <e-column field='Freight' headerText='Freight' textAlign='Right' width=120 format='C2'></e-column> <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column> </e-columns> </ejs-grid> To perform CRUD actions using Inline edit mode, it requires to set mode property of editSettings as “Normal” and also need to set allowAdding, allowEditing and allowDeleting property of editSettings as “true” . Define the toolbar items in the toolbar property of data grid. <ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='315px'> <e-columns> <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' width=100></e-column> <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> <e-column field='Freight' headerText='Freight' textAlign='Right' width=120 format='C2'></e-column> <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column> </e-columns> </ejs-grid> import { Component, OnInit } from '@angular/core'; import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { public data: Object[]; public editSettings: EditSettingsModel; public toolbar: ToolbarItems[]; ngOnInit() { this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode:"Normal" }; this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; } } Summary In this GitHub repository, the application prepared from the above steps has been committed, and it is readily runnable. If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
WinUI TreeView (SfTreeView) provides support for editing and it can be enabled or disabled by using SfTreeView.AllowEditing property. Editing can be triggered for the nodes in TreeView by pressing F2 key only. The changes made by editing a node will be committed only when user move selection to next node or by pressing Enter key. It is necessary to define EditTemplate / EditTemplateSelector for bound mode, to enable editing. For UnboundMode, textbox will be loaded in edit mode by default. <treeView:SfTreeView x:Name="treeView" Width="400" Height="500" AllowEditing="True" AutoExpandMode="AllNodes" ChildPropertyName="Childs" BorderBrush="LightGray" IsAnimationEnabled="True" BorderThickness="1" FullRowSelect="True" ItemsSource="{Binding Nodes1}"> <treeView:SfTreeView.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <ContentPresenter Width="20" Height="20" HorizontalAlignment="Stretch" VerticalAlignment="Center" ContentTemplate="{Binding ImageTemplate}" /> <TextBlock Margin="5" VerticalAlignment="Center" Text="{Binding Header}" /> </StackPanel> </DataTemplate> </treeView:SfTreeView.ItemTemplate> <treeView:SfTreeView.EditTemplate> <DataTemplate> <TextBox VerticalAlignment="Center" Height="{Binding Path=ItemHeight,ElementName=treeView}" BorderThickness="1" Text="{Binding Header,Mode=TwoWay}"/> </DataTemplate> </treeView:SfTreeView.EditTemplate> </treeView:SfTreeView> Programmatic Editing Begin the editing Editing in TreeView can be triggered programmatically by calling the BeginEdit method. this.treeView.Loaded += OnLoaded; private void OnLoaded(object sender, RoutedEventArgs e) { this.treeView.BeginEdit(this.treeView.Nodes[0]); } Note:CurrentItem is set to the node when the BeginEdit is called. End the editing EndEdit method is used to programmatically end the editing for specific node. this.treeView.Loaded += OnLoaded; private void OnLoaded(object sender, RoutedEventArgs e) { this.treeView.EndEdit(this.treeView.Nodes[0]); } Cancel editing for specific node Editing for a specific node in TreeView can be cancelled by handling the ItemBeginEdit event. treeView.ItemBeginEdit += OnItemBeginEdit; private void OnItemBeginEdit(object sender, Syncfusion.UI.Xaml.TreeView.TreeViewItemBeginEditEventArgs e) { if ((e.Node.Content as Folder).FileName == "Documents") e.Cancel = true; } Revert the edited changes while pressing Escape key WinUI TreeView does not have support to rollback the changes when pressing the ESC key while editing the TreeView node. But it supports to rollback the changes when underlying data object implements the IEditableObject interface. The user can take a backup of existing data of a node in the BeginEdit method and can change the existing data to the current data in the CancelEdit method to roll back the changes. The below code snippet explains the simple implementation of IEditableObject interface to rollback the changes. public class EditingModel : INotifyPropertyChanged, IEditableObject { #region Fields private string name; internal EditingModel backUpData; private EditingModel currentData; private string header = string.Empty; private bool isexpanded = true; private DataTemplate imageTemplate; private ObservableCollection<EditingModel> childs = null; #endregion #region Constructor public EditingModel() { } public EditingModel(string name):base() { Childs = new ObservableCollection<EditingModel>(); this.currentData = new EditingModel(); this.currentData.name = name; } #endregion #region Properties public string Header { get { return currentData.name; } set { currentData.name = value; this.RaisePropertyChanged("Header"); } } public bool IsExpanded { get { return isexpanded; } set { isexpanded = value; this.RaisePropertyChanged("IsExpanded"); } } public DataTemplate ImageTemplate { get { return imageTemplate; } set { imageTemplate = value; } } public ObservableCollection<EditingModel> Childs { get { return childs; } set { childs = value; this.RaisePropertyChanged("Childs"); } } #endregion #region INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; public void RaisePropertyChanged(string _PropertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName)); } } #endregion #region IEditableObject public void BeginEdit() { backUpData = new EditingModel(); backUpData.name = this.currentData.name; } public void EndEdit() { } public void CancelEdit() { this.currentData = backUpData; } #endregion } Take a moment to peruse the WinUI TreeView - Editing documentation, where you can find about editing with code examples. View sample in GitHub
By default, the TextBox control will be used as a default editor control for the string column in ASP.NET MVC Grid. You can customize the editor control using Multiline Textbox by rendering it as a custom component in the Grid edit form. You can use the cellEditTemplate feature of Grid to render the Multiline TextBox component in the Grid edit form. The cell edit template is used to add a custom component for a particular column by invoking the create, write, read, and destroy functions. Using the valueAccessor feature of Grid, you can split the value into multiple lines in the Grid column. Note:When editing a particular cell in the Grid, you can prevent the ENTER key’s functionality using the created event in the Grid. @{ var valueAccessor = "valueAccessorFn"; } @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Created("created").Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(30).Add(); col.Field("Freight").HeaderText("Freight").Width(120).Add(); col.Field("ShipCity").HeaderText("Ship City").Width(150).DisableHtmlEncode(false).ValueAccessor(valueAccessor).Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Add(); }).EditSettings(edit => edit.AllowEditing(true)).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).Render() <script> var textEditor; var elemContent; function create(args) { elemContent = document.createElement('textarea'); return elemContent; } function write(args) { textEditor = new ej.inputs.TextBox({ multiline: true, value: args.rowData[args.column.field], floatLabelType: 'Auto' }); textEditor.appendTo(elemContent); } function destroy() { textEditor.destroy(); } function read(args) { return textEditor.value; } function created(args) { document.getElementById('Grid').ej2_instances[0].keyConfigs.enter = ''; } function valueAccessorFn(field, data, column) { var value = data[field]; if (value !== undefined) { return value.split("\n").join("<br>"); } else { return ""; } } </script> Output You can find the sample here: ASP MVC Grid Sample Documentation https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/edithttps://ej2.syncfusion.com/aspnetmvc/documentation/textbox/multiline Conclusion I hope you enjoyed learning about Cell editing using Multiline Textbox Control in ASP.NET MVC Grid.You can refer to our ASP.NET MVC Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Grid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
By default, the TextBox control will be used as a default editor control for the string column in ASP Core Grid. You can customize the editor control using Multiline Textbox by rendering it as a custom component in the Grid edit form. You can use the cellEditTemplate feature of Grid to render the Multiline TextBox component in the Grid edit form. The cell edit template is used to add a custom component for a particular column by invoking the create, write, read, and destroy functions. Using the valueAccessor feature of Grid, you can split the value into multiple lines in the Grid column. Note:When editing a particular cell in the Grid, you can prevent the ENTER key’s functionality using the created event in the Grid. @{ var valueAccessor = "valueAccessorFn"; } <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" created="created"> <e-grid-editsettings allowEditing="true" allowAdding="true" allowDeleting="true"></e-grid-editsettings> <e-grid-columns> <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="100" textAlign="Right"></e-grid-column> <e-grid-column field="Freight" format='C2' headerText="Freight" width="120"></e-grid-column> <e-grid-column field="ShipCity" headerText="Ship City" width="150" disableHtmlEncode="false" valueAccessor="valueAccessor" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" ></e-grid-column> </e-grid-columns> </ejs-grid> <script> var textEditor; var elemContent; function create(args) { elemContent = document.createElement('textarea'); return elemContent; } function write(args) { textEditor = new ej.inputs.TextBox({ multiline: true, value: args.rowData[args.column.field], floatLabelType: 'Auto' }); textEditor.appendTo(elemContent); } function destroy() { textEditor.destroy(); } function read(args) { return textEditor.value; } function created(args) { document.getElementById('Grid').ej2_instances[0].keyConfigs.enter = ''; } function valueAccessorFn(field, data, column){ var value = data[field]; if (value !== undefined) { return value.split("\n").join("<br>"); } else { return ""; } } </script> Output You can find the sample here: ASP Core Grid Sample Documentation https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template https://ej2.syncfusion.com/aspnetcore/documentation/textbox/multiline/
By default, the TextBox control will be used as a default editor control for the string column in React Grid. You can customize the editor control using Multiline Textbox by rendering it as a custom component in the Grid edit form. You can use the cellEditTemplate feature of Grid to render the Multiline TextBox component in the Grid edit form. The cell edit template is used to add a custom component for a particular column by invoking the create, write, read, and destroy functions. dpParams = { create: () => { this.elemContent = document.createElement('textarea'); return this.elemContent; }, destroy: () => { this.textEditor.destroy(); }, read: () => { return this.textEditor.value; }, write: (args) => { this.textEditor = new TextBox({ multiline: true, value: args.rowData[args.column.field], floatLabelType: 'Auto' }); this.textEditor.appendTo(this.elemContent); } }; Using the valueAccessor feature of Grid, you can split the value into multiple lines in the Grid column. Note:When editing a particular cell in the Grid, you can prevent the ENTER key’s functionality using the created event in the Grid. valueAccessor(field, data, column) { var value = data[field]; if (value != undefined) { return value.split('\n').join('<br>'); } else { return ''; } } created = () => { this.grid.keyConfigs.enter = ''; }; Output You can find the sample here: React Sample Documentation https://ej2.syncfusion.com/react/documentation/grid/editing/template-editinghttps://ej2.syncfusion.com/react/documentation/textbox/multiline ConclusionI hope you enjoyed learning about how to cell edit template using Multiline Textbox in React Grid.You can refer to our React Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Grid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
WPF DataGrid (SfDataGrid) does not provide the direct support to update the data values while editing. You can update the values while editing by overriding OnInitializeEditElement method and customize the TextBox.TextChanged event in GridCellTextBoxRenderer in WPF DataGrid (SfDataGrid). this.dataGrid.CellRenderers.Remove("TextBox"); this.dataGrid.CellRenderers.Add("TextBox", new GridCellTextBoxRendererExt(dataGrid)); public class GridCellTextBoxRendererExt : GridCellTextBoxRenderer { RowColumnIndex RowColumnIndex; SfDataGrid DataGrid { get; set; } string newvalue = null; public GridCellTextBoxRendererExt(SfDataGrid dataGrid) { DataGrid = dataGrid; } public override void OnInitializeEditElement(DataColumnBase dataColumn, TextBox uiElement, object dataContext) { base.OnInitializeEditElement(dataColumn, uiElement, dataContext); uiElement.TextChanged += UiElement_TextChanged; this.RowColumnIndex.ColumnIndex = dataColumn.ColumnIndex; this.RowColumnIndex.RowIndex = dataColumn.RowIndex; } private void UiElement_TextChanged(object sender, TextChangedEventArgs e) { var textbox = (e.OriginalSource as TextBox); if (textbox.IsFocused) { newvalue = (e.OriginalSource as TextBox).Text; UpdateValues(this.RowColumnIndex.RowIndex, this.RowColumnIndex.ColumnIndex); } } private void UpdateValues(int rowIndex, int columnIndex) { string editEelementText = newvalue; columnIndex = this.DataGrid.ResolveToGridVisibleColumnIndex(columnIndex); if (columnIndex < 0) return; var mappingName = DataGrid.Columns[columnIndex].MappingName; var recordIndex = this.DataGrid.ResolveToRecordIndex(rowIndex); if (recordIndex < 0) return; if (DataGrid.View.TopLevelGroup != null) { var record = DataGrid.View.TopLevelGroup.DisplayElements[recordIndex]; if (!record.IsRecords) return; var data = (record as RecordEntry).Data; data.GetType().GetProperty(mappingName).SetValue(data, editEelementText); } else { var record1 = DataGrid.View.Records.GetItemAt(recordIndex); record1.GetType().GetProperty(mappingName).SetValue(record1, editEelementText); } } } WPF DataGrid (SfDataGrid) provides support for various built-in column types. Each column has its own properties and renderer for more details please refer the below documentation link. Documentation Link: https://help.syncfusion.com/wpf/datagrid/column-types Take a moment to peruse the WPF DataGrid - Editing documentation, where you can find about editing with code examples. You can download the example from GitHub.ConclusionI hope you enjoyed learning about how to update the data values in WPF DataGrid .You can refer to our WPF DataGrid feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF DataGrid documentation to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This knowledge base explains, how to disable editing in a particular column in the JavaScript Spreadsheet You can use the cellEdit event to prevent editing in a particular column. You need to define the “cancel” argument as “false” in the “cellEdit” event to prevent editing. In the below code we have disabled editing for the “E” column. JavaScript Solution [HTML] <div id="spreadsheet"></div> [TS] //Initialize Spreadsheet component let spreadsheet: Spreadsheet = new Spreadsheet({ sheets: [ { name: 'Car Sales Report', ranges: [{ dataSource: (dataSource as any).defaultData }], // you can refer this datasource in this link https://ej2.syncfusion.com/javascript/demos/spreadsheet/default/datasource.js rows: [ { index: 30, cells: [ { index: 4, value: 'Total Amount:', style: { fontWeight: 'bold', textAlign: 'right' } }, { formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } }, ] }], columns: [ { width: 180 }, { width: 130 }, { width: 130 }, { width: 180 }, { width: 130 }, { width: 120 } ] }] , created: (): void => { spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1'); spreadsheet.numberFormat('$#,##0.00', 'F2:F31'); }, // Triggers before going to the editing mode. cellEdit: (args: CellEditEventArgs): void => { // Preventing the editing in E column. if (args.address.includes('E')) { args.cancel = true; } } }); //Render initialized Spreadsheet component spreadsheet.appendTo('#spreadsheet'); Sample: https://stackblitz.com/edit/48ojqc-utnmnn?file=index.ts
WinForms DataGrid (SfDataGrid) enters into editing in GridNumericColumn places the cursor at the last of the edit element. You can places the cursor based on the entered number in a cell by overriding the OnInitializeEditElement method in GridNumericCellRenderer. this.sfDataGrid.CellRenderers.Remove("Numeric"); this.sfDataGrid.CellRenderers.Add("Numeric", new GridNumericCellRendererExt(sfDataGrid)); public class GridNumericCellRendererExt : GridNumericCellRenderer { private SfDataGrid dataGrid; public GridNumericCellRendererExt(SfDataGrid dataGrid) : base() { this.dataGrid = dataGrid; } protected override void OnInitializeEditElement(DataColumnBase column, RowColumnIndex rowColumnIndex, SfNumericTextBox uiElement) { base.OnInitializeEditElement(column, rowColumnIndex, uiElement); // Below code is used to set caret position based on mouse position switch (dataGrid.EditorSelectionBehavior) { case EditorSelectionBehavior.Default: uiElement.SelectionStart = 1; uiElement.SelectionLength = 0; break; case EditorSelectionBehavior.SelectAll: uiElement.SelectAll(); break; case EditorSelectionBehavior.MoveLast: uiElement.SelectionStart = uiElement.Text.Length; uiElement.SelectionLength = 0; break; } } } Take a moment to peruse the WinForms DataGrid - Editing documentation, where you can find about editing with code examples. You can download the example from GitHub.ConclusionI hope you enjoyed learning about how to place the cursor while editing in GridNumericColumn in WinForms DataGrid.You can refer to our WinForms DataGrid feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our WinForms DataGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
WPF DataGrid (SfDataGrid) when you press the PageUp or PageDown key will be scrolled to the previous set of rows or the next set of rows that are not displayed in the view. To change this behavior like Tab key navigation that moves the currentcell to next cell of the same row by overriding GridCellSelectionController / GridSelectionController class and setting it to SfDataGrid.SelectionController property. When SelectionUnit is a Cell, you have to override GridCellSelectionController and when SelectionUnit is Row, you have to override GridSelectionController class.WPF DataGrid (SfDataGrid) is defined with SelectionUnit as Cell. You can change the PageUp and PageDown key behavior by overriding the ProcessKeyDown method in GridCellSelectionController in WPF DataGrid (SfDataGrid). <syncfusion:SfDataGrid x:Name="sfDataGrid" SelectionMode="Single" SelectionUnit="Cell" ItemsSource="{Binding Orders}" AutoGenerateColumns="False"/> // set the customized GridCellSelectionControllserExt to SfDataGrid.SelectionController when CellSelection applied in SfDataGrid this.sfDataGrid.SelectionController = new GridCellSelectionControllerExt(sfDataGrid); //Inherits the GridCellSelectionController Class public class GridCellSelectionControllerExt : GridCellSelectionController { public GridCellSelectionControllerExt(SfDataGrid datagrid) : base(datagrid) { } //overriding the ProcessKeyDown Event from GridCellSelectionController base class protected override void ProcessKeyDown(KeyEventArgs args) { if (args.Key == Key.PageUp || args.Key == Key.PageDown) { //Key based Customization KeyEventArgs arguments = new KeyEventArgs(args.KeyboardDevice, args.InputSource, args.Timestamp, Key.Tab) { RoutedEvent = args.RoutedEvent }; base.ProcessKeyDown(arguments); //assigning the state of Tab key Event handling to PageUp and PageDown key args.Handled = arguments.Handled; return; } base.ProcessKeyDown(args); } } WPF DataGrid (SfDataGrid) is defined with SelectionUnit as Row. You can change the PageUp and PageDown key behavior by overriding the ProcessKeyDown method in GridSelectionController in WPF DataGrid (SfDataGrid). <syncfusion:SfDataGrid x:Name="sfDataGrid" SelectionMode="Single" SelectionUnit="Row" ItemsSource="{Binding Orders}" AutoGenerateColumns="False"> // set the customized GridSelectionControllserExt to SfDataGrid.SelectionController when RowSelection applied in SfDataGrid this.sfDataGrid.SelectionController = new GridSelectionControllerExt(sfDataGrid); //Inherits the GridSelectionController Class public class GridSelectionControllerExt : GridSelectionController { public GridSelectionControllerExt(SfDataGrid datagrid) : base(datagrid) { } //overriding the ProcessKeyDown Event from GridSelectionController base class protected override void ProcessKeyDown(KeyEventArgs args) { if (args.Key == Key.PageUp || args.Key == Key.PageDown) { //Key based Customization KeyEventArgs arguments = new KeyEventArgs(args.KeyboardDevice, args.InputSource, args.Timestamp, Key.Tab) { RoutedEvent = args.RoutedEvent }; base.ProcessKeyDown(arguments); //assigning the state of Tab key Event handling to PageUp and PageDown key args.Handled = arguments.Handled; return; } base.ProcessKeyDown(args); } } Take a moment to peruse the WPF DataGrid – Selection documentation, where you can find about selection with code examples. You can download the example from GitHub.ConclusionI hope you enjoyed learning how to change the PageUp and PageDown key bahavior in WPF DataGrid.You can refer to our WPF DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF DataGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
WPF DataGrid (SfDataGrid) cell enters into edit mode, cursor is placed based on EditorSelectionBehavior property. You can set the cursor position based on mouse clicked position while editing by overriding the OnEditElementLoaded method in GridCellTextBoxRenderer. //customize the TextBoxCellRenderer this.sfDataGrid.CellRenderers.Remove("TextBox"); this.sfDataGrid.CellRenderers.Add("TextBox", new GridCellTextBoxRendererExt()); public class GridCellTextBoxRendererExt : GridCellTextBoxRenderer { protected override void OnEditElementLoaded(object sender, RoutedEventArgs e) { base.OnEditElementLoaded(sender, e); var uiElement = sender as TextBox; //set the CaretIndex based on clicked text position uiElement.CaretIndex = uiElement.GetCharacterIndexFromPoint(Mouse.GetPosition(uiElement), true); } } WPF DataGrid (SfDataGrid) provides support for various built-in column types. Each column has its own properties and renderer for more details please refer the below documentation link. Documentation Link: https://help.syncfusion.com/wpf/datagrid/column-types Take a moment to peruse the WPF DataGrid - Editing documentation, where you can find about editing with code examples. You can download the example from GitHub.
In SfDataGrid you can make a specific column accept unique value per row using SfDataGrid.CurrentCellValidating event. sfDataGrid1.CurrentCellValidating += SfDataGrid1_CurrentCellValidating;private void SfDataGrid1_CurrentCellValidating(object sender, Syncfusion.WinForms.DataGrid.Events.CurrentCellValidatingEventArgs e) { if (e.Column.MappingName == "OrderID") { for (int i = 0; i < sfDataGrid1.View.Records.Count; i++) { if ((this.sfDataGrid1.View.Records[i].Data as OrderInfo).OrderID.ToString().Equals((e.NewValue.ToString()))&&(e.NewValue.ToString() != e.OldValue.ToString())) { e.IsValid = false; e.ErrorMessage = "Invalid Value"; break; } } } } View Sample in GitHub.
You can make a specific column accept unique value per row using SfDataGrid.CurrentCellValidating event in WPF DataGrid (SfDataGrid). <syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Orders}" AutoGenerateColumns="False" AllowEditing="True" CurrentCellValidating="dataGrid_CurrentCellValidating" > <syncfusion:SfDataGrid.Columns> <syncfusion:GridTextColumn MappingName="OrderID" HeaderText="Order ID" /> <syncfusion:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID" /> <syncfusion:GridTextColumn MappingName="Country"/> <syncfusion:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name" /> <syncfusion:GridTextColumn MappingName="ShipCity" HeaderText="Ship City" /> </syncfusion:SfDataGrid.Columns> </syncfusion:SfDataGrid> private void dataGrid_CurrentCellValidating(object sender, Syncfusion.UI.Xaml.Grid.CurrentCellValidatingEventArgs e) { if (e.Column.MappingName == "OrderID") { for (int i = 0; i < dataGrid.View.Records.Count; i++) { if ((this.dataGrid.View.Records[i].Data as OrderInfo).OrderID.ToString().Equals((e.NewValue.ToString())) && (e.NewValue.ToString() != e.OldValue.ToString())) { e.IsValid = false; e.ErrorMessage = "Invalid Value"; break; } } } } View WPF DataGrid Unique Value Demo in GitHub.ConclusionI hope you enjoyed learning how column accept unique value per row using WPF DataGrid.You can refer to our WPF Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Grid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In SfDataGrid, you can update the summary values when you are changing the values by overriding OnInitializeEditElement method and SfNumericTextBox.ValueChanged event in GridNumericCelllRenderer. dataGrid.AllowEditing = true; dataGrid.LiveDataUpdateMode = LiveDataUpdateMode.AllowSummaryUpdate; this.dataGrid.CellRenderers.Remove("Numeric"); this.dataGrid.CellRenderers.Add("Numeric", new CustomizedGridCellNumericRenderer(dataGrid));internal class CustomizedGridCellNumericRenderer : GridCellNumericRenderer { RowColumnIndex RowColumnIndex; SfDataGrid DataGrid { get; set; } string newvalue = null; public CustomizedGridCellNumericRenderer(SfDataGrid dataGrid) { DataGrid = dataGrid; } public override void OnInitializeEditElement(DataColumnBase dataColumn, SfNumericTextBox uiElement, object dataContext) { base.OnInitializeEditElement(dataColumn, uiElement, dataContext); uiElement.ValueChanged += UiElement_ValueChanged; this.RowColumnIndex.ColumnIndex = dataColumn.ColumnIndex; this.RowColumnIndex.RowIndex = dataColumn.RowIndex; } private void UiElement_ValueChanged(object sender, ValueChangedEventArgs e) { newvalue = e.NewValue.ToString(); UpdateSummaryValues(this.RowColumnIndex.RowIndex, this.RowColumnIndex.ColumnIndex); } private void UpdateSummaryValues(int rowIndex, int columnIndex) { string editEelementText = newvalue == "0" ? "0" : newvalue; columnIndex = this.DataGrid.ResolveToGridVisibleColumnIndex(columnIndex); if (columnIndex < 0) return; var mappingName = DataGrid.Columns[columnIndex].MappingName; var recordIndex = this.DataGrid.ResolveToRecordIndex(rowIndex); if (recordIndex < 0) return; if (DataGrid.View.TopLevelGroup != null) { var record = DataGrid.View.TopLevelGroup.DisplayElements[recordIndex]; if (!record.IsRecords) return; var data = (record as RecordEntry).Data; data.GetType().GetProperty(mappingName).SetValue(data, (int.Parse(editEelementText))); } else { var record1 = DataGrid.View.Records.GetItemAt(recordIndex); record1.GetType().GetProperty(mappingName).SetValue(record1, (int.Parse(editEelementText))); } } } View sample in GitHub.
You can prevent editing of some columns in WPF DataGrid (SfDataGrid). You can get the same behavior in exported excel file by protecting the worksheet and set the Locked property to false if you want to edit the columns. private static void OnExecuteExportToExcel(object sender, ExecutedRoutedEventArgs args) { var dataGrid = args.Source as SfDataGrid; if (dataGrid == null) return; try { GetDataGridStyles(dataGrid); // Creating an instance for ExcelExportingOptions which is passed as a parameter to the ExportToExcel method. ExcelExportingOptions options = new ExcelExportingOptions(); options.AllowOutlining = true; options.ExportingEventHandler = ExportingHandler; // Exports Datagrid to Excel and returns ExcelEngine. var excelEngine = dataGrid.ExportToExcel(dataGrid.View, options); // Gets the exported workbook from the ExcelEngine var workBook = excelEngine.Excel.Workbooks[0]; var workSheet = workBook.Worksheets[0]; var gridColumns = dataGrid.Columns.Where(col => col.AllowEditing).ToList(); foreach(var column in workSheet.Columns) { if(gridColumns.Any(gridCol => gridCol.HeaderText == column.DisplayText)) workSheet.Range[column.AddressLocal].CellStyle.Locked = false; } workSheet.Protect("syncfusion"); // Saving the workbook. SaveFileDialog sfd = new SaveFileDialog { FilterIndex = 2, Filter = "Excel 97 to 2003 Files(*.xls)|*.xls|Excel 2007 to 2010 Files(*.xlsx)|*.xlsx" }; if (sfd.ShowDialog() == true) { using (Stream stream = sfd.OpenFile()) { if (sfd.FilterIndex == 1) workBook.Version = ExcelVersion.Excel97to2003; else workBook.Version = ExcelVersion.Excel2010; workBook.SaveAs(stream); } //Message box confirmation to view the created spreadsheet. if (MessageBox.Show("Do you want to view the workbook?", "Workbook has been created", MessageBoxButton.YesNo, MessageBoxImage.Information) == MessageBoxResult.Yes) { //Launching the Excel file using the default Application.[MS Excel Or Free ExcelViewer] System.Diagnostics.Process.Start(sfd.FileName); } } } catch (Exception ex) { MessageBox.Show(ex.Message); } } View WPF DataGrid Export Demo in GitHub.
