RetroSearch Browse

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

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

ASP.NET Core Data Management Grid Editing Overview

New to Telerik UI for ASP.NET Core? Start a free 30-day trial Editing Overview

The Telerik UI for ASP.NET Core Grid component supports create, update, and delete operations (CRUD) with different modes and user experience.

Basics

The Grid CRUD operations rely on the following algorithm:

Users execute Grid commands (Edit, Save, Delete, and more) with the mouse or keyboard.
The DataSource of the Grid triggers the respective Create, Update, or Destroy actions based on the applied data operation.
The changes are handled in the Controller Action methods, and the new, deleted, or edited data item is returned through the response of the request.
The Grid rebinds to display the latest data.

Model Requirements

Adding, deleting, or editing rows in the Grid sets the following requirements on the Grid model:

The model field names must be valid JavaScript identifiers and contain neither spaces nor special characters. The first character has to be a letter.

The Id() option of the Model() configuration must contain the name of the unique model identifier. The DataSource uses the specified identifier field to track the state of the data items. The Id field must be unique and non-editable, otherwise, unexpected behavior and loss of data might occur.

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("grid")
    ... 
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => 
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
        })
        ... 
    )
)

@addTagHelper *, Kendo.Mvc

<kendo-grid name="grid">
    <datasource type="DataSourceTagHelperType.Ajax">
        <schema data="Data" total="Total" errors="Errors">
            <model id="ProductID">
                <fields>
                    <field name="ProductID" type="number" editable="false"></field>
                </fields>
            </model>
        </schema>
        
    </datasource>
</kendo-grid>

All fields defined in the Model() configuration of the DataSource with the Editable(false) option are disabled for editing.
When using Grid TagHelper, define the data type of the fields to take advantage of the built-in editors, filterable UI, and correct sorting, filtering, and grouping operations.

The following table lists the available data types when using Grid TagHelper.
Data Type Column Template or Format Editor string Displayed as text. TextBox number The format attribute can be used to format the number as currency "{0:c2}", percentage "{0:p0}", exponential "{0:e4}" or a custom format "{0:0.00}". See all Number Formatting NumericTextBox date The format attribute can be used to format the date as a short "{0:d}", long "{0:D}", full date/time "{0:F}" and many more standard and custom date patterns. See all Date Formatting DatePicker boolean Displayed as lowercase text true or false CheckBox object Arrays and Objects without templates are rendered as [object Object]. TextBox
When using the HtmlHelper version of the Grid, the data types of the column fields are automatically set up in the DataSource options, so it is not required to specify them explicitly.

Edit Modes

The Grid offers the following modes to add and edit rows with a different user experience:

Inline editing—Users modify the Grid content row by row.
Popup editing—Users modify the Grid content row by row in a modal popup form.
InCell (Batch) editing—Users modify the Grid content cell by cell.

To enable the editing functionality of the Grid:

Set the Editable configuration:

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("Grid")
    ... 
    .Editable(e => e.Enabled(true))
)

<kendo-grid name="grid">
    <editable enabled="true"/>
    
</kendo-grid>

The default edit mode is Inline. To use a different edit mode, specify it through the Mode() option:

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("Grid")
    ... 
    .Editable(e => e.Mode(GridEditMode.PopUp))
)

<kendo-grid name="grid">
    <editable enabled="true" mode="popup"/>
    
</kendo-grid>

For more information on the available editable configurations, refer to the HtmlHelper API and TagHelper API options.

Specify the Id field in the Model() configuration of the DataSource:
```
.Model(model => model.Id(p => p.ProductID))
```
```
<model id="ProductID">
    
</model>
```
The Model method configures the model of the DataSource. For more information, refer to the Model definition documentation.

Declare the endpoints for the desired actions (Create, Update, Destroy):

.DataSource(dataSource => dataSource
    .Ajax()
    ... 
    .Read(read => read.Action("Read", "Grid"))
    .Create(create => create.Action("Create", "Grid"))
    .Update(update => update.Action("Update", "Grid"))
    .Destroy(destroy => destroy.Action("Destroy", "Grid"))
)

<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
    <transport>
        
        <read url="@Url.Action("Read", "Grid")"/>
        <create url="@Url.Action("Create", "Grid")"/>
        <update url="@Url.Action("Update", "Grid")"/>
        <destroy url="@Url.Action("Destroy", "Grid")"/>
    </transport>
</datasource>

Define an Action method for each operation in the Controller. Intercept the Model instance, save the changes, and return the expected response.

The following example shows the Update Action method for an Inline or Popup editable Grid set up with Ajax data binding.

[AcceptVerbs("Post")]
public JsonResult Update([DataSourceRequest] DataSourceRequest request, ProductViewModel product)
{
    if (product != null && ModelState.IsValid)
    {
        productService.Update(product);
    }

    return Json(new[] { product }.ToDataSourceResult(request, ModelState));
}

Editing multiple rows at the same time is not supported.

Delete Operation

Delete operations provide the same user experience in all Grid edit modes and require the same configuration:

Delete command button.
Destroy action in the DataSource configuration.
Optional delete confirmation dialog. Use the DisplayDeleteConfirmation() option in the Editable() configuration to determine if the Grid will show a Dialog before triggering the Destroy action so that users can abort the operation.

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("Grid")
    .Editable(settings => settings.DisplayDeleteConfirmation(false))
    ... 
)

    <kendo-grid name="grid">
        <editable enabled="true" confirmation="false"/>
        
    </kendo-grid>

Delete operations can work even if the Grid editing feature is not enabled.

See the delete operations in action in the complete examples for Grid Inline, InCell, and Popup editing. Also, check how to customize the Delete Confirmation Dialog.

Commands

The Grid provides the following built-in commands that enable users to add, delete, and edit rows:

Create—Adds a new row and puts it in edit mode.
Destroy—Deletes a row.
Edit—Puts a Grid row or cell in edit mode.
Save—Confirms the row or cell changes and exits edit mode if the user input is valid.
Cancel—Cancels the row or cell changes and exits edit mode. The command automatically appears in the Toolbar of the Grid when the Save() command is defined.

Users execute commands in the following ways:

By clicking the column command buttons.
By clicking editable cells in InCell edit mode and then anywhere else on the page.
By using the Grid keyboard navigation.

Command buttons can only reside in Grid column commands or the Grid Toolbar. You can also trigger the desired operation programmatically from anywhere on the page using the client-side methods.

Known Limitations

The following limitations apply when using editing along with other features of the component.

If filtering is applied and the ServerOperation() option is disabled in the DataSource configuration, adding new records is not allowed.
The component behaves differently when it is grouped and you add a new record. If ServerOperation() is enabled in the DataSource configuration, the new row is added as part of a separate (duplicate) group. If ServerOperation() is disabled, the new row is added as part of an existing group.