Hi:

I am trying to convert the Knockout tutorial #2 to Kendo MVVM.  Learn knockout Tutorial Collections
Not doing well.

Problem is the binding is not happening and the dropdown loses it's dropdownlist on add or remove. 

Note: Kendo does not seem to have the calculated (logical) binding like Knockout does for visible and enabled.

Phil

I'm trying to make a pie out of this JSON data:
Here's my function:

Interestingly though, the pie only occupies 1/4 of a circle. I've been playing around with the numbers to try and grow and shrink them, but I just can't seem to make the thing occupy more than 1/4 of a pie.

I've attached a screenshot.

Could someone please let me know what I'm doing wrong?

Hi, I am trying to set the Header title for a field a parameter value.

eg. something like the below (I would like the value in bold FIRST_HEADER to be for example x.FIRST_HEADER derived from the model and not a static string.

Thanks in advance
Manos


@(Html.Telerik().Grid<CheckoutConfirmDeliveryModel>()
                            .Name("gvDelivery")
                            .ClientEvents(events => events                        
                            .OnDataBinding("onDataBinding"))
                            //.OnDataBound("onDataBound"))
                            //.OnComplete("onComplete"))
                        .Columns(columns =>
                        {                           
                            columns.Bound(x => x.FIRST_ID).Hidden(false);
                                                   
                            columns.Template(x => Html.ActionLink(x.FIRST, "FIRSTACTION", "CheckoutController", new { x.TIME_ID })).Title(FIRST_HEADER).ClientTemplate("<a href=\"" + Url.Action("SelectDeliveryDateTime", "CheckoutController") + "/<#= FIRST#>\">" + "<#= FIRST #>" + "</a>");                          
                        })
                                .DataBinding(dataBinding => dataBinding.Ajax().Select("DeliveryList", "Checkout", Model))
                                .EnableCustomBinding(true))

Hi,

I'm modifying Row Template sample to put three grids horizontally.  My questions are:

1. How can I set the height of the grid to the height of my browser?  I tried to change the grid height to 100% but it does not work.
                           rowTemplate: kendo.template($("#rowTemplate").html()),
                           height: 100%
2. In my case, three grids cannot fit in my screen a scroll bar showing at the bottom as expected. When I testing my modified version on my iphone and swiping the grid's body, I expect the content will move but it does not.  If I swiping the grid's header the content moved.  Just wonder how can I move the content when swiping the grid's body.

Thank you very much for your time.
puyo

I implemented the Drag and Drop from a treeNode to an external DIV in this way:
                  /////////////////////////////////////////////////////////////
                  // DRAG A NODE
                  function onDragStart(e) {                   
                  }
                  function onDrag(e) {
                      if (e.dropTarget.id == "dropDiv") {
                          e.setStatusClass("k-add");
                      }
                      else {
                          e.setStatusClass("k-denied");
                      }
                  }
                  function onDrop(e) {
                     // var d = this.dataItem(e.sourceNode);                                                               
                  }
                  function onDragStart(e) {
                  }
                  function onDragEnd(e) {                     
                  }
                  /////////////////////////////////////////////////////////////////
                  //TREE SOURCE DEFINITION
                  treeSource = new kendo.data.HierarchicalDataSource({
                      transport: { read: { url: serviceRoot + "Plant", dataType: "json" }},
                      schema: { model: { id: "idPlant" }   }
                  });
                  /////////////////////////////////////////////////////////////////
                  $("#treePlants").kendoTreeView({
                      dataSource: treeSource,
                      dataTextField: "PlantAlias",
                      dragAndDrop: true,
                     
                      dragstart: onDragStart,
                      drag: onDrag,
                      drop: onDrop,
                      dragend: onDragEnd
                  });

It seems running but when the Node is dragged on the DIV area the "k-add" icon remain attached to cursor... no way to remove it clicking or not the mouse buttons.
Looking at javascript console in Chrome the error: Uncaught TypeError: Cannot read property 'dataSource' of undefined
is shown in kendo.ui.min.js.
How to fix this?


How to proceed.

I am trying to start with an initial list of items and display them using the mobile listview. This works fine, however if I add to the list and re-display the items, then the click event can no longer find the data property and throws an error. Here is the code, any help or suggestions on how to do this is appreciated.

var aptdata = [
            { 'apt': 'ATL', 'name': 'Atlanta' },
            { 'apt': 'JFK', 'name': 'John F Kennedy' },
            { 'apt': 'LGA', 'name': 'La Guardia' }
];

function alistbind() {
    var ldata = localStorage.aptdata;
    if (ldata == null) {
        localStorage.aptdata = JSON.stringify(aptdata);
    }
    $("#alist").kendoMobileListView({
        autoBind: false,
        dataSource: JSON.parse(localStorage.aptdata),
        style: 'inset',
        template: "<a>${apt} - ${name}</a>",
        click: function (e) {
            console.log('fun clicked: ' + e.dataItem.apt);
            showdetail(e.dataItem.apt);
            app.navigate("#aptdetail");
        }
    });
    $("#alist").data("kendoMobileListView").dataSource.read();
}

function AddAirport() {
    var ldata = JSON.parse(localStorage.aptdata)
    var newapt = { 'apt': 'FLL', 'name': 'Ft Lauderdale' };
    ldata.push(newapt);
    localStorage.aptdata = JSON.stringify(ldata);
    alistbind();
}

Hi,


I am using the popover with listview and checkbox or radio items. With radio everything works finde, but when I am using checkboxes I get the Error: Uncaught TypeError: Cannot read property 'checked' of undefined
Any idea, what could be wrong? I am creating the Items like this:

The error is thrown before output "test" and is thrown by kendo.mobile.min.js.

Hi, 
The scenario is a div container with data-show="functionW" 
In this function I make a request to the server with some parameters from a previous view and result is shown as a  listview.
$("#listview").kendoMobileListView({
dataSource : dataSource,
click: function(e) {
alert(e.dataItem.foo);
}
});

Fist time everythink works fine, but when the listview is refreshed, the listview show correcty but click function show this error on console: Uncaught TypeError: Cannot read property 'foo' of undefined
The listView changes with some parameters, so I cant use data-init instead of data-show.
I have tried with data-click="functionW" from button of the previous form and same behaviour. 
 Anyone can light me??

When using the PlotAreaClick event, the e.category value doesn't reflect the point that has been clicked - this seems to be the same in all browsers, and can be replicated on the demo page here - for example, clicking on the right hand side of the plotarea for the 2000 category actually logs a click on the 2001 category.

Is this a known bug and is there a workaround?

I have a kendo treeview and a kendo grid on a page working nicely - when I click on a row in the grid i can drag the row over to the treeview and drop it and this works great.

I want to be able to click on a treeview node and show the products for the selected category within the grid, need some advice.

I have a kendo grid marked as follows:-

viewModel = kendo.observable({ gridSource: productdata });

script>

                var viewModel = null;

                $(document).ready(function() {
                   var treeview;

                    $("#vertical").kendoSplitter({
                        orientation: "vertical",
                        panes: [
                            { collapsible: true, size: "50%" },
                            { collapsible: true, size: "50%" }
                        ]
                    });

                    $("#horizontal").kendoSplitter({
                        panes: [
                            { collapsible: true, size: "35%" },
                            { collapsible: true, size: "65%" }
                        ]
                    });

                    treeview = $("#treeview").kendoTreeView({
                        template: kendo.template($("#treeview-template").html()),
                        dragAndDrop: false,
                        dataSource: [@(Html.Raw(Model.Json))],
                        select: onSelect
                    }).data("kendoTreeView");
                   
                    var productdata = @(Html.Raw(Model.JsonProducts));
                   
                   viewModel = kendo.observable({
                        gridSource: productdata
                   });
                  
                   
                     $("#grid").kendoGrid({
                        dataSource: {
                            data: viewModel.gridSource,
                            pageSize: 10
                        },
                        autoBind:true,
                        selectable: "multiple, row",
                        groupable: false,
                        scrollable: true,
                        sortable: true,
                        pageable: false,
                        drop: droptargetOnDrop,
                        columns: [
                            {
                                field: "id",
                                width: 50,
                                title: "Id"
                            },
                            {
                                field: "categoryid",
                                width: 250,
                                title: "Category Id"
                            }, {
                                field: "productname",
                                width: 250,
                                title: "Product Name"
                            }
                        ]
                    });

                    $("#grid").kendoDraggable({
                        filter: "tr",
                        hint: function() {
                            var g = $("#grid").data("kendoGrid");
                            return g.select().clone();
                        }
                    });

                    $("#treeview").kendoDropTarget({
                        dragAndDrop: true,
                        drop: droptargetOnDrop
                    });
                });

                    function onSelect(e) {
                        var url = "/home/UpdateListingByCategory";
                        var selectedCatId = $(e.node.children[0]).find("input").val();

                        $.ajax({
                            type: "POST",
                            url: url,
                            data: { categoryId: selectedCatId },
                            success: function(data) {
                                viewModel.gridSource = JSON.parse(data);
                                alert(viewModel.gridSource);
                            },
                            error: function() {
                                alert("error");
                            }
                        });
                    }
                   
                    function droptargetOnDrop(e) {
                    var ss = e.srcElement.parentElement.children[1];
                    var url = "/home/update";

                    var list = new Array();

                    for (var i=0; i < e.draggable.hint.length; i++) {
                        var id = e.draggable.hint[i].firstChild.innerHTML;
                        list.push(id);  
                    }

                    $.ajax({
                        type: "POST",
                        url: url,
                        data: { categoryId: $(ss).val(), productIds: list.join() },
                        success: function(data) {
                            viewModel.gridSource = JSON.parse(data);
                        },
                        error: function() {
                            alert("error");
                        }
                    });
                       
                    kendo.bind($("#grid"), viewModel);
                }
            </script>