two way binding for selected item in listview

10 posts, 1 answers
  1. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 06 Jan 2014 Link to this post

    Is there a way to do two way binding for the selected item between a view model and a list view.

    Currently I get the selected item by doing like below
    but I also want if I change the selected item in the ViewModel for it to change in the view.
    data-bind="source: MenuItems,
        visible: isVisible,
        events: {change: SectionSelect,}"

    var AdminPanelViewModel = kendo.observable(
            {
                // data source
                MenuItems: new kendo.data.DataSource(
                {
                   data: [
                            { title: "Alerts", URI: "j", className: "k-widget MainMenuItem_Bogus" },
                            { title: "Nodes", URI: "j", className: "" },
                            { title: "Map", URI: "j", className: "" },
                         ],
                }),
     
                SelectedMenuItem: null,
     
                // visible settings
                isVisible: true,
                selectable: "single",
     
                SectionSelect: function (e) {
                    this.set("SelectedMenuItem",e.sender.dataSource.view()[e.sender.select().index()])
                },
            }
        );

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Jan 2014 Link to this post

    Hi David,

    I am afraid that your question is a bit unclear. Could you please explain in more details what is the behavior that you would like to achieve?
    Can you please check this code library and see if the approach demonstrated in it fits in your case? Note, although that the sample project is related to Kendo Grid, the same approach is applicable for ListView.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 07 Jan 2014 Link to this post

    I reviewed the code but the question persists.

    I can through the UI select an item and it is reflected in the viewmodel.
    but how can I change the selected item in the  viewmodel.and have it reflected in the UI

    In your code you set the selected item in the viewmodel using this code:
    change: function (e) {
        var model = this.dataItem(this.select());
        validator.hideMessages();
        viewModel.set("selected", model);
    }
    But I don't see how you can set the selected item from the viewmodel:
    there is no binding for the selected property
    so changing the following is not reflected in the UI/view
    selected: {},

    what am I missing
    any help would be appreciated.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Jan 2014 Link to this post

    Hi David,

    Thank you for the additional information.

    I now understood what you actually are trying to achieve. The scenario involves custom MVVM binding.
    Please check the following example:

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 09 Jan 2014 Link to this post

    Does that example work with the list view .

    I laid it in but it complains about the bind method.
    Unable to get property 'bind' of undefined or null reference
    The getKendoGrid() is not returing anthing.
    Which makes sense to me since it is a listview (lol)

    See  snapshot below attached

    thanks
    dco
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 13 Jan 2014 Link to this post

    Hello David,

    Please try to use getKendoListView() method instead of getKendoGrid().

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 17 Jan 2014 Link to this post

    Still not working
    but one step closer

    I believe it is failing on the clearselection method
    please see attached screenshot..

    thanks
    dco
    kendo.data.binders.widget.selectedRow = kendo.data.Binder.extend({
        init: function (widget, bindings, options) {
            var that = this;
            //call the base constructor
            kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
     
            //listen for the change event of the widget
            $(that.element).getKendoListView().bind("change", function (e) {
                that.change(e); //call the change function
            });
        },
        refresh: function () {
            var that = this,
                value = that.bindings["selectedRow"].get(), //get the value from the View-Model
                grid = $(that.element).getKendoListView(),
                row;
     
     
            if (value) {
                row = grid.items().filter("tr[data-uid='" + value.uid + "']");
            }
     
            debugger
     
            if (row && row.length) { //update the widget
                grid.select(row);
            } else {
                grid.clearSelection();
            }
     
        },
        change: function (e) {
            var grid = $(this.element).getKendoListView(),
                selectedRow = grid.select(),
                item;
     
            item = grid.dataSource.getByUid(selectedRow.data("uid"));
            this.bindings["selectedRow"].set(item); //update the ViewModel
        }
    });
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 17 Jan 2014 Link to this post

    Hi David,

    Could you please confirm that the selectable option of the widget is turned on in the configuration options of the widget? If it is not set to true the sortable property will be null.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 17 Jan 2014 Link to this post

    Yes it is set .
    I can use it in the UI.
    It does seem that the data-selectable attribute does not work though

    So I turn it on in the document ready event.
    If that is the problem how then should I configure it.

    The List-View is instantiated in the main layout through a template.

    thanks
    David Charles Ocasio

    // Load Layout:
    var LayoutName = "Main"
    var LayoutTemplateName = LayoutName + "LayoutTemplate"
    var layout = new kendo.Layout(LayoutTemplateName, { model: AdminPanelViewModel })
    layout.render($("#" + LayoutName));

    <script id="MainLayoutTemplate" type="text/x-kendo-template">
        <table class="tablayout" >
            <tr class="trlayout" >
                <td class="tdlayout tdheader" colspan="2" ">
                    <image src='images/inovlogo2.gif' class="i-logo" ></image>
                </td>
            </tr>
            <tr class="trlayout">
                <td class="tdlayout tdnav">
                    <div id="listview" data-role="listview"
                        data-template="MainMenuItemTemplate"
                        data-edit-template="MainMenuItemTemplate"
                        data-selectable: "single",
                        data-bind="source: MenuItems,
                                    selectedRow: SelectedMenuItem,
                                    visible: isVisible,",
                        style: "height:Auto"
                        >
                    </div>
                </td>
                <td id="content" class="tdlayout tdcontent">
                </td>
            </tr>
            <tr class="trlayout">
                <td id="footer" class="tdlayout tdfooter" colspan="2" >
                </td>
            </tr>
        </table>
    </script>
    <script type="text/javascript" id="script_Events">
        // ready function for document
        $(document).ready(function () {
            // listview setup
            $("#listview").kendoListView({ selectable: "single" })
     
            document.all("Main").childNodes[0].className="tablayout" // let div expand to 100% of layout
     
            //$("#Main")
     
            initPeriodicViewModel();
        });
     
        // resize event for window
        $(window).resize(function () {
            resizeGrid();
        });
     
    </script>
    var AdminPanelViewModel = kendo.observable(
            {
                // data source
                MenuItems: new kendo.data.DataSource(
                {
                   data: [
                            { title: "Alerts", URI: "j", className: "k-widget MainMenuItem_UnSelected", value: eMenu.Alerts },
                            { title: "Nodes", URI: "j", className: "k-widget MainMenuItem_UnSelected", value: eMenu.Nodes },
                            { title: "Map", URI: "j", className: "k-widget MainMenuItem_UnSelected" , value: eMenu.Map },
                         ],
                }),
     
                selectable: true,
                SelectedMenuItem: {},
                clear: function () {
                    this.set("SelectedMenuItem", {})
                },
     
            }
        );

  11. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 21 Jan 2014 Link to this post

    Hello David,

    Here is an updated example based on my colleague jsbin using ListView widget: http://jsbin.com/uGogeFE/1/edit

    Selection seems to be working correctly.

    Regards,
    Nikolay Rusev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready