CODEWITHSUNDEEP
c#asp.net-mvc-4kendo-uikendo-grid
Vivendi
Vivendi

Reputation: 20997

Add delete option to Kendo Grid

I have a Kendo UI Grid which displays some data. But now i need to add a delete option, so rows can be deleted as well. But how does this work?

I have added a Destroy method to the Grid. But that's just so it knows what Action to call.

How can i add a delete icon for each row for example to the grid? Or how does this normally work in a Kendo Grid?

This is the code i have so far:

@(Html.Kendo().Grid<DescriptorWithResource>()
      .Name("grid")
      .PrefixUrlParameters(false)
      .Columns(columns =>
      {
          columns.Bound(x => x.Code).Title(Html.GetResource(KnownComponent, "ManagedDescriptorCode")).Width(250);
          columns.Bound(x => x.Description).Title(Html.GetResource(KnownComponent, "ManagedDescriptorDescription")).Width(500);
      })
      .Pageable(pager => pager.Info(true)
          .Refresh(false)
          .PageSizes(false)
          .PreviousNext(false)
          .Numeric(false)
          .Enabled(true)
          .Messages(m => m.Display(@Html.GetResource(KnownComponent, "Label_TotalRecordsResource"))))
      .Scrollable(scrollable => scrollable.Virtual(true))
      .Selectable(selectable => selectable.Enabled(false))
      .Events(e => e.DataBound("window.KendoExtensions.bindHoverEffect"))
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(50)
          .Events(e => e
              .RequestStart("window.Management.onDataSourceBinding")
              .Error("window.Management.onDataSourceError"))
          .Read(read => read.Action("ResultData", "Management"))
          .Destroy(destroy => destroy.Action("DeleteRow", "Management"))) // <-- Added
      )

Upvotes: 0

Views: 1398

Answers (2)

Petur Subev
Petur Subev

Reputation: 20193

You need to declare it via the Command builder.

columns => columns.Command(cmd=>cmd.Destroy())

Upvotes: 1

ckv
ckv

Reputation: 10820

You can add a html template for that particular column for each rows. In the html template you can have a button or link for the delete. ON CLICK of this button/link you can call your action. 

template: '<input type="button" data-id=ID value="Delete" class="popupbutton" id="delButton" onclick="javascript:CheckAck(this);" id="Delete" /><br/>

Upvotes: 0

Related Questions