two way binding for selected item in listview

[David Ocasio]

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()])
            },
        }
    );

[Alexander Valchev]

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

[David Ocasio]

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.

[Alexander Valchev]

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:

• http://jsbin.com/IwoNiNE/2/edit
  
  

Regards,
Alexander Valchev
Telerik

[David Ocasio]

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

[Alexander Valchev]

Hello David,

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

Regards,
Alexander Valchev
Telerik

[David Ocasio]

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

[Alexander Valchev]

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

[David Ocasio]

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", {})
            },

        }
    );

[Nikolay Rusev]

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