I have a few questions:

1. With Kendo UI and its routing features, can they be broken into separate .html pages, so not to have all code in one index.html?  Or does it all have to be on one .html page with templates, routing, controllers, etc.?  I wanted to keep the index.html separate and easy to read and keep all other pages in a "views" folder.

2. Is it better to use Angular routing with Kendo UI features or does it not work correctly?

I see with Angular, you can use a placeholder:

to display the .html that is chosen (as explained here -- https://docs.angularjs.org/tutorial/step_07) in the Angular routing process, such as:

I have gone through the Sushi demo (http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial) as well as reviewing this GitHub demo (https://github.com/rstropek/Samples/blob/master/KendoOverviewSample/SPASample.html), but I am not sure how to break all this into separate .html pages.

If there are any demos/tutorials that show exactly what I am looking for, please let me know.  Or if you can provide code that spells all this out, I would really appreciate this.  I am new to the Kendo UI SPA/Routing coding/processes and I can understand Angular a little better.

Thanks!
Dan

The grid change event doc states: "Fired when the user selects a table row or cell in the grid."

Is this absolute, or does this change if the grid is in editable mode?

Here is our issue. We have an grid using incell edit mode.

We bind to the change event:

$("#IncomeCodeMappingsGrid").on("change", "#IncCode", HandleIncomeCodeChange);

In the change event, we look for duplicate values in the data source by looping through all the datasource rows. Duplicate values are not allowed. 

This all works fine when using 2013.3.1324.440

However, after upgrading to 2013.3.1411.440 (which I think is SP1).

What happens in this case is that the value in the new row for the field in question is an empty string. 

However, this is only an issue in the columns where we use a kendoAutoComplete. 

I expect what might be happening is that the change is actually bubbled up from the auto complete. however, I have no way to check that, because per the docs I should be able to look at e.sender, but there is no sender on the event object passed to the handler.

So, yes, there are a few questions here.

1. When does the grid change fire, and is it different for an editable grid vs non-editable?

2. What was changed in SP1 that would be causing this so we can fix it. I assume something to changed in the autocomplete wrt to the change event.

3. How can I see what object fired the event? I think if I can ignore the change event bubbled up from the auto complete this will be able to work. 

(yes, I know we probably should be using the edit event but this method is used quite a bit in our code)

 

 

Hi!

Please, help me to make "More events" button in week view in cells like in month view, when there are more than 2 events.

Thanks!

Hi,

In past, I have implemented the pan and zoom feature in a chart where data was provided via the datasource property (as explained in the pan and zoom example in the demos). And it works well.

But this time I am creating a chart with dynamic series and data. I am not setting the datasource property, rather I am setting the values in series.data property and the pan & zoom feature doesn't work.

Just wanted to know whether the pan & zoom feature works only when the chart datasource property is set or is there a way to implement the pan & zoom feature when the data is provided using series.data property.

 

Thanks.

I have one series.  I need different colors.  I am not using a legend where this would be a problem.  Is this possible?

[EDIT]
Before someone asks why, it's because the series is a metric that has a goal (e.g. total sales).  The bars are monthly.  So the chart might be titled "total sales" and the bars are for "Jan", "Feb", "Mar", etc.  Each bar is supposed to be red if far below goal, yellow when near the goal, and green when at or past the goal.  

Hi

I am working on following example: http://dojo.telerik.com/InEyo

In this example I set the date for the data input to

    var date = "2013-10-10 14:02:40.44";

To read the date I use the following where my Date column is defined:

    format: "{0:dd-MMM-yyyy HH:mm:ss}",
    parseFormats: ["yyyy-MM-dd' 'HH:mm:ss.zz"]

parseFormats defines the format of the input string and format defines how I want to display it (to my understanding). I have my example from http://stackoverflow.com/questions/19316687/kendo-grid-format-time-issue-in-date-column

The example above works - as it should!

My problem (http://dojo.telerik.com/aqafE): The date I get from the database is formatted like this: 
"20131010 140240" - so "yyyyMMdd HHmmss".

Naturally I would adjust the parseFormats like this:

    format: "{0:dd-MMM-yyyy HH:mm:ss}",
    parseFormats: ["yyyyMMdd' 'HHmmss"]

However this does not output the date so I assume either I have made a mistake in defining the input string or the string from the database just does not work with Kendo...

Many thanks

Hi 

i have two different controllers, one of them with gantt chart control, and the second one as toolbar with ie. DataPicker and Button which primary function is a commiting new parameters and refresh gantt view. I achieved flow between both controlers  

<div ng-app="KendoDemo" ng-controller="MyCtrl">
<div style="posotion: absolute; top:100px; bottom:0px;text-align:left;display:inline-block;"  ng-controller="Header">              
                <p>
                    <label for="start">Data od:</label><input id="start" style="width: 200px" value="10/10/2011" ng-model="From"/>               
                    <label for="end">Data do:</label><input id="end" style="width: 200px" value="10/10/2012"/ ng-model="To">
   <!--<kendo-button class="k-primary" title="Run snippet (Ctrl + Enter)"
                    data-role="button" ng-click="onClick1()">Szukaj</kendo-button>-->
<button class="k-primary" ng-click="handleClick();">Szukaj</button>
   &nbsp;<b>Styl:</b>
                </p>
            </div>
<input type="hidden" ng-model="From"/>   
<input type="hidden" ng-model="To"/>   
<div kendo-gantt  k-options="ganttOptions" ng-mouseover="enter($event)"></div>
<div kendo-tooltip="tooltip" k-content="'{{tooltipContent}}'"></div>
  </div>    
  </div>

 <script>
  angular.module("KendoDemo", [ "kendo.directives" ]);

  function Header($scope) {    
    $scope.$on('handleChild', function(event, args) {
        $scope.From = args.from;
$scope.To = args.to;
    });        
    
    $scope.handleClick = function() {
        $scope.$emit('updateParent', {from: $scope.From, to: $scope.To});
    };
    
  }

  function MyCtrl($scope) {

   
    $scope.handleClick = function(from, to) {
        $scope.$broadcast('handleChild', {From : from, To: to}); 
    };
    
    $scope.$on('updateParent', function(event, args) {
        $scope.From  = args.from;
$scope.To    = args.to;
$apply();
var gantt = this;
thi.refresh();
    });  
     
      var serviceRoot = "/api/";
      var tasksDataSource = new kendo.data.GanttDataSource({
          batch: false,
          transport: {
              read: {
                  url: serviceRoot + "/GetTasks",
                  dataType: "jsonp"
              },
              update: {
                  url: serviceRoot + "/GanttTasks/Update",
                  dataType: "jsonp"
              },
              destroy: {
                  url: serviceRoot + "/GanttTasks/Destroy",
                  dataType: "jsonp"
              },
              create: {
                  url: serviceRoot + "/GanttTasks/Create",
                  dataType: "jsonp"
              },
              parameterMap: function(options, operation) {
                  if (operation !== "read") {
                      return { models: kendo.stringify(options.models || [options]) };
                  }
              }
          },
          schema: {
              model: {
                  id: "id",
                  fields: {
                      id: { from: "ID", type: "number" },
                      orderId: { from: "OrderID", type: "number", validation: { required: true } },
                      parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },
                      start: { from: "Start", type: "date" },
                      end: { from: "End", type: "date" },
                      title: { from: "Title", defaultValue: "", type: "string" },
                      percentComplete: { from: "PercentComplete", type: "number" },
                      summary: { from: "Summary", type: "boolean" },
                      expanded: { from: "Expanded", type: "boolean", defaultValue: true }
                  }
              }
          }
      });

      var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
          transport: {
              read: {
                  url: serviceRoot + "/GetDependencies",
                  dataType: "jsonp"
              },
              update: {
                  url: serviceRoot + "/GanttDependencies/Update",
                  dataType: "jsonp"
              },
              destroy: {
                  url: serviceRoot + "/GanttDependencies/Destroy",
                  dataType: "jsonp"
              },
              create: {
                  url: serviceRoot + "/GanttDependencies/Create",
                  dataType: "jsonp"
              },
              parameterMap: function(options, operation) {
                  if (operation !== "read" && options.models) {
                      return { models: kendo.stringify(options.models) };
                  }
              }
          },
          schema: {
              model: {
                  id: "id",
                  fields: {
                      predecessorId: { from: "PredecessorID", type: "number" },
                      successorId: { from: "SuccessorID", type: "number" },
                      type: { from: "Type", type: "number" }
                  }
              },
tooltip: {
                    visible: true,
                    format: "{0}%",
                    
                }
          }
      });
      
      $scope.enter = function(event) {      
      var target = $(event.target);
      if (target.is(".k-task") || target.closest(".k-task").length > 0 ) {
//alert('Stan realizacji: ' + target.text());
alert(this.From);
        $scope.tooltipContent = 'Stan realizacji: ' + target.text();      
        $scope.tooltip.show(target);
      } else {
        $scope.tooltip.hide();
      }
    };
      $scope.ganttOptions = {
          dataSource: tasksDataSource,
          dependencies: dependenciesDataSource,
          views: [
              "day",
     "week",
              { type: "month", selected: true }              
          ],
          columns: [
             
              { field: "title", title: "Title", editable: false },
              { field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 100, sortable: true, editable: true },
              { field: "end", title: "End Time", format: "{0:MM/dd/yyyy}", width: 100, sortable: true, editable: true }
          ],
resize: function(e) {
               // alert(":::");
               // e.preventDefault();
            
        },
          height: 500,
          showWorkHours: true,
          showWorkDays: true,
 dataBound: function() {
              var gantt = this;              
              gantt.element.find(".k-task").each(function(e) {
              var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));                
                // colorize task per business requirements
                if (dataItem.percentComplete < .5) {
                  this.style.backgroundColor = "#f99";
                } else {
                  this.style.backgroundColor = "#9f9";
                }
              });
}
      };

  }

