This is a migrated thread and some comments may be shown as answers.

two way binding for selected item in listview

9 Answers 311 Views
ListView
This is a migrated thread and some comments may be shown as answers.
David Ocasio
Top achievements
Rank 2
Veteran
David Ocasio asked on 06 Jan 2014, 06:06 PM
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()])
            },
        }
    );

9 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 07 Jan 2014, 12:21 PM
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!
0
David Ocasio
Top achievements
Rank 2
Veteran
answered on 07 Jan 2014, 02:35 PM
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.
0
Alexander Valchev
Telerik team
answered on 07 Jan 2014, 03:20 PM
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!
0
David Ocasio
Top achievements
Rank 2
Veteran
answered on 09 Jan 2014, 08:47 PM
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
0
Alexander Valchev
Telerik team
answered on 13 Jan 2014, 09:45 AM
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!
0
David Ocasio
Top achievements
Rank 2
Veteran
answered on 17 Jan 2014, 02:07 PM
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
    }
});
0
Alexander Valchev
Telerik team
answered on 17 Jan 2014, 04:01 PM
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!
0
David Ocasio
Top achievements
Rank 2
Veteran
answered on 17 Jan 2014, 06:09 PM
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", {})
            },
 
        }
    );

0
Accepted
Nikolay Rusev
Telerik team
answered on 21 Jan 2014, 03:51 PM
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!
Tags
ListView
Asked by
David Ocasio
Top achievements
Rank 2
Veteran
Answers by
Alexander Valchev
Telerik team
David Ocasio
Top achievements
Rank 2
Veteran
Nikolay Rusev
Telerik team
Share this question
or