Editing

The Telerik UI ListView for ASP.NET Core enables you to edit its records.

To implement the editing functionality of the ListView:

Configure the ListView for editing
Define the item template
Define the editor template
Enable the editing functionality
Specify and implement the action methods and the model id of the data source

Configuring the ListView for Editing

The following example demonstrates how to configure the Telerik UI ListView for ASP.NET Core for editing.

namespace ListViewExample.Models
{
    public class OrderViewModel
    {
        public int OrderID
        {
            get;
            set;
        }

        public decimal? Freight
        {
            get;
            set;
        }

        [Required]
        public DateTime? OrderDate
        {
            get;
            set;
        }

        [Required]
        public string ShipCity
        {
            get;
            set;
        }

        [Required]
        public string ShipName
        {
            get;
            set;
        }
    }
}

Defining the Item Template

The following example demonstrates how to define the item template for the Telerik UI ListView. Add buttons for the create, update and destroy operations.

click events for elements with k-edit-button and k-delete-button class names will be automatically handled and treated by the Telerik UI ListView as update and destroy actions. To facilitate the create operation add a click handler to the k-add-button, get the Telerik UI ListView instance and call the add() method.

    <!-- Button for the Create operation. Use it to call the client ListView method add()  -->
    <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>

    @(Html.Kendo().ListView<ListViewExample.Models.OrderViewModel>()
        /* listview configuration */
    )

    <script>
    $(function () {
        var listView = $("#listView").data("kendoListView");

        $(".k-add-button").click(function (e) {
            listView.add();
            e.preventDefault();
        });
    });
    </script>

    <script type="text/x-kendo-tmpl" id="template">
        <div class="order">
            <h3>#= OrderID #</h3>
            <dl>
                <dt>Ship Name:</dt>
                <dd>#= ShipName #</dd>
            </dl>
            <dl>
                <dt>Ship City:</dt>
                <dd>#= ShipCity #</dd>
            </dl>
            <dl>
                <dt>Freight:</dt>
                <dd>#= kendo.toString(Freight, "n2")#</dd>
            </dl>
            <dl>
                <dt>Order Date:</dt>
                <dd>#= kendo.toString(OrderDate, "D")#</dd>
            </dl>
            <!-- The following markup contains the `Edit` and `Delete` buttons -->
            <div class="edit-buttons">
                <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
                <a class="k-button k-delete-button" href="\\#"><span class="k-icon k-i-delete"></span></a>
            </div>
        </div>
    </script>

    <!-- Button for the Create operation. Use it to call the client ListView method add()  -->
    <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>

    <kendo-listview name="listview"> 
    </kendo-listview>

    <script>
    $(function () {
        var listView = $("#listView").data("kendoListView");

        $(".k-add-button").click(function (e) {
            listView.add();
            e.preventDefault();
        });
    });
    </script>

    <script type="text/x-kendo-tmpl" id="template">
        <div class="order">
            <h3>#= OrderID #</h3>
            <dl>
                <dt>Ship Name:</dt>
                <dd>#= ShipName #</dd>
            </dl>
            <dl>
                <dt>Ship City:</dt>
                <dd>#= ShipCity #</dd>
            </dl>
            <dl>
                <dt>Freight:</dt>
                <dd>#= kendo.toString(Freight, "n2")#</dd>
            </dl>
            <dl>
                <dt>Order Date:</dt>
                <dd>#= kendo.toString(OrderDate, "D")#</dd>
            </dl>
            <!-- The following markup contains the `Edit` and `Delete` buttons -->
            <div class="edit-buttons">
                <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
                <a class="k-button k-delete-button" href="\\#"><span class="k-icon k-i-delete"></span></a>
            </div>
        </div>
    </script>

Defining the Editor Template

The following example demonstrates how to define the EditorTemplate for the model:

Declare the editor template in a file that uses the name of the edited model—for example, OrderViewModel.cshtml.
Place this file in the ~Views\Shared\EditorTemplates directory of your project.

click events for elements with k-update-button and k-cancel-button class names will be automatically handled and treated by the Telerik UI ListView as save and cancel actions. Similar to the item template, you have to wrap the editor template in an HTML container.

    @model ListViewExample.Models.OrderViewModel
    <div class="order">
        <h3 data-bind="text:OrderID"></h3>
        <dl>
            <dt>Ship Name:</dt>
            <dd>
                @(Html.Kendo().TextBoxFor(o => o.ShipName))
            </dd>
            <dt>Ship City:</dt>
            <dd>
                @(Html.Kendo().TextBoxFor(o => o.ShipCity))
            </dd>
            <dt>Freight</dt>
            <dd>
                @(Html.Kendo().NumericTextBoxFor(o => o.Freight))
            </dd>
            <dt>Order Date:</dt>
            <dd>
                @(Html.Kendo().DatePickerFor(o => o.OrderDate))
                <span data-for="OrderDate" class="k-invalid-msg"></span>
            </dd>

        </dl>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
        </div>
    </div>
    <style>
        span.k-tooltip {
            position:absolute;
            margin:6px;
        }
    </style>

    @model ListViewExample.Models.OrderViewModel
    <div class="order">
        <h3 data-bind="text:OrderID"></h3>
        <dl>
            <dt>Ship Name:</dt>
            <dd>
                <input asp-for="@Model.ShipName" type="text" class="k-textbox"/>
            </dd>
            <dt>Ship City:</dt>
            <dd>
                <input asp-for="@Model.ShipCity" type="text" class="k-textbox"/>
            </dd>
            <dt>Freight</dt>
            <dd>
                <kendo-numerictextbox for="@Model.Freight">
                </kendo-numerictextbox>
            </dd>
            <dt>Order Date:</dt>
            <dd>
                <kendo-datapicker for="@Model.OrderDate">
                </kendo-datapicker>
                <span data-for="OrderDate" class="k-invalid-msg"></span>
            </dd>

        </dl>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
        </div>
    </div>
    <style>
        span.k-tooltip {
            position:absolute;
            margin:6px;
        }
    </style>

