Listview Selection

[Jim]

Hello,
I have a Telerik ListView inside a partial view that is rendered inside a kendo Window in modal mode.  Using MVC5.

The listview is setup to query the controller for records (which are image files).

In the edit view for my model, and the user can select an image to be part of the model's data.  I want them to select from maybe 5000 images on our system.  So the Listview popup starts with 6 visible images (pagesize is 6) and they can cycle via paging to the image they want to select.

This all works fine.

Currently when the listbox is displayed, (after a button click on view), it always shows the very first 6.  Consider case where user is editing record 10, and that record has already specified it uses pictureId 50 (pictureID is foreign key to picture table).  I want the listbox to show Item 50 in its selected page, but allow the user to page back to other pages, or page forward.  The page backs/forwards will do the datarequests as needed.

I added a "save" button to the popup window so i could test out code.  My listview is named "imageListView".
In my sample, i just wanted to choose item 9, as an example. 
If i first navigate to page 2 so item 9 is shown on the listview, then the below code works fine.
but if i am on page 1 (items 1-6 shown), the get(9) call returns null.

how can i figure out what page to go to prior to actually loading the items on the page?

$("#save").click(function () {

    var lv = $("#imageListView").data("kendoListView");

    var model = lv.dataSource.get(9);

    var index = lv.dataSource.indexOf(model);

     var pg = Math.floor(index / lv.dataSource.pageSize()) + 1;

    lv.dataSource.page(pg);
}

[Jim]

Oh here is the code for my listview creation,

@(Html.Kendo().ListView<KbEditor.Models.ImageViewModel>(Model)
    .Name("imageListView")
    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("GetImages", "Questions"));
        dataSource.PageSize(2);
        dataSource.Model(model =>
            {
                model.Id(i => i.pictureID);
            });
    }) // DataSource configuration. It will be used on paging.
    .Pageable(pageable => pageable
        .PageSizes(new int[] { 1, 10, 50 })
        .ButtonCount(6))
    .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single))
    .Events(events => events.Change("onChange").DataBound("onDataBound"))
)

and the template:
<script type="text/x-kendo-tmpl" id="template">
    <div class="image">
        @{ var str = @Url.Action("GetImageContent", "Questions") + "/#= pictureID #"; }
        <img src='@str' alt="#:pictureID#" />
        <h3>#:pictureID#</h3>
    </div>
</script>

[Jim]

and finally the view model:

public class ImageViewModel
{
    public int pictureID { get; set; }
    public byte[] picture1 { get; set; }
}

[Jim]

ok, one other thing i tried....

$("#imageListView").data("kendoListView").dataSource.query({ page: 3, pageSize: 2 });
$("#imageListView").data("kendoListView").select(1);

i used this code and it properly jumps to page 3, given a page size of 2, it shows items 5 and 6 from my datasource.

but the select(1) statement does not actually cause anything to be selected in the listbox.  Is the select parameter the index within the currently viewed page of the listbox?  so select(1) would select the first item viewed in listbox (which is id5 in my database).

[Kiril Nikolov]

Hello Jeff,

The select() method does support a numeric parameter, but supports jQuery element. As for the paging - you cannot get an element that is not yet present in the dataSource, in your case with the server paging enabled.

Regards,
Kiril Nikolov
Telerik

 

 

[Jim]

Ok, so in my listbox, if i know i want an item with database key id = 73 selected initially, how do i code the listbox to load the datasource with data item #73 upon the first viewing of the listbox?  It would seem i need to modify the datasource request that is sent to the controller, so that it can return the json with that particular id.....but the id is the id of my data object, not the listbox item id....so i would still need to know how to get to whatever page item #73 is located on.

in short, i have a listbox that will show 1000s of items (but only say 6 per page), and when it first pops up i may wnat it already showing items 73-79, with item 73 being shown as selected. 
how do i do it?

[Nikolay Rusev]

Hello Jeff,

You could handle dataBound event of the widget, iterate over the items and select the item if it matches the criteria.

Code snippet

<script>
      var KEY_TO_FIND = 8;  
      
      function dataBound() {    
        var widget = this;
        widget.items().each(function(_, item) {
          var data = widget.dataItem(item);

          if (data.ProductID == KEY_TO_FIND) {
            widget.select(item);
          }
        });
                
        //remove this handler
        widget.unbind("dataBound", arguments.callee);
      }
</script>

Runnable example - http://dojo.telerik.com/@rusev/UFAzi

Regards,
Nikolay Rusev
Telerik