ListView not populated

[Martin Kelly]

Hi,
I have the following code which is far as I can tell as per the documentation and examples but the listview always appears empty.
My View is as follows

@model iProjX.Models.RolesModel

@using iProjX.Models;

 

<script type="text/x-kendo-tmpl" id="rolesList">

    <h3> ${Id} ${Description}</h3>

</script>

 

<div id="listView"></div>

<div class="k-pager-wrap">

    <div id="pager"></div>

</div>

 

 

<script type="text/javascript">

    var projectId = @(Html.Raw(Model.ProjectId));

 

    var sharedDataSource = new kendo.data.DataSource({

        transport: {

                read: {

                    url: "http://localhost:1278/Project/getRoles",

                    type: "POST"

                }

        },

        change: function (data) {

            debugger;

            alert("success ");

        },

        error: function (xhr, error) {

            debugger;

            alert("error ");

        },

        pageSize: 3

    });

 

    //Configure the List

    $("#listView").kendoListView({

        pageable: true,

        selectable: true,

        navigatable: true,

        template: kendo.template($("#rolesList").html()),

        dataSource: sharedDataSource

    });

 

    //Configure the Pager

    $("#pager").kendoPager({

        dataSource: sharedDataSource

    });

      

</script>

 

And my controller contains

public JsonResult getRoles([DataSourceRequest] DataSourceRequest request)

{

    var projectId = 113;

    using (LocationRepositry _locationRepository = new LocationRepositry())

    {

        IEnumerable<myLocation> Locations = _locationRepository.getByProjectId_Simple(projectId).Select(p =>     new     myLocation()

        {

            Id = p.Id,

            Description = p.Description

        }).ToList();

        return Json(Locations.ToDataSourceResult(request));

     }

}

And myLocation is

public class myLocation

{

    public myLocation() {}

 

    public Int64 Id { get; set; }

    public String Description { get; set; }

}

Now, with this implementation my controller function getRoles is hit and I can see the data returned from the server via browser tools as below.

Data returned from server
{"Data":[{"Id":132,"Description":"Location 1"},{"Id":133,"Description":"Location 2"},{"Id":134,"Description":"Location 3"},{"Id":135,"Description":"Location 4"}],"Total":4,"AggregateResults":null,"Errors":null}

The change function on the datasource is then subsequently hit but the data parameter returned contains an empty set of Data items as below (taken from visual studio immediate window).

?data

{...}

    items: []

    sender: {...}

    preventDefault: function(){g=!0}

    isDefaultPrevented: function(){return g}

If I change my controller to return without using the ToDataSourceResult extension it actually will work.
    return Json(Locations);

However, is this then the correct implementation or have I done something else wrong? And would this have an effect on how paging works?

Any help would be much appreciated.
Thanks

 

 

 

[Nikolay Rusev]

Hello Martin,

Adding the following to the DataSource config will eventually make it work:

schema: {
 data: "Data" //<-- this is the field from the response which contains the actual data
 total: "Total" //<-- this is the total count of items in the response
}

However why don't you use the Kendo ListView wrapper for MVC? You are already using the server part of Kendo UI MVC infrastructure anyways.

Greetings,
Nikolay Rusev
the Telerik team

[Martin Kelly]

Hi Nikolay,
Thanks for the info, this got it working for me.
The reason I am not using the mvc wrappers is that I can find hardly any documentation on how to use them. I tried to use these first but was unable to get very far. At least when I have a problem when using straight javascript, I am able to look for similar examples and explanations which are always in javascript and never use the wrappers.
For example using the wrapper, how can I represent your answer above, or define a datasource model with a number of fields or access the parameterMap in order to disable the load icon. There is no documentation that I can find showing any of this.
As I have only started using the Kendo-UI (trialing with a view to purchase), the lack of any real documentation is a big problem for me and am finding the experience very frustrating.

Great product, shame about the documentation

Thanks,
Martin.

[Marcelo]