Enabling the Editing Functionality

The following example demonstrates how to enable the ListView editing.

In the ListView TagHelper the editing is enabled by the edit-template configuration.

    @(Html.Kendo().ListView<ListViewExample.Models.OrderViewModel>()
        .Name("listView")
        .TagName("div")
        .ClientTemplateId("list-view-template")
        .Editable() //<-- Enable editing.
    )

    <kendo-listview name="listView"
        tag-name="div"
        template-id="template"
        edit-template-id="editTemplate">
        <datasource type="DataSourceTagHelperType.Ajax" page-size="4">
            <transport>
                <create url="@Url.Action("Orders_Create", "ListView")"  />
                <read url="@Url.Action("Orders_Read", "ListView")"  />
                <update url="@Url.Action("Orders_Update", "ListView")"  />
                <destroy url="@Url.Action("Orders_Destroy", "ListView" )" />
            </transport>
            <schema>
                <model id="ProductID">
                    <fields>
                        <field name="ProductName"></field>
                        <field name="UnitPrice"></field>
                        <field name="UnitsInStock"></field>
                        <field name="Discontinued"></field>
                    </fields>
                </model>
            </schema>
        </datasource>
    </kendo-listview>

Specifying the Action Methods

The Model Id is required to enable the editing functionality. Use a unique identifier (primary key).

The following example demonstrates how to specify the action methods which will handle the Create, Update, and Destroy operations.

    @(Html.Kendo().ListView<ListViewExample.Models.OrderViewModel>()
        .Name("listView")
        .TagName("div")
        .ClientTemplateId("template")
        .Editable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(4)
            .Model(m => m.Id("OrderID"))
            .Read(read => read.Action("Orders_Read", "ListView"))
            .Create(create => create.Action("Orders_Create", "ListView"))
            .Update(update => update.Action("Orders_Update", "ListView"))
            .Destroy(destroy => destroy.Action("Orders_Destroy", "ListView"))
        )
        .Pageable()
    )

    <kendo-listview name="listView"
        tag-name="div"
        template-id="template"
        edit-template-id="editTemplate">
        <datasource type="DataSourceTagHelperType.Ajax" page-size="4">
            <transport>
                <create url="@Url.Action("Orders_Create", "ListView")"  />
                <read url="@Url.Action("Orders_Read", "ListView")"  />
                <update url="@Url.Action("Orders_Update", "ListView")"  />
                <destroy url="@Url.Action("Orders_Destroy", "ListView" )" />
            </transport>
            <schema>
                <model id="ProductID"></model>
            </schema>
        </datasource>
        <pageable enabled="true"/>
    </kendo-listview>

For a quick test add a static list and copy and paste it in the controller, or use own service or data base which returns an IEnumerable or IQueriable.

public class ListViewController : Controller
{
    public static List<OrderViewModel> dbOrders = Enumerable.Range(1, 20).Select(i => new OrderViewModel
    {
        OrderID = i,
        Freight = i * 10,
        OrderDate = new DateTime(2016, 9, 15).AddDays(i % 7),
        ShipName = "ShipName " + i,
        ShipCity = "ShipCity " + i
    }).ToList();
}

The following example demonstrates how to implement the read action method.

public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
{
    var dsResult = dbOrders.ToDataSourceResult(request);
    return Json(dsResult);
}

The following example demonstrates how to implement the create action method.

public ActionResult Orders_Create([DataSourceRequest] DataSourceRequest request,  OrderViewModel order)
{
    if (order != null && ModelState.IsValid)
    {
        // Own update logic or use with sample data to test.

            var nextId = dbOrders.Count + 1;
            order.OrderID = nextId;
            dbOrders.Add(order);
    }

    // Return any validation errors, if any.
    return Json(new [] { order }.ToDataSourceResult(request, ModelState));
}

The following example demonstrates how to implement the update action method.

public ActionResult Orders_Update([DataSourceRequest] DataSourceRequest request, OrderViewModel order)
{
    if (order != null && ModelState.IsValid)
    {
        // Own create logic or use with sample data to test.
        for (int i = 0; i < dbOrders.Count; i++)
        {
            if (order.OrderID == dbOrders[i].OrderID)
            {
                dbOrders[i] = order;
            }
        }
    }

    // Return any validation errors, if any.
    return Json(new[] { order }.ToDataSourceResult(request, ModelState));
}

The following example demonstrates how to implement the destroy action method.

public ActionResult Orders_Destroy([DataSourceRequest] DataSourceRequest request, OrderViewModel order)
{
    if (order != null)
    {
        // Own destroy logic or use with sample data to test.

        for (int i = 0; i < dbOrders.Count; i++)
        {
            if (order.OrderID == dbOrders[i].OrderID)
            {
                dbOrders.Remove(dbOrders[i]);
                break;
            }
        }
    }

    // Return any validation errors, if any.
    return Json(new[] { order }.ToDataSourceResult(request, ModelState));
}

Editing

Configuring the ListView for Editing

Defining the Item Template

Defining the Editor Template

Enabling the Editing Functionality

Specifying the Action Methods

See Also

Getting Started

Support Resources

Community