Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/editing/inline below:

ASP.NET MVC Data Management Grid Editing Inline

Inline editing in the Grid provides a user-friendly way to modify data directly within a row. Users can initiate and complete the editing process by clicking command buttons on each row, allowing for quick and efficient data updates.

Read the Grid Editing Overview article first.

To enable the Inline Grid editing, set the Mode() option of the Editable() configuration to GridEditMode.InLine. During Inline editing, only one table row is in edit mode at a time. Users can:

• Click the Edit command button to switch the desired row to edit mode.
• Press Tab or Shift + Tab to focus the next or previous editable cell.
• Click the Save command button to confirm the current row changes and exit edit mode.
• Click the Cancel command button to cancel the current row changes and exit edit mode.
• Perform another Grid operation, for example, paging or sorting, to cancel the current edit operation.
• Click the Add toolbar command to add a new row.
• Click the Delete command button to delete the respective row.

Inline add, edit, and delete operations use the following command buttons:

• Add (toolbar command)
• Delete (column command)
• Edit (column command)
• Save (column command)—Activated when the Grid row is in edit mode.
• Cancel (column command)—Activated when the Grid row is in edit mode.

In Inline edit mode, the Grid commands execute row by row and the corresponding Grid client-side events also fire row by row. This is similar to Popup editing and unlike InCell editing, where commands and events relate to cells.

When validation is not satisfied, clicking the Save command has no effect, but users can still navigate through all editors in the row to complete the editing.

The example below shows how to implement Inline Grid CRUD operations with a minimal required setup.

1. Add a new class to the ~/Models folder, for example, ProductViewModel:

   using System.ComponentModel.DataAnnotations;
   
   public class ProductViewModel
   {
       public int ProductID { get; set; }
       [Required] 
       public string ProductName { get; set; }
       public short? UnitsInStock { get; set; }
   }

2. Open HomeController.cs and add a new action method that returns the dataset Products as JSON. The Grid makes Ajax requests to this action to read the data.

   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
   {
       
       using (var northwind = new NorthwindEntities())
       {
           IQueryable<Product> products = northwind.Products;
           DataSourceResult result = products.ToDataSourceResult(request);
           return Json(result);
       }
   }

3. Add a new action method to HomeController.cs, responsible for saving the new data items. Name the method Products_Create.

   public ActionResult Products_Create([DataSourceRequest]DataSourceRequest request, ProductViewModel product)
   {
       if (ModelState.IsValid)
       {
           using (var northwind = new NorthwindEntities())
           {
               
               var entity = new Product
               {
                   ProductName = product.ProductName,
                   UnitsInStock = product.UnitsInStock
               };
               
               northwind.Products.Add(entity);
               
               northwind.SaveChanges();
               
               product.ProductID = entity.ProductID;
           }
       }
       
       return Json(new[] { product }.ToDataSourceResult(request, ModelState));
   }

4. Add an action method to HomeController.cs, responsible for saving the edited data items. Name the method Products_Update.

   public ActionResult Products_Update([DataSourceRequest]DataSourceRequest request, ProductViewModel product)
   {
       if (ModelState.IsValid)
       {
           using (var northwind = new NorthwindEntities())
           {
               
               var entity = new Product
               {
                   ProductID = product.ProductID,
                   ProductName = product.ProductName,
                   UnitsInStock = product.UnitsInStock
               };
               
               northwind.Products.Attach(entity);
               
               northwind.Entry(entity).State = EntityState.Modified;
               
               
               
               northwind.SaveChanges();
           }
       }
       
       return Json(new[] { product }.ToDataSourceResult(request, ModelState));
   }

