Autobind Grid to MVC with Route

[Simon]

Hi,

 

I have just started a new contract with a new company and my previous experience with Kendo MVC was with MVC 5 rather than Core.  The other difference is that the company I am at is heavily using Routes, rather than the action and the controller in the URL to determine where the user goes \ what URL they see.

An issue that I have is that currently the action passes a model back to the view and the grid is databound with this a list that is returned from the mode. On click of a row a modal window is opened, with data that can be edited, and then on save \ formAction the posts the data, and then the method redirects to action and the page reloads in order ot refresh the grid.

What I want to acheive is to refresh the grid on modal \ window close so that we dont have to post back.

My View as it stands is

 

<div class="container-fluid" accessrights-modify>
    <div class="btn-toolbar mb-3" role="toolbar">
        <div accessrights-create class="btn-group float-right mr-2" role="group">
            <button class="btn btn-primary" id="btnCreate">Create New</button>
        </div>
    </div>

    @(Html.Kendo().Grid(Model.ReportLessonRecommendation)
                          .Name("listGrid")
                          .Columns(columns =>
                          {
                              columns.Bound(c => c.Description)
                                     .ClientHeaderTemplate("Description");
                              columns.Bound(c => c.Active)
                                     .ClientTemplate("#if(Active) {# <i class='fas fa-check'></i>  # } else {# <i class='fas fa-times'></i> #} #")
                                     .ClientHeaderTemplate("Active")
                                     .HtmlAttributes(new { @class = "text-center" })
                                     .Width(100);

                          })
                          .Pageable(pageable => pageable
                          .Refresh(true)
                          .PageSizes(true)
                          .ButtonCount(5))
                          .Sortable()
                          .Filterable()
                          //.Groupable()
                          .NoRecords(n => n.Template("<p>There are no records to display.</p>"))
                          .HtmlAttributes(new { style = "width:100%;" })
                          .Selectable(selectable => selectable
                              .Mode(GridSelectionMode.Single)
                              .Type(GridSelectionType.Row))
                              .Events(events => events
                              .Change("onChange")
                          )
                          .Pageable(p =>
                              {
                                  p.PageSizes(new[] { 5, 10, 30, 50, 100 });
                              })
                          .DataSource(dataSource => dataSource
                              .Ajax()
                              .PageSize(50)
                              .ServerOperation(false)
                          )
    )
    @(Html.Kendo().Window()
        .Name("modalRecommendationsWindow")
        .Modal(true)
        .Visible(false)
        .MinWidth(750)
        .Events(evt => evt.Close("onClose"))
        .Content(@<text><div id="modalRecommendationsContent"></div></text>)
)
</div>

 

 

typically I would do a Read Action in the DataSource and direct it to my controller and my action and return a DataSourceRequest and would be something like this

 

<div class="container-fluid" accessrights-modify>
        <div class="btn-toolbar mb-3" role="toolbar">
            <div accessrights-create class="btn-group float-right mr-2" role="group">
                <button class="btn btn-primary" id="btnCreate">Create New</button>
            </div>
        </div>

        @(Html.Kendo().Grid<ReportLessonRecommendation>()
                              .Name("listGrid")
                              .Columns(columns =>
                              {
                                  columns.Bound(c => c.Description)
                                         .ClientHeaderTemplate("Description");
                                  columns.Bound(c => c.Active)
                                         .ClientTemplate("#if(Active) {# <i class='fas fa-check'></i>  # } else {# <i class='fas fa-times'></i> #} #")
                                         .ClientHeaderTemplate("Active")
                                         .HtmlAttributes(new { @class = "text-center" })
                                         .Width(100);

                              })
                              .Pageable(pageable => pageable
                              .Refresh(true)
                              .PageSizes(true)
                              .ButtonCount(5))
                              .Sortable()
                              .Filterable()
                              //.Groupable()
                              .AutoBind(true)
                              .NoRecords(n => n.Template("<p>There are no records to display.</p>"))
                              .HtmlAttributes(new { style = "width:100%;" })
                              .Selectable(selectable => selectable
                                  .Mode(GridSelectionMode.Single)
                                  .Type(GridSelectionType.Row))
                                  .Events(events => events
                                  .Change("onChange")
                              )
                              .Pageable(p =>
                                  {
                                      p.PageSizes(new[] { 5, 10, 30, 50, 100 });
                                  })
                              .DataSource(dataSource => dataSource
                                  .Ajax()
                                  .PageSize(50)
                                  .ServerOperation(false)
                                  .Read(r => r.Action("actionName", "controller"))
                              )
        )
        @(Html.Kendo().Window()
            .Name("modalRecommendationsWindow")
            .Modal(true)
            .Visible(false)
            .MinWidth(750)
            .Events(evt => evt.Close("onClose"))
            .Content(@<text><div id="modalRecommendationsContent"></div></text>)
    )
    </div>

 

 

The controller is

[Route("report-lookups")]
    public class ReportLookupController : Controller
{
...
}

 

and Method I want to his is

[AccessRights("Lists")]
        [HttpGet]
        [Route("report-lesson-recommendations/refresh")]
        public async Task<IActionResult> RefreshRecommendations([DataSourceRequest]DataSourceRequest request)
        {
            var result = await _cacheService.SearchForReportLessonRecommendationsAsync(null);
            return Json(result.ToDataSourceResult(request));
        }

 

when trying to AutoBind, and refresh and dataSource.Read() this method isnt hit however I try and do it.

Any and all help will be very much appreicated.

Thanks

Simon

 

[Konstantin Dikov]

Hello Simon,

When the Grid is using server binding, it is not possible to refresh it without refreshing the page. If you want to refresh the Grid with AJAX request you will have to configure the DataSource to use AJAX binding and specify the correct Read action method and controller:

• https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/binding/ajax-binding

As for manually calling the "read" method of the dataSource within the "Close" event of the Window, you could add the following: 

$("#listGrid").getKendoGrid().dataSource.read();

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik