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

Databind breaks after first change

3 Answers 84 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Brian Roth
Top achievements
Rank 1
Brian Roth asked on 30 Jul 2015, 10:05 PM

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);
        });
    };‚Äč

3 Answers, 1 is accepted

Sort by
0
Brian Roth
Top achievements
Rank 1
answered on 30 Jul 2015, 10:19 PM

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.

0
Brian Roth
Top achievements
Rank 1
answered on 31 Jul 2015, 05:51 PM

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

 

0
Nikolay Rusev
Telerik team
answered on 04 Aug 2015, 07:51 AM

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!
 
Tags
MVVM
Asked by
Brian Roth
Top achievements
Rank 1
Answers by
Brian Roth
Top achievements
Rank 1
Nikolay Rusev
Telerik team
Share this question
or