Hi.

I'm having some troubles using Kendo ListView wrapper. I followed the documentation about ListView Binding (http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/listview/binding), but my ListView comes empty.

View:

@(Html.Kendo().ListView<PaineisGerenciaisMVC3.Models.MenuCubo>()
    .Name("ListView")
    .TagName("div")
    .ClientTemplateId("menuListTemplate")
    .DataSource(dataSource => dataSource
        .Model(model => 
        {
            model.Id("Codigo");
            model.Field("Descricao", typeof(string));
        })
        .Read(read => read
            .Action("LoadMenuLista", "Cubo")
        )
    )
)

Controller:

public ActionResult LoadMenuLista([DataSourceRequest]DataSourceRequest request)
{
    var lista = carregaMenu();

    DataSourceResult result = lista.ToDataSourceResult(request);
    return Json(result);
}

Template:
<script type="text/x-kendo-tmpl" id="menuListTemplate">
    <h3>${Descricao}</h3>
</script>

Any idea to solve this problem?
Thanks.

[Martin Kelly]

Hi Marcelo,

Try changing you model field definition to the following as this is how I defined it and it worked
model.Field(f => f.Descricao)

Does your controller function get hit? Check you browser tools, network tool (I find chrome very good) to see if there were any errors on the call to the controller. Also check the console.

Also make sure the script "kendo.aspnetmvc.min.js" is correctly referenced and loaded.

Hope this helps,
Martin

[sapan]

Hi

I have written following code inside the View.

Razor View:
<div id="wrapper">
            <div class="SettingArea">
                @foreach (ModuleLinkViewModel moduleQuickLink in ViewBag.ModuleLinks as List<ModuleLinkViewModel>)
                {
                    <script type="text/x-kendo-tmpl" id="template">
                        <dl>
                             <div id="mainareaforsettingicons">
                                <div id="trans_bg">
                                    <div id="white_bg">
                                        <div id="settingicon">
                                            <dd><a href="@(Url.Content("~/" + (moduleQuickLink.Link)))" target="_self">
                                    <img src="@(Url.Content("~/Content/themes/default/images/Settings/") + (moduleQuickLink.Icon))"  alt="@(moduleQuickLink.ToolTip)" border="0"/></a></dd>
                                        </div>
                                    </div>
                                </div>
                                <div id="reflaction">
                                    <dt><label>@(moduleQuickLink.Title)</label></dt>
                                </div>
                            </div>
                        </dl>                        
                    </script>                 
                }
                <div id="Configuration"></div>
                @{(Html.Kendo().ListView<ModuleLinkViewModel>()
                    .Name("Configuration")
                    .TagName("div")
                    .Pageable()
                    .ClientTemplateId("template")
                    .DataSource(dataSource => dataSource
                        .Read(read => read.Action("Read", "Configuration"))
                        .PageSize(20)
                        )
                ).Render();}
            </div>
            <div id="footer_line_grey">
            </div>
            <div id="footer_line_white">
            </div>
        </div>

Controller :
 public ActionResult Index()
        {
            IEnumerable<ModuleLinkViewModel> moduleLinks = this.GetAllConfigSettings(string.Empty);
            ViewBag.ModuleLinks = moduleLinks;

            return this.View();
        }

        [OutputCache(Duration = 0, VaryByParam = "None")]
        public ActionResult Read([DataSourceRequest]DataSourceRequest request, string searchSettingKeyword)
        {
            IEnumerable<ModuleLinkViewModel> moduleLinks = this.GetAllConfigSettings(searchSettingKeyword);
            ViewBag.ModuleLinks = moduleLinks;


            return this.Json(moduleLinks.ToList().ToDataSourceResult(request));
        }

Now the problem is that when I do run the solution I could not able to see the ListView appearing on the page. But as and when I am seeing it's View Source I do able to see that all the necessary rows are appearing inside.

Can anyone please guide where am I doing mistake?

Sapan