How to refresh the Partial View of in MVC, after using the delete button in a kendo grid

Question

I have a kendo grid in a view in asp.net MVC application. When i press the delete button(Destroy function) in this kendo grid, a function is called in the controller to delete the object from the database. In the meantime i want to refresh the partial view where this grid is on, in order to refresh the labels in this view. Is it possible to add another jq function to the destroy button for example or is there other solution?

Here is the view code:

<div id="Browsegrid">

 @(Html.Kendo().Grid<WEB02.ConfigurationModel.TestGrid>()
.Name("grid")
.Columns(columns =>
{

    columns.Bound(o => o.Name).Width(110);
    columns.Bound(o => o.Type).Width(130);
    columns.Command(command => command.Destroy()).Width(110);

     })
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p.Name))
    .Events(events =>
                          {
                                events.RequestEnd("onRequestEnd"); 
                          })
    .PageSize(100)
    .Read(read => read.Action("TestGrid", "Configuration"))
            .Destroy("TestDelete", "Configuration")    
    )
    .Pageable(pageable => pageable
        .Refresh(true))
)

</div>

The script part: It calls a ajax request calling a method in the controller to view the partial view.

<script>

function onRequestEnd(e) {

    $.ajax({

        url: '/Configuration/_WorkflowPartial',
        contentType: 'application/html charset=utf-8',
        type: 'GET',
        dataType: 'html',
        data: { 'nodeName': NN, 'nodeType': NT, 'nodeID': NI, 'nodeURL': NU },
        success: function (data) {
            $('#body').html(data);
        }
    })
}

</script>

When you say you want to update the labels in this view what exactly do you mean? In your grid you have a .Refresh function which I gather just refreshes the grid so the deleted value disappears? — Canvas
yes when i delete something the grid is refreshed, but i want the whole page (partial view) to be refreshed.Because i have html labels that show the Objects and when these objects are deleted i want to make the visibility of the labels hidden for example and remove the object name from it. — KamalF
Looking around it looks like you can add your own event listener to the grid. Take a look at stackoverflow.com/questions/24141387/… the user has add an event to .Events(events => { events.RequestEnd("onRequestEnd"); //I've added this }) then you can just call location.reload(); in the event — Canvas
Thanks, i did it and i think it is a great solution, but it lead to an infinite loop somehow the page keeps refreshing ! — KamalF

KamalF KamalF · Accepted Answer · 2015-10-06T07:58:14

Instead of this event mentioned in the question, this is added:

.Events(events => events.Error("error_handler").Sync("sync_handler"))

javascript function:

function sync_handler(e) {
    $.ajax({

        url: '/Configuration/_WorkflowPartial',
        contentType: 'application/html charset=utf-8',
        type: 'GET',
        dataType: 'html',
        data: { 'nodeName': NN, 'nodeType': NT, 'nodeID': NI, 'nodeURL': NU },
        success: function (data) {
            $('#body').html(data);
        }
    })
}

This avoid the infinite loop that took place before and only calls the partial page when the delete button is clicked. The data passed is the model that was previously passed to this partial page.

How to refresh the Partial View of in MVC, after using the delete button in a kendo grid

1 Answers