Is it possible to affect data asynchronicaly (ajax) that is used by kendo.observable object?

With below code `cart.add()` function is triggered and `cart.contents` variable is updated, but this not affect the template and not refreshing data used by template. I'm expecting that changing cart.contents changes data used by template, like text: quantity and text: itemPrice

template script 1:

    <script type="text/x-kendo-template" id="cart-preview-template">
      <div id="shop-info" data-bind="attr: { class: cartContentsClass }">
        <ul data-role="listview" data-bind="source: cart.contents" data-template="cart-item" id="shop-list"></ul>
            <div id="shopping-cart">
                <p class="total-price" data-bind="html: totalPrice"></p>
                <a id="empty-cart" href="#" data-bind="click: emptyCart">empty cart</a>
            </div>
        </div>
    </script>

template script 2:

    <script type="text/x-kendo-template" id="cart-item">
        <li class="selected-products-list">
            <a data-bind="click: removeFromCart" class="view-selected-items">
                <img data-bind="attr: { src: imageSource, alt: imageAlt }"
                />
            </a>
                <span data-bind="text: quantity"></span>
                <span data-bind="text: itemPrice"></span>
            </span>
        </li>
    </script>


model:

    var cartPreviewModel = kendo.observable({
                    cart: cart,
    
                    cartContentsClass: function () {
                        return this.cart.contentsCount() > 0 ? "active" : "empty";
                    },
    
                    removeFromCart: function (e) {
                        this.get("cart").remove(e.data);
                    },
    
                    emptyCart: function () {
                        cart.empty();
                    },
    
                    itemPrice: function (cartItem) {
                        return kendo.format("{0:c}", cartItem.item.unitPrice);
                    },
    
                    imageSource: function (cartItem) {
                        var baseUrl = "{{ absolute_url(asset('images/products/')) }}";
                        return baseUrl + cartItem.item.image;
                    },
    
                    imageAlt: function () {
                        return "Product image";
                    },
    
                    totalPrice: function () {
                        return this.get("cart").total();
                    },
                });

cart - object observable used by above cartPreviewModel :

            var cart = kendo.observable({
                contents: [{"item":"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1}], 
                add: function (item) {
                    $.ajax({
                        type: 'POST',
                        url: '{{ path('add_product') }}',
                        dataType: 'json',
                        data: {'item': JSON.stringify(item)},
                        success: function (cart) {
                            // original code: 
                            // this.contents = cart;

                            // code for testing:
                            this.contents = [{"item":{"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1},{"item":{"productID":2,"unitPrice":"999.00","image":"8.jpg"},"quantity":1}];
                        },
                    });

                },


binding model and template:

    kendo.bind($("#shop-info"), cartPreviewModel);

Once again, With above code `cart.add()` function is triggered and `cart.contents` variable is updated but this not affect the template and not refreshing data used by template. 

Hi Team,

I am using column menu in grid toolbar and storing column state on local-storage. Whenever page reload I am getting the grid options from local storage using below code.

var grid = $("#myGrid").data("kendoGrid");
var options = localStorage.getItem("kendo-grid-myGrid");
if (options) {
    grid.setOptions(JSON.parse(options));
}

I am using row editable as popup with template. In this template I am using some kendo drodpdown and a custom window scroll.

Once the setOptions called drop drown source and window scroll is not working. Any help on this.

Thanks in Advance

Jose

I'm able to get the response , the error occurs in $scope.scheduler.setDataSource() 

The current version I'm using is 
jquery- 3.1.1
angularjs - 1.7.0
kendo-ui- 2018.2.516

Hi,

1. Is Bootstrap 4 officially supported for Kendo UI for JQuery? If not, is there an official page where I can track if/when it will be supported?

2. If it is supported, is there a guide on what files (CSS/JS) need to be included in order to upgrade to Bootstrap 4?

Hi.Thank you as always!

My AreaChart is rendered with canvas. (Because it enables pan on touch device)

I implemented the gradation on the chart with reference to the article below.

https://docs.telerik.com/kendo-ui/knowledge-base/chart-area-gradient-effect

But it did not work.

Is there a way to implement a gradation when rendering with canvas?

https://dojo.telerik.com/IHIWugiR

I am using a Kendo Treelist in my MVC view:

<tr>
<td colspan="7" style="border-style: solid; border-width: 1px; border-top: none;">
<%: Html.Kendo().TreeList<CustomResult>()
.Name("treelist")
                                              
                                            .Columns(columns =>
{
columns.Add().Field(e => e.Text).Title("Results").TemplateId("result-template");
})
.DataSource(dataSource => dataSource
.Read(read => read.Action("LoadResults", "Home").Data("additionalInfo"))
.ServerOperation(false)
.Model(m => {
m.Id(f => f.RootId);
m.ParentId(f => f.ReportsTo);
m.Field(f => f.Text);
m.Field(f => f.ReportsTo);
})
)
.HtmlAttributes(new { style = "height: 430px;width:100%" })
.Height(430)
%>
</td>
</tr>

The treelist is expandable with parent and root nodes while running in local.

But at times,in the server deployed version,only the parent node is getting displayed and not expandable.

Any clue on the probable reason for the issue?

Hi, 

Do we have anything similar to https://jqueryui.com/draggable/#snap-to where i can specify grid height width 

I don't want to use Diagram here