Listview Selection

7 posts, 0 answers
  1. Jim
    Jim avatar
    18 posts
    Member since:
    Dec 2014

    Posted 17 Feb 2015 Link to this post

    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);
    }

  2. Jim
    Jim avatar
    18 posts
    Member since:
    Dec 2014

    Posted 17 Feb 2015 Link to this post

    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>
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jim
    Jim avatar
    18 posts
    Member since:
    Dec 2014

    Posted 17 Feb 2015 in reply to Jim Link to this post

    and finally the view model:
    public class ImageViewModel
    {
        public int pictureID { get; set; }
        public byte[] picture1 { get; set; }
    }
  5. Jim
    Jim avatar
    18 posts
    Member since:
    Dec 2014

    Posted 17 Feb 2015 in reply to Jim Link to this post

    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).
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 19 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Jim
    Jim avatar
    18 posts
    Member since:
    Dec 2014

    Posted 19 Feb 2015 in reply to Kiril Nikolov Link to this post

    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?
  8. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 23 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready