Kendoo grid with multiple models in view

2 posts, 0 answers
  1. Zoran
    Zoran avatar
    9 posts
    Member since:
    Oct 2012

    Posted 19 Aug 2020 Link to this post

    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>
        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?

  2. Eyup
    Admin
    Eyup avatar
    4072 posts

    Posted 24 Aug 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top