Removing an entry from the grid after editing it

[Ryley]

I have a question concerning a specific problem that we are having. We have a grid set up that has a list of items that a user can add to, edit, and delete. 

When editing an item, the item needs to be removed from the grid until it goes through an approval process.

I know that if you press the delete button, an item is automatically removed from the grid. We want to emulate this when a person edits an item. 

Is this possible at all?  Any helpful tips would be appreciated. Thanks!

[Nikolay Rusev]

Hello Ryley,

 
There are various ways to remove item from the Grid and it all depends on the user experience that you need to achieve. I don't think that hiding a row right after update is good design, but if that is the case here is one possible way to do this:

 - have a field which indicates whether the item is `approved` or not
 - display only approved items so the user can edit them - this can be achieved by default filter expression applied to the DataSource
 - once the item is altered(on Grid save event) - modify the `approved` flag

Here is a sample implementing the above algorithm.

All the best,
Nikolay Rusev
the Telerik team

[Ryley]

I apologize, I probably should have mentioned we are using the ASP.NET MVC wrappers for this. Is there a comparable function using the wrappers for the Grid save event? 

We are looking at using the .Events in the DataSource as of right now and then using a function to hide the row. Would that be feasible?

[Ryley]

We got things figured out a bit more but what we have is not working. 

This is our code: 

@(Html.Kendo().Grid(Model)
    .Name("VideoLibraryActive")
    .Columns(columns =>
    {
        columns.Bound(v => v.Title);
        columns.Bound(v => v.VideoUrl);
        columns.Bound(v => v.Author);
        columns.Bound(v => v.CreatedBy);

        columns.Command(command => { command.Edit(); command.Destroy(); });
    })
    .Pageable()
    .Sortable()
    .ToolBar(toolBar => toolBar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Scrollable()
    .Events(events => events.DataBound("dataBound"))
    .Events(events => events.Save(
        @<text>
            function(e){
                e.model.set("IsActive", false);
            }
        </text>
        ))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
            {
                model.Id(v => v.DbId);
            })
        .Read(read => read.Action("VideosReadActive", "VideoLibrary"))
        .Create(update => update.Action("PopupCreate", "VideoLibrary").Type(HttpVerbs.Post))
        .Update(update => update.Action("PopupUpdate", "VideoLibrary").Type(HttpVerbs.Post))
        .Destroy(update => update.Action("VideoDestroy", "VideoLibrary"))
        .Events(events => events.RequestEnd("onRequestEnd"))
        .Filter(filter => 
            {
                filter.Add(v => v.IsActive).IsEqualTo(true);
            })
    )
)

After looking at this, any idea why it would not be removing the row?

[Nikolay Rusev]

Hello Ryley,

Using DataSource event to hide the row  is still an options. However you should notice here that the pager(if paging is enabled) will not properly reflect the visible items in grid table.

In the scenario that you are using ASP.NET MVC you will need to set ServerOperation(false) of the DataSource in order to apply filtering right away on client.

.DataSource(dataSource => dataSource
 .Ajax()
 .ServerOperation(false)

I am attaching sample app.Regards,
Nikolay Rusev
the Telerik team