Kendo MVC: Adding Edit, Delete Buttons to Grid

问题

Assuming I have the below table:

    @Html.Kendo().Grid(Model).Name("Staff").Columns(x =>
    {
        x.Bound(y => y.StaffId);
        x.Bound(y => y.FirstName);
        x.Bound(y => y.LastName);
        x.Bound(y => y.Email);
        x.Bound(y => y.Phone);
        x.Command(y => y.Custom("Edit").Action("edit", "controller", new { id = ????? }));

    }).Sortable().Scrollable().Pageable(x=> x.PageSizes(true)).Filterable()

How can I pass the primary key value (StaffId in this case) associated to the row to the object route values similar to the way it is done by Visual Studio auto-scaffold?

回答1:

I do not know if you can pass ID using Command.Custom the way you are attempting right now.

If you prefer this way, you can define a JS method and fetch selected row in that and perform an AJAX operation to manipulate the data.

So in your case you can instead define command as:

columns.Command(command => command.Custom("Edit").Click("editRow"));

and in script tag, you can define method that read and send data to server:

    function editRow(e) {
    e.preventDefault();

    try {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var searchId = dataItem.Id;
        var searchName = dataItem.Name;

        var model = { searchId: searchId };
        $.ajax({
                url: '@Url.Action("BindLeftMenu")',
                contentType: 'application/json; charset=utf-8',
                type: 'POST',
                dataType: 'html',
                data: JSON.stringify(model)
            })
            .success(function (resultMenu) { 
                $("#driversummaryarea").show();
            })
            .error(function (xhr, status) {
                $("div.overlay").hide();
            });            
    }
    catch (e) {
        alert(e.message);
    }
}

Now there are 2 other ways you can modify grid data:

Use default commands e.g. Edit(). A demo is shown here. Simple and easy but limiting i.e. less control from JS.
Use ClientTemplate - Very powerful as offers full control over display and capturing data in JS.

For example with ClientTemplate you can define a grid like below. Notice how we are passing model Id parameter in ClientTemplate as raw html.

Once you define ClientTemplate, you can define the JS functions fnEditUser as shown above and perform operation on grid data.

HTML

        @(Html.Kendo().Grid<Eda.RDBI.Web.Models.OrganizationUserViewModel>()
              .Name("organizationUserViewModelGrid")
              .Columns(columns =>
              {
                  columns.Bound(p => p.FirstName).Filterable(true).Title("Name").Groupable(false).ClientTemplate("<a class='lnkEditUser' href='javascript:void(0)' onclick='fnEditUser(#=Id#)' > #=FirstName# </a>").Width(200);

                  columns.Bound(p => p.EMail).Width(200);

                  columns.Bound(p => p.Role)
                      .ClientTemplate("<span>#=Role#</span> <span>#=IsDriverSearchAllowed ? ' (DS)' : ''#</span>");

                  columns.Bound(p => p.IsActive).Title("Active")
                      .ClientTemplate("<input type='checkbox'  #=IsActive ? checked='checked':'' # class='chkbx' onclick='return false'/>");

                  columns.Bound(p => p.Id).Title(string.Empty).ClientTemplate("<a class='btn btn-default' href='javascript:void(0)' onclick='fnDeleteUser(#=Id#)'>Delete</a>").Filterable(false).Sortable(false);
              })
              .Sortable(sortable => sortable.AllowUnsort(false))
              .Scrollable()
              .Filterable()
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(50)
                  .Model(model => model.Id(p => p.Id))
                  .Read(read => read.Action("GetUsersForOrganization", "OrganizationUser"))
              )
              .Scrollable(scrollable => scrollable.Virtual(true))
              )

回答2:

This works for me. If you're not doing any AJAX, you might be able to just move the anchor into Template and not use ClientTemplate. I'm using bootstrap buttons, but you could replace that code with your own styles or the kendo styles.

This is the code that inserts your id: #= Id # - it should be a field from your Model. See http://docs.telerik.com/kendo-ui/framework/templates/overview

@Html.Kendo().Grid(Model).Name("Staff").Columns(x =>
{
    x.Bound(y => y.StaffId);
    x.Bound(y => y.FirstName);
    x.Bound(y => y.LastName);
    x.Bound(y => y.Email);
    x.Bound(y => y.Phone);
    x.Template(@<text></text>).Title(string.Empty).Width(40)
     .ClientTemplate(@"<a href='" + Url.Action("Edit") + "?id=#= Id #' class='btn btn-info btn-xs' title='Modify this'>Edit</a>");
}).Sortable().Scrollable().Pageable(x=> x.PageSizes(true)).Filterable()

回答3:

After playing with the grid over and over, I could finally solve the problem. Here you go:

x.Bound(y => y.Title).Template(y=> "<a href=\""+y.Title+"\">Click Me</a>")

来源：https://stackoverflow.com/questions/32773431/kendo-mvc-adding-edit-delete-buttons-to-grid

标签

asp.net-mvc

kendo-ui

telerik

kendo-grid

kendo-asp.net-mvc