I'm preventing the default behavior of the suggestion list when selecting an item with the left mouse button.
When I use the up/down key on the keyboard to select an item in the suggestion list it always starts with the first or last item.
I'd like to go on from the last selected item in the suggestion list.

This was my approach:


How can I bind the keypress event to the suggestion popup?

I'm developing a dashboard system that uses multiple kendo charts inside of cards or tiles.  Columns in the dashboard are a fixed size and the cards may span multiple columns.  The dashboard should reflow the card layout when the size of the window changes, and when a card is too wide for the dashboard, its column span should be reduced and the chart rescaled to fit the new dimensions of it's container.  Here's the wrinkle.  Each chart's html and javascript are stored in separate html files.  When the dashboard is rendered,  the html containing the angularjs template and the supporting javascript is inserted into the containing div and then compiled using the $compile service.  So far I have had no trouble referencing scope contents inside the compiled html, but when I try to set up a name reference for the chart so that I can redraw it once the layout has changed, that reference does not exist on my scope.  I can make this work in a simple example, but not in the dashboard structure I've set up  Here are some excerpts from my code.

Dashboard template (with some Razor markup mixed in):

<div class="@divClass" ng-controller="@controllerName" tsv-resize-dash>
    <div ng-repeat="card in currentLayout.cards"
         class="{{cardClass}} card"
         ng-style="{top: card.top, left: card.left, width: card.width, height: card.height}">

        <i class="fa fa-info info" ng-class="card.infoOpacity == 1.0 ? 'pressed' : ''" ng-show="card.template.length > 0" ng-click="card.toggleInfo()"></i>

        <div class="title" ng-bind="card.title"></div>

        <div class="content">
            <div class="card-body" ng-style="{opacity: card.contentOpacity}" dynamic-html="card.template"></div>
            <div class="infoContent" ng-style="{opacity: card.infoOpacity}" ng-bind="card.cardInfo"></div>
        </div>
    </div>
</div>

Directive that inserts and compiles the template html:

.directive('dynamicHtml', function ($compile) {
        return {
            restrict: 'A',
            link: function ($scope, $element, $attrs) {
                $scope.$watch($attrs.dynamicHtml, function (html) {
                    $element.html(html);
                    $compile($element.contents())($scope);
                });
            }
        };
    })

Directive for resizing the dashboard:

.directive('tsvResizeDash', ['$window', function ($window) {
        return {
            link: function ($scope, $element, $attrs) {
                angular.element($window).bind('resize', function () {
                    var nColumns = Math.max(Math.floor($element.width() / $scope.currentLayout.CARD_WIDTH), 1)
                    console.log(nColumns);
                    if ($scope.currentLayout.currentNumberOfColumns != nColumns) {
                        console.log('resize!');
                        $scope.currentLayout.currentNumberOfColumns = nColumns;
                        $scope.currentLayout.reflow();
                        $($scope.currentLayout.cards).each(function () {
                            if (this.redraw)
                                this.redraw($scope);
                        });
                        $scope.$apply();
                    }
                });
            }
        }

    }]);

Template example (The html is inserted and compiled; The javascript is simply rendered to the page.):

<script type="text/html">
    <div kendo-chart="myChart"
         k-theme="'metro'"
         k-series-defaults="{
            type: 'area',
            area: {
                line: { style: 'smooth' }
            },
    missingValues: 'interpolate'
         }"
         k-data-source="card.dataSource"
         k-series="card.model.series"
         k-legend="{
             position: 'bottom',
             labels: {
                font: '11px Droid Sans'
             }
         }" 
         k-category-axis="{ baseUnit: 'fit' }"
         ng-style="{
            width: card.width - card.padding.horizontal,
            height: card.height - card.padding.vertical
         }">
    </div>
</script>

<script type="text/javascript" cardtype="AreaChart">
//AreaChart extends the Card object which all cards share.   
var AreaChart = Card.extend({

        load: function () {
            //call the load() of the super class using a promise to ensure the correct order of operations for the async methods
            return this._super().done(function () {
                this.dataSource = new kendo.data.DataSource({
                    //model is a member of the super class
                    data: this.model.data
                });
                console.log(this.model);
            });
        },

        redraw: function ($scope) {
            //undefined
            console.log($scope.myChart);
        }
    })
</script>

I would expect that when I get to the redraw function just above, that I would have a reference to 'myChart' inside $scope, but that isn't the case.  I've also tried referencing it inside the controller, and it does not exist at that point, either.

So my question is: Am I doing something wrong, here, or have I found some sort of bug?

I realize that's quite a bit to digest.  Let me know if further explanation is needed.

