ScrollView Databinding Error

[FranckSix]

Hi

I'm having trouble getting the DataBinding to work on the ScrollView control here is my code:

Razor view

      @(Html.Kendo().ScrollView()
         .Name("svMessages")
         //Afficher la pagination si plus d'un message.
         .EnablePager(Model.NbMessages > 1)
         .DataSource(d => d.Read(r => r.Action("AfficherMessagesAccueil", "Account"))))

Controller

   [AllowAnonymous]
   [HttpGet]
   public ActionResult AfficherMessagesAccueil([DataSourceRequest] DataSourceRequest request)
   {
      var messages = new List<MessageAccueil>();
      return Json(messages.ToDataSourceResult(request));
   }

I got this error message

1. Request URL:
   http://~/Account/AfficherMessagesAccueil
2. Request Method:
   POST
3. Status Code:
   404 Not Found
4. Remote Address:
   [::1]:80
5. Referrer Policy:
   strict-origin-when-cross-origin

After I saw that Datasource send POST request ???

I changed my controler method to

   [AllowAnonymous]
   [HttpPost]
   public ActionResult AfficherMessagesAccueil([DataSourceRequest] DataSourceRequest request)
   {
      var messages = new List<MessageAccueil>();
      return Json(messages.ToDataSourceResult(request));
   }

And I got same error!

What I doing wrong ?

[Ivan Danchev]

Hi FranckSix,

To bind the ScrollView and visualize the data:

1. Keep the [HttpPost] annotation for the read action and

2. Configure the ScrollView, as shown below:

@(Html.Kendo().ScrollView()
	.Name("svMessages")
	//Afficher la pagination si plus d'un message.
	.TemplateId("scrollview-template")
	.DataSource(d => d
		.Custom()
		.Type("aspnetmvc-ajax")
		.Transport(transport => transport
			.Read(read => read.Action("AfficherMessagesAccueil", "Account"))
		)
		.Schema(s => s.Data("Data").Total("Total"))
		.PageSize(1)
	)
	.HtmlAttributes(new { style = "height:300px; width:400px" })
)

<script id="scrollview-template" type="text/x-kendo-template">
    <p style="border: 2px solid blue; color: red;">#= data.Name #</p>
</script>

The additions compared to your declaration are highlighted.

Several things to note:

1. A template is used to visualize the data. You can customize the content of the template and its appearance according to your needs.

2. If you need to access a field in the data, you can do so as shown with the "Name" filed. Instead of "Name" which is exemplary, use the actual properties you have in the model.

3. A custom DataSource is configured.

4. The size of the ScrollView is set through the HtmlAttributes option.

Regards,
Ivan Danchev
Progress Telerik

[FranckSix]

Hi Yvan,

I applied all the suggested changes in my view, I still get the 404 error. I think it's the sigature of my controller method that is not good. Is it okay to expect a DataSourceRequest parameter? Is there a complete example of the control implementation in MVC with a Datasource?

Thanks!

[Ivan Danchev]

Hi FranckSix,

Here's how the action should look like:

[AllowAnonymous]
[HttpPost]
public ActionResult AfficherMessagesAccueil([DataSourceRequest] DataSourceRequest request)
{
    List<OrderViewModel> data = new List<OrderViewModel>()
    {
        new OrderViewModel() { ID = 1, Name = "Anna"   },
        new OrderViewModel() { ID = 2, Name = "Bob"   },
        new OrderViewModel() { ID = 3, Name = "Daniel"   },
        new OrderViewModel() { ID = 4, Name = "Charlie"   },
    };

    return Json(data.ToDataSourceResult(request));
}

I've tested it with the ScrollView I posted in my previous reply and it worked without errors.