Databind breaks after first change

4 posts, 0 answers
  1. Brian Roth
    Brian Roth avatar
    136 posts
    Member since:
    Oct 2005

    Posted 30 Jul 2015 Link to this post

    I'm working with ASP.NET and using a Kendo listview. I have a checkbox within my listview that is bound to the datasource. The first time the checkbox is checked the datasource is updated. If I uncheck the checkbox, the datasource is not updated. In Chrome, I manually bound the checkbox and datasource after the first check and was able to successfully rebind them. is anyone able to determine what is breaking my bindings?

     

     Here is my listview template:

    <script type="text/html" id="buyindividualduebacktemplate">
        <div class="row dueback-list-item">
            <div class="col-xs-3"><b>@Html.Evention().Resource(Balance)</b> #=kendo.toString(Balance,"c")# </div>
            <div class="col-xs-3"><b>@Html.Evention().Resource(Drop)</b> \#: #=DepositEnvelopeId#</div>
            <div class="col-xs-3"><b>@Html.Evention().Resource(Date)</b><span>: #=DateString#</span></div>
            <div class="col-xs-3 right"><input type="checkbox" data-bind="checked:Buy" /></div>
        </div>
    </script>

     

    Here is my listview widget:

       @(Html.Kendo().ListView<Evention.Models.BuyIndividualDuebackViewModel>()
            .Name(listviewName)
            .TagName("div")
            .ClientTemplateId("buyindividualduebacktemplate")
            .DataSource(datasource =>
                    datasource.Batch(true)
                        .Read(read =>
                            {
                                read.Url(Url.Action(MVC.Employees.BuyIndividualDueback.ActionNames.Read, MVC.Employees.BuyIndividualDueback.Name));
                                read.Data(@<text>
                                    function(e) {
                                        e.employeeid = @this.Model.EmployeeId;
                                        e.date = '@(this.Model.Date.HasValue ? this.Model.Date.Value.ToShortDateString() : "")';
                                    }
                                </text>);
                            })
                        .Update(update =>
                        {
                            update.Url(Url.Action(MVC.Employees.BuyIndividualDueback.ActionNames.Update, MVC.Employees.BuyIndividualDueback.Name));
                            update.Data(@<text>
                                    function(e) {
                                        e.signature = $('#sigpad_Signature').signaturePad().getSignatureString();
                                    }
                                </text>);
                        })
                        .Model(m =>
                        {
                            m.Id(obj => obj.Id);
                            m.Field(obj => obj.DateTimeFields);
                            m.Field(obj => obj.DepartmentId);
                            m.Field(obj => obj.Amount);
                            m.Field(obj => obj.AmountToBuy);
                            m.Field(obj => obj.Balance);
                            m.Field(obj => obj.Buy);
                            m.Field(obj => obj.DateString);
                            m.Field(obj => obj.DepositEnvelopeId);
                        })
                        .Events(dsevent =>
                        {
                            dsevent.Change(@<text>
                                    function(e) {
                                        if (e.action == "itemchange" && e.field == "Buy" && e.items && e.items.length) {
                                            if (e.items[0].Buy == true) {
                                                 e.items[0].AmountToBuy = e.items[0].Balance;
                                            }
                                            else {
                                                 e.items[0].AmountToBuy = 0;
                                            }  
                                        }
                                    }
                                </text>);
                            dsevent.Sync(@<text>
                                    function(e) {
                                        javascript:history.go(-1);
                                    }
                                </text>);
                        })
                        )
             .Events(e =>
             {
                 e.DataBound("listview_databound");
             }
             )
        )

     

    And my databound function:

        function listview_databound(e) {
            var target = e.sender.element;
            target.children().each(function (index, item) {
                var dataItem = e.sender.dataItem(item);
                kendo.bind(item, dataItem);
            });
        };​

  2. Brian Roth
    Brian Roth avatar
    136 posts
    Member since:
    Oct 2005

    Posted 30 Jul 2015 in reply to Brian Roth Link to this post

    More useful information: I placed this code in my listview template: 

        <script type="text/javascript">
                alert("bind problem");
            </script>

    I found that the template is being regenerated after changing the datasource, which in turn breaks the binding.

  3. Kendo UI is VS 2017 Ready
  4. Brian Roth
    Brian Roth avatar
    136 posts
    Member since:
    Oct 2005

    Posted 31 Jul 2015 Link to this post

    I cam up with the solve. Kendo's refresh method the listview was breaking the bindings. So I overrode the refresh method to use my method if the "suppressDisplayRefresh" method is true. My code below.

         // List view overrides
        if (kendo.ui.ListView) {

            // Shiv in our own refresh function to support MVVM binding on display template items. If we don't do this, Kendo will replace the content of the display item
            //  when that item changes. This will cause all MVVM bindings to get lost and hose things up. To enable this feature, just set "suppressDisplayRefresh" = true
            //  on the list view options.
            var defaultRefresh = kendo.ui.ListView.fn.refresh;

            kendo.ui.ListView.fn.options.suppressDisplayRefresh = false;
            kendo.ui.ListView.fn.refresh = function (e) {
                var that = this,
                    data,
                    item;

                if (e && that.options.suppressDisplayRefresh && e.action === "itemchange") {
                    data = e.items[0];
                    item = that.items().filter("[" + kendo.attr("uid") + "=" + data.uid + "]");

                    that.trigger("itemChange", {
                        item: item,
                        data: data
                    });

                    return;
                }

                defaultRefresh.call(that, e);
            };
        }

     

  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 04 Aug 2015 Link to this post

    Hello Brian Roth,

     

    Indeed the ListView widget, as well as other data-bound widgets such as the Grid, will repaint on change of a field.

     

    There isn't currently any other way to prevent rebinding except the implementation you have.

     

    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