MyCtrl.$inject = ['$scope'];
Header.$inject = ['$scope'];
</script>

and that's ok. I checked new parameters using ordinary alert() function inside of $scope.enter. But i have no idea how to rebind a view. i MVVM it shall looks like:

var viewModel = kendo.observable({
productsSource: new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},‏ and bind

                  kendo.bind($("#form-container"), viewModel);

But in AnguleJS framework IMHO control is binding in background after its embedded in DOM model. I've been trying $apply and this.refresh() but with no success.


Any idea?

On http://docs.telerik.com/kendo-ui/browsers-support , I can read that IOS 6 and later are supported by kendoUI.

Is there a list of errors/artefacts for earlier versions of IOS?

Are those artefacts entirely cosmetic or are they also functional?

I am trying iPad1 at the moment with Safari Mobile 5.1. It seems like the auto complete component worked although we got a problem on a page having 4 instances of auto complete. On that page, one of the auto complete components did not react on clicks.

I have not investigated further which kind of shortcomings IOS 5.1 has when it comes to render/use kendoUI Components.

Hi. 

Can I use not number type for "id" field for dependencies and tasks? Or It must be number type?

For exemple guid as  "dbaa0c8b-e188-4e83-8e14-b0b41dd12f0e".

And this my object for dependency:

"{

"id":"dbaa0c8b-e188-4e83-8e14-b0b41dd12f0e",

"type":1,

"predecessorId":"01415eab-f852-4cd8-af5e-4be43bba1dc2",

"successorId":"f13e95f2-402a-4819-8137-3977f31eeb5e"

}"

 

Thank you.

Hey,

 i have a Problem with kendo grid and seting up inital Page.

Initial situation:

I have a Grid with many entries, one of them is the right one. On wich Page this entry is i dont know.

 

What i have tried:

in the databound event i identify the Item(Object) on which page it is (loop over the datasource) after this i want to set the initial page, but if i use dataSource.page(index) javscript shows error -> "too much recursion".Where to set the initial Page?

I'm using JSP and Jquery

Thanks for help.