5. Add a new action method to HomeController.cs, responsible for saving the deleted data items. Name the method Products_Destroy.

   public ActionResult Products_Destroy([DataSourceRequest]DataSourceRequest request, ProductViewModel product)
   {
       if (ModelState.IsValid)
       {
           using (var northwind = new NorthwindEntities())
           {
               
               var entity = new Product
               {
                   ProductID = product.ProductID,
                   ProductName = product.ProductName,
                   UnitsInStock = product.UnitsInStock
               };
               
               northwind.Products.Attach(entity);
               
               northwind.Products.Remove(entity);
               
               
               
               northwind.SaveChanges();
           }
       }
       
       return Json(new[] { product }.ToDataSourceResult(request, ModelState));
   }

6. Within the view, configure the Grid to use the action methods created in the previous steps. The Update and Destroy actions must return a collection with the modified or deleted records to enable the DataSource to apply the changes accordingly. The Create method must return a collection of the created record with the assigned ID field.

   @(Html.Kendo().Grid<KendoGridAjaxEditing.Models.ProductViewModel>()
       .Name("grid")
       .Columns(columns =>
       {
           columns.Bound(product => product.ProductID).Width(100);
           columns.Bound(product => product.ProductName);
           columns.Bound(product => product.UnitsInStock).Width(250);
           columns.Command(commands =>
           {
               commands.Edit(); 
               commands.Destroy(); 
           }).Title("Commands").Width(200);
       })
       .ToolBar(toolbar => toolbar.Create()) 
       .Editable(editable => editable.Mode(GridEditMode.InLine)) 
       .DataSource(dataSource => dataSource
           .Ajax()
           .Model(model =>
           {
               model.Id(product => product.ProductID); 
               model.Field(product => product.ProductID).Editable(false); 
           })
           .Create(create => create.Action("Products_Create", "Home")) 
           .Read(read => read.Action("Products_Read", "Home"))  
           .Update(update => update.Action("Products_Update", "Home"))  
           .Destroy(destroy => destroy.Action("Products_Destroy", "Home")) 
       )
       .Pageable()
   )

By default, the Grid component serializes editors allocated within the ~/Views/Shared/EditorTemplates/ folder.

For example, the default editor of the string properties is the TextBox component, the CheckBox—for booleans, the DateTimePicker—for DateTime data type properties, and more.

@model object 

@Html.Kendo().TextBoxFor(model => model)

@model bool?

@(Html.Kendo().CheckBoxFor(m => m).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")}))

@model DateTime?

@(Html.Kendo().DateTimePickerFor(m => m).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")}))

If no editors are available in the ~/Views/Shared/EditorTemplates/ folder, the Grid will revert to using a default editor based on the primitive type.

To define a custom editor for a specified column:

1. Add a view that contains the desired editor in the ~/Views/Shared/EditorTemplates/ folder:

       
   
       @model int?
   
       @(Html.Kendo().DropDownListFor(m => m)
           .DataValueField("Id") 
           .DataTextField("Name") 
           .BindTo((System.Collections.IEnumerable)ViewData["categories"]) 
       )

   public class ProductViewModel
   {
       public int ProductID { get; set; }
       [Required]
       public string ProductName { get; set; }
       public short? UnitsInStock { get; set; }
       public int? CategoryID { get; set; }
   }

   public ActionResult Index()
   {
       List<CategoryViewModel> categories = new List<CategoryViewModel>();
       for (int i = 1; i < 6; i++)
       {
           CategoryViewModel category = new CategoryViewModel
           {
               Id = i,
               Name = "Category " + i
           };
           categories.Add(category);
       }
       ViewData["categories"] = categories;
       return View(); 
   }

   public class CategoryViewModel
   {
       public int Id { get; set; }
       public string Name { get; set; }
   }

2. Specify the name of the created view (CategoryEditor) in the EditorTemplateName() option of the column.

   @(Html.Kendo().Grid<KendoGridAjaxEditing.Models.ProductViewModel>()
       .Name("grid")
       .Columns(columns =>
       {
           columns.Bound(product => product.CategoryID).EditorTemplateName("CategoryEditor");
           ...
       })
       
   )

For more use cases and information on the column editor templates, refer to the Editor Templates documentation.

• Inline Editing by the Grid for ASP.NET MVC (Demos)
• Server-Side HtmlHelper API

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4