Detach and appendTo in ListView Item and Databind

[rlapao]

Hi,

I have a selectable list view where, on select, I want to append a DIV that is rendered elsewhere in the page, that I'm getting using the jQuery detach function.

The div has the items details and is bound to a property from my ViewModel (observable).

Since I'm having some trouble, anyone could share if this is a viable way?

I succeed having the elements appended, but it seam to loose the data-bind to the ViewModel.

Is this supposed to happen?

Thanks in advance,
Ricardo

[Alexander Valchev]

Hi Ricardo,

I am afraid that the provided information is not sufficient enough in order to detect what is causing this behaviour. Is it possible to provide a small but runnable example ( probably in jsFiddle ) that reproduces the problem? Thus way I would be able to examine your case in details and if possible to give you guidelines how to resolve it.

Kind regards,
Alexander Valchev
the Telerik team

[rlapao]

Hi Alexander,

I should have updated this thread, because I manage to get my problem solved.
I was doing detach to a div with a data-bind property, which was messing things.

Another thing that was also troubling me, was the the select in the listview, but I ended up creating a property in the datasource for the selected item, and managing it manually, since the lisview was loosing the selection, due to a change via "set" on the datasource, without passing in the 'change' event with -1.

Just for the sake of curiosity, below is the sample code I was using:

<div id="listview" data-role="listview" data-selectable="true" data-bind="source: listSource, events: { change: onChange, mousedown: onMouseDown }" data-template="template"></div>

    <span id="ahah" style="display: none;">

        <span data-bind="text: test, events: { mousedown: onMouseDown }">123</span>

        <input id="fiel" type="text" data-bind="value: test, events: { mousedown: onMouseDown }" />

        <div  data-bind="events: { mousedown: onMouseDown }">

            <div id="listview2" data-role="listview" data-selectable="true" data-bind="source: listSource2" data-template="template3"></div>

        </div>

    </span>

 

    <script type="text/x-kendo-tmpl" id="template">

        <div class="customers" id="x${Id}">

            <dl>

                <dt>First Name</dt>

                <dd>${FirstName}</dd>

                <dt>Last Name</dt>

                <dd>${LastName}</dd>

             </dl>

              

       </div>

       <div id="xpto-${Id}"></div>

    </script>

     

    <script type="text/x-kendo-tmpl" id="template3">

        <div class="customers2">

            ${FirstName}:${LastName}

       </div>

    </script>

     

    <script type="text/x-kendo-tmpl" id="template2">

         

        <span data-bind="text: test">123</span>

     

    </script>   

 

    <input type="button" id="doBut" value="do"/>

    <input type="button" id="doBut2" value="do2"/>

     

    <script type="text/javascript">

 

        $(function () {

            kendo.ui.ListView.fn.options.selectable = false;

            kendo.ui.ListView.fn.options.autoBind = false;

 

            var viewModel = kendo.observable({

                test: "asdasdasd",

                onChange: function () {

                    console.log($("#listview").data("kendoListView").select().index());

                },

                onMouseDown: function (e) {

 

                    console.log("sdfsdf");

                    console.log($("#listview").data("kendoListView").select().index());

                    console.log($("#listview2").data("kendoListView").select().index());

                    //e.preventDefault();

                    e.stopPropagation();

                },

                listSource: [

                    { Id: 1, FirstName: "First Name", LastName: "Last Name" },

                    { Id: 2, FirstName: "First Name2", LastName: "Last Name2" },

                    { Id: 3, FirstName: "First Name1", LastName: "Last Name1" }

                ],

                listSource2: [

                    { Id: 1, FirstName: "jusue", LastName: "macale" },

                    { Id: 2, FirstName: "pimpim", LastName: "pririmpim" },

                    { Id: 3, FirstName: "larala", LastName: "tata" }

                ]

            });

 

 

 

            kendo.bind(document.body.children, viewModel);

 

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

                var temp = kendo.template($("#template2").text());

                $("#xpto-1").html(temp(viewModel));

 

                var x = $("#ahah").detach();

                x.appendTo("#xpto-2");

 

 

                $("#x2").remove();

 

                $("#ahah").show();

            });

 

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

                viewModel.get("listSource")[1].set("FirstName", "4535345345");

                $("#listview").data("kendoListView").select(1);

            });

        });

 

    </script>

Thanks a lot for your reply,
Ricardo