Grid Local data binding by ViewBag data not working

1 Answer 429 Views

Grid

CHIHPEI asked on 03 Oct 2022, 03:43 AM

Scenario:

I activates the javascript ajax request by clicking a button client side,

then the request will retreive data from server side and pass data to view by "ViewBag",

I've already checked that the data were passed into view successfully,

but the grid didn't show up,

However I haven't got any error message while debugging in Visual studio or Browser Dev tool.

To be mentioned, my ViewBag passed in a View Model,

which there are "IEnumearable<SubModel>" models in it.

So what actually would bind with grid is the data in sub models.

What I've tried:

1. Testing Grid without giving data => the grid showed up without data

2. Grid with data from ViewBag => ends up with entire grid not showing

(With the first test, I'm guessing it is the data binding error makes the entire grid not showing)

Code:

MyViewModel.cs

public class MyViewModel
    {   
        //What really binds to the grid，Ex: Model1
        public IEnumerable<MyModel1> Model1 { get; set; }
        public IEnumerable<MyModel2> Model2 { get; set; }
        public IEnumerable<MyModel3> Model3 { get; set; }
    }

MyCshtml.cshtml

@model IEnumerable<MyViewModel>

@{
    //ViewModel with sub Models in it passed into view by ViewBag
    var Datas = (MyViewModel)ViewBag.MyViewModel;
}

<head>
    <script src="~/QueryData/js/MyData.js"></script>
</head>

<body>
    @(Html.Kendo().Grid<MyModel1>(Datas.Model1)
                .Name("my-grid")
                .Columns(columns =>
                {
                    columns.Bound(c => c.Name).Title("Name").Width(30);
                    columns.Bound(c => c.ReadData).Title("Data").Width(30);
                })
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .HtmlAttributes(new { style = "height:500px;" })
                .DataSource(dataSource => dataSource        
                    .Ajax()
                    .PageSize(5)
                    .ServerOperation(false)        
                )
    )  
</body>

Reference: ASP.NET Core Local Data Binding

CHIHPEI

commented on 03 Oct 2022, 03:59 AM

Looking into MyCshtml.cshtml again,

I've used the @model and referenced "IEnumerable<MyViewModel>",

However, what really binds with the Grid is the sub model in MyViewModel.

Maybe its the reason why the Grid was not showing?

If it is, is there any alternative work arrounds?

My final goal it to pass sub model into a partial view with grid in it, wich renders on MyCshtml.cshtml

1 Answer, 1 is accepted

Accepted

answered on 05 Oct 2022, 03:12 PM

TelerikAspNetCoreApp91.zip

Hello CHIHPEI,

Thank you for the extensive information about your scenario.

I have created a demo project by following the described steps, and it appears that the Grid is loaded as expected at my end. I am attaching the sample application for your reference.

The demo works as follows:

"Index" View - when a button is clicked, an AJAX request is sent to the "GetGrid" Action method.
Controller - the "GetGrid" method populates the data in the ViewBag.MyViewModel, and passes the IEnumerable<MyViewModel> collection to the Partial View "MyCshtml.cshtml".
"MyCshtml" View - initialize the Grid configured for local data binding.

Would you please review it and let me know if it works as per your requirements?

Hopefully, it will help you to resolve the issue. Looking forward to your feedback.

Regards, Mihaela Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

CHIHPEI

commented on 07 Oct 2022, 12:32 AM

Hi Mihaela,

This is exactly what I'm looking for,

which also solved my further problem,

I was just trying to embedd the partial grid into tab strip,

and it works like a charm.

Btw,

In the demo project you provided,

You've passed the data with ViewBag,

and also passed the model while returning to partial,

is this just a demo of an alternative to pass data from controller to view?

Thanks for the quick response and the great demo

ChihPei

Mihaela

commented on 11 Oct 2022, 07:55 AM

Hello CHIHPEI,

Thank you for your feedback. I am glad that the prepared demo was helpful to you :)

Indeed, you could pass the Model data either to the View or with ViewBag. It is up to your preference.

CHIHPEI

commented on 28 Oct 2022, 03:38 AM

Hi Mihaela,

Thanks again for the quick reply

ChihPei