Thanks!

I am using MVC5 and razor views with a kendo grid using ajax.  I generate a IEnumerable list of data for the grid.  When user hits button on grid the controller gets notified and opens up an edit view for the row that was clicked.

What i want to be able to do is send data to that edit view so that it can move to next or previous record in the dataset that was in the grid.  I have achieved this by sending the id data from the displayed rows to the edit view via Viewbag.  I was able to learn how to send the viewsource data in the grid to the controller from this   thread

however if you hit "next" and get to the record which was the last row in the original grid, i want to be able to execute my own datarequest to grab another page of data, intercept that data and just parse out the row id information to use for additional next/prev activities.

i am stuck in figuring out how to make a new request on the original datasource now that i am not in the same view page.

is this possible?

Hello,
I found another issue. Task can be moved to other task as child even if "preventDefault" method is called in "moveStart" event handler.
Link with the example. Task with name "First task" can not be moved in graphical part of the Gantt (and message is logged to browser console), but it can be moved in grid part of the Gantt to other task as child. What event(s) is (are) fired when user moves task in grid part of the Gantt and how to prevent such type of task moving?

Hi!
On my mobile app, I'm using pairs of Charts and Grids with Shared DataSource. In one case I have a lot of records, and I wish to make the Grid pageable. I did that, i also set pageSize for DataSource, but the problem is the Chart is now pageable too. (There's no server paging, all the data is retrieved at once). On the Chart I want to see all the records represented and not by page. 


this.ds = new kendo.data.DataSource({
           transport: {
                read: {
                    url: this.url,
                    dataType: "json"
                }
            },
            pageSize: 10
        });

        this.ds.read();

        $("#chartDmaAMinNghtFlw").kendoChart({
            autoBind: false,
            dataSource: this.ds,
            series: [
                {
                    name: "AAA",
                    type: "line",
                    field: "AAA",
                }
            ],
            categoryAxis: {
                field: "BBB"
            }
        });

        $("#gridDmaAMinNghtFlw").kendoGrid({
            autoBind: false,
            dataSource: this.ds,
            scrollable: false,
            sortable: false,
            filterable: false,
            pageable: {
                pageSize: 10,
                pageSizes: [10,20,30,40,50,365]
            },
            columns: [
                { field: "AAA", title: "AAA"},
                { field: "BBB", title: "BBB"}
            ]
        });

Hello,
I have several questions regarding adding new task.

1) When I double click task html "window" (pop up) is displayed for editing task title, start/end dates and percent complete fields of the task.
I want to display this "window" when I click "+ Add task" button. How can I do this? My goal is to force user to create new task via filled form instead of adding task automatically with "New task" title.

2) How can I handle clicking "Save" button of the "window"? When user fills the form from question 1 I have to run some script to create new task.  

3) I want to customize the "window". How to add one additional drop down list (html tag "select") with predefined options?

4) How to hide "Delete" and "Save" (leave only "Cancel") buttons on the "window" for some tasks (not for all, condition for hiding is determined using task custom properties)? 

Hello,

If I give both rowTemplate and detailTemplate, the columns are pulling to the left making the expand collapse button invisible.

I want textbox in rowTemplate. How can I use both without any errors. Here is my code

function BindGrid(dataSource) {
    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: false,
        scrollable: false,
        detailTemplate: kendo.template($("#template").html()),
        detailInit: detailInit,
        dataBound: function () {
             this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
        columns: [
           { field: "Id", hidden: true },
           { field: "Name", title: "Name" },
           { field: "Read", title: "Read" } 
        ]
    });
}

Error 1 This project references NuGet package(s) that are missing on this computer. Enable NuGet Package Restore to download them.  For more information, see http://go.microsoft.com/fwlink/?LinkID=317567. C:\--- telerick ---\KendoUISpaTemplateMVC51\KendoUISpaTemplateMVC51\KendoUISpaTemplateMVC51.csproj 866 5 KendoUISpaTemplateMVC51

Any ideas? 

Mike

Hi, I'm developing a mobile app with Kendo.

When I try to use an input with type="time", the bindings do not appear to work with it.
Specifically, I'm only trying to use the "value" binding.

<input type="time" data-bind="value: timeSpent" />

Does someone know if this type of input is not supported? If that's the case, any time picker control that you can recommend?

Thanks.
Gonzalo

Hi,

I am trying to display my validation as a tooltip and I found how to do this by setting the error template of the validator. If I set the error template with jquery the validation message appears as a tooltip, but when I set the error template in the controller the validation message does not appear as a tooltip. See my example for details.

What am I doing wrong in the controller?