Kendoo grid with multiple models in view

[Zoran]

I have a model which looks like this

public class NotificationModel
    {
        public List<TableNotificationModel> TableNotificationModel { get; set; }
        public List<WrongTableNotificationModel> WrongTableNotificationModel { get; set; }
    }

 

and I have a view with two different Kendo grids. I want to populate the first Kendo grid with the TableNotificationModel and the second grid with the WrongTableNotificationModel. 

@model ModelLayer.Models.NotificationModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI
@{ ViewData["Title"] = "Index"; }

<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
<script>
    window.rootUrl = '@Url.Content("~/")';
</script>
<h1>Upload index</h1>


<div>
    <h4>Upload file</h4>
    <form asp-controller="Upload" asp-action="Upload"
          enctype="multipart/form-data" method="post">
        <input type="file" name="file" />
        <button type="submit" id="btn">Upload</button>
    </form>

    @if (ViewBag.Message != null)
    {
<script>
        $(document).ready(function(){
            alert('@Html.Raw(ViewBag.Message)');
        });
</script>}


</div>


<div class="clearfix">
    @(Html.Kendo().Grid<Model.WrongTableNotificationModel>()
        .Name("successfullData")
        .ToolBar(tools => tools.Excel())
        .Pageable(pageable => pageable.Input(true).Numeric(false))
        .Scrollable()
        .Sortable()
        .Filterable()
        .ColumnMenu()
        .Groupable()
        .Columns(columns =>
        {
            columns.Bound(c => c.OPERATOR_OBJECTID).Title("ID").Hidden();
            columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("settlement code").Width("100px");
            columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("tech code").Width("100px");
            columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("upload").Width("100px");
            columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("download").Width("100px");
            columns.Bound(c => c.DATA_CATEGORY_QOS_OBJECTID).Title("data category").Width("100px");
            columns.Bound(c => c.SHAPE).Title("shape").Width("100px");
            columns.Bound(c => c.messageOut).Title("message").Width("100px");
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Upload_Read", "Upload").Data("sendAdditional"))
            )
    )

</div>

<div class="clearfix">
    @(Html.Kendo().Grid(Model.TableNotificationModel)
        .Name("unsuccessfullData")
        .ToolBar(tools => tools.Excel())
        .Pageable(pageable => pageable.Input(true).Numeric(false))
        .Scrollable()
        .Sortable()
        .Filterable()
        .ColumnMenu()
        .Groupable()
        .Excel(excel => excel
            .FileName("file.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Excel_Export_Save", "Upload"))
              )
        .Columns(columns =>
        {
            columns.Bound(c => c.OPERATOR_OBJECTID).Title("ID").Hidden();
            columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("settlement code").Width("100px");
            columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("tech code").Width("100px");
            columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("upload").Width("100px");
            columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("download").Width("100px");
            columns.Bound(c => c.DATA_CATEGORY_QOS_OBJECTID).Title("data category").Width("100px");
            columns.Bound(c => c.SHAPE).Title("shape").Width("100px");
            columns.Bound(c => c.messageOut).Title("message").Width("100px");
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Upload_Read", "Upload").Data("sendAdditional"))
            )
    )

</div>

<script>
    function sendAdditional() {
        var data = JSON.parse('@Html.Raw(Json.Serialize(Model))');

        return {
            model: data
        }
    }
</script>

neither of these methods I tried work

@(Html.Kendo().Grid(Model.TableNotificationModel)
        .Name("successfullData")

@(Html.Kendo().Grid<Model.WrongTableNotificationModel>()
        .Name("unSuccessfullData")

 

Is there a way to do this? Can I show both table with different models in the same view?

[Eyup]

Hi Zoran,

 

You can try the following approach to achieve this requirement:
https://stackoverflow.com/questions/40893834/how-can-i-bind-a-list-of-items-into-kendo-grid

If this doesn't work for you, you will need to create 2 different classes to hold the TableNotificationModel and WrongTableNotificationModel, similar to the DetailProductViewModel in this live sample:
https://demos.telerik.com/aspnet-mvc/grid

Feel free to try these suggestions and keep us updated on the result.

 

Regards,
Eyup
Progress Telerik