Telerik Forums
Kendo UI Integration Forum
or
Ask question
All Questions
Unanswered
Answered
187 questions
7 answers
201 views
[Solved] When to expect Scheduler with Vue

Hi

As the title says , when can we expect to have the Scheduler available with Vue Library?

 

Eric

Integration with other JS libraries
Pavlina
Telerik team
 answered on 01 Dec 2017
1 answer
190 views
Broken link in Grid examples

From https://docs.telerik.com/kendo-ui-wrappers-react/components/grid it says refer to demo app. That link is either not viewable or broken. Is there somewhere else I can look?

Editing with Redux
 
For a runnable example on how to edit the Grid by using Redux, refer to this demo application.

Integration with other JS libraries
Stefan
Telerik team
 answered on 24 Nov 2017
1 answer
205 views
preview for React Menu broken

https://docs.telerik.com/kendo-ui-wrappers-react/components/menu

 

SyntaxError: Inline Babel script: JSX value should be either an expression or a quoted JSX text (7:15) 5 | 6 | const element = ( > 7 |
| ^ 8 |
9 | Item 1 10 | Item 2 at line 8

Integration with other JS libraries
Stefan
Telerik team
 answered on 21 Nov 2017
1 answer
435 views
DropDownList react wrapper and toggling enable

I have a class as such:

export class DropDownList extends React.Component<DropDownListProps, object> {
  render() {
    var testing = (typeof this.props.enable !== 'undefined') ? this.props.enable.toString() : '';
    return (
      <div>
        <label>{this.props.title} {testing}</label>
        <Select {...this.props} enable={this.props.enable} />
      </div>
    );
  }
}

 

But when my component is re-rendered after the enable flag has changed from false to true, the dropdownlist stays disabled/gray. <Select> is a simple wrapper around kendo dropdownlist

import { DropDownList as KDropDownList } from '@progress/kendo-dropdowns-react-wrapper';
 
export default class DropDownList extends KDropDownList {}

 

And finally is used in

export const EditForm: React.StatelessComponent<EditFormProps> = ({ advice, change, editMode }) => {
  var opts: kendo.ui.DropDownListOptions = {
    dataTextField: "text",
    dataValueField: "value",
    enable: editMode,
    dataSource: [
      { text: "All", value: "all" },
      { text: "Inpatient", value: "ip" },
      { text: "Outpatient", value: "op" }
    ]
  };
  return (
    <div>
      <DropDownList name="encounterType" title="Encounter Type" {...opts} />
    </div>
  );
}

 

Is there something I'm doing wrong? My re-render clearly shows editMode going from false to true and is displayed within the label yet the DropDownList stays disabled. If I make the first state of the DropDownList enabled, it will flip to disabled, but then not again. It seems there's a probably only from the disabled->enabled direction.

Integration with other JS libraries
Stefan
Telerik team
 answered on 21 Nov 2017
3 answers
225 views
Missing TypeScript properties in Schedule (resources) and SchedulerView (name) kendoui.for.jquery.2017.3.1102

Dear Telerik Team

...working with kendoui.for.jquery.2017.3.1102 I realized that Scheduler and SchedulerView are missing some properties in TypeScript. I added them to "kendo.all.d.ts" and now is working properly. I now you generate ts automatically. I found this issue while add/remove groups at run time based on your JavaScript samples...

...

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.resources[0].dataSource.filter(filter);

scheduler.view(scheduler.view().name); //refresh the current view  

...

 

in kendo.all.d.ts

 class Scheduler extends kendo.ui.Widget {

(...)

 resources?: SchedulerResource[]; //missing

}

 interface SchedulerView {

(...

name?: string; //missing

}

Integration with other JS libraries
Ianko
Telerik team
 answered on 15 Nov 2017
2 answers
249 views
[Solved] theme and VS JavaScriptServices

Hi,

When using the theme scss file with Angular 2 and the JavaScriptServices SPA templates in Visual Studio, how do you get the scss to be handled?  I've read http://www.telerik.com/kendo-angular-ui/components/styling/

but I think there is a step missing when using JavaScriptServices as there is no loader defined for scss files.Is there some additional npm install required?
Integration with other JS libraries
Scott Waye
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 30 Aug 2017
2 answers
1.1K+ views
[Solved] kendo grid virtual scrolling not working when grid is not visible on databind

I'm binding the grid to an array with a separate function as i was instructed here.

The problem is that virtual scrolling doesn't work when the grid is not visible when I attach data to the data source.

Here is a Dojo

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
    <script src="../content/shared/js/people.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
      <a href="" ng-click="ShowGrid = !ShowGrid">Toggle Grid</a>
      <div ng-show="ShowGrid">
        <div kendo-grid="mainGrid" options="mainGridOptions" k-data-source='mainGridDataSource'>
      </div>   
   </div>
 
 
    </div>
</div>
 
<style>
  .contact-info-form {
    list-style-type: none;
    margin: 30px 0;
    padding: 0;
  }
 
  .contact-info-form li {
    margin: 10px 0;
  }
 
  .contact-info-form label {
    display: inline-block;
    width: 100px;
    text-align: right;
    font-weight: bold;
  }
</style>
 
<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
       
                $scope.ShowGrid = false;
                $scope.mainGridDataSource =  new kendo.data.DataSource({data:[], pageSize: 100});
            $scope.mainGridOptions = {
                sortable: true,
                height: 543,
                //pageSize:100,
                //dataSource: {pageSize: 100, data:[]},
                scrollable: {
                            virtual: true
                        },
                pageable: {
                  numeric: false,
                  previousNext: false,
                  messages: {
                    display: "Showing {2} data items"
                  }
                },
                columns: [{
                    field: "FirstName",
                    title: "First Name",
                    width: "120px"
                    },{
                    field: "LastName",
                    title: "Last Name",
                    width: "120px"
                    },{
                    field: "City",
                    width: "120px"
                    },{
                    field: "Title"
                }]
            };
       
        generatePeople(5000, function(results) {
            //console.log(results);
            $scope.mainGridDataSource.data(results);
             
           
        });
 
             
        })
</script>
 
 
</body>
</html>
Integration with other JS libraries
Boris
Top achievements
Rank 1
 answered on 14 Aug 2017
3 answers
541 views
[Solved] Updating Kendo UI grid datasource with locally stored data pulled from outside of grid datasSource.

I have a scenario where the data for the grid, as well as other parts of the ui , needs to be pulled with a separate $scope function and stored in a $scope variable.

In order to replicate this, I used a function from your demos.

I was not able to make this work.

What am I doing wrong?

http://dojo.telerik.com/ehEXEn

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
    <script src="../content/shared/js/people.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
        <div kendo-grid="mainGrid" options="mainGridOptions" k-data-source='mainGridDataSource'>
        </div>
 
 
    </div>
</div>
 
<style>
  .contact-info-form {
    list-style-type: none;
    margin: 30px 0;
    padding: 0;
  }
 
  .contact-info-form li {
    margin: 10px 0;
  }
 
  .contact-info-form label {
    display: inline-block;
    width: 100px;
    text-align: right;
    font-weight: bold;
  }
</style>
 
<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
       
       
                $scope.mainGridDataSource =  new kendo.data.DataSource({data:[], pageSize: 100});
            $scope.mainGridOptions = {
                sortable: true,
                height: 543,
                //pageSize:100,
                //dataSource: {pageSize: 100, data:[]},
                scrollable: {
                            virtual: true
                        },
                pageable: {
                  numeric: false,
                  previousNext: false,
                  messages: {
                    display: "Showing {2} data items"
                  }
                },
                columns: [{
                    field: "FirstName",
                    title: "First Name",
                    width: "120px"
                    },{
                    field: "LastName",
                    title: "Last Name",
                    width: "120px"
                    },{
                    field: "City",
                    width: "120px"
                    },{
                    field: "Title"
                }]
            };
       
        generatePeople(500000, function(results) {
            //console.log(results);
            $scope.mainGridDataSource =  new kendo.data.DataSource({data: results, pageSize: 100});
            console.log($scope.mainGridDataSource);
          $scope.mainGridDataSource.read();
          $scope.mainGrid.refresh();
          $scope.mainGrid.dataSource.read();
          $scope.mainGrid.refresh();
        });
 
             
        })
</script>
 
 
</body>
</html>
Integration with other JS libraries
Boris
Top achievements
Rank 1
 answered on 10 Aug 2017
12 answers
2.5K+ views
Double click on grid row with angular
How can I catch a double click event on a grid row when using the angular directive for the grid?

I've seen in other questions the response has been to use jQuery and bind to the DOM event but this isn't a good solution for angular.
Integration with other JS libraries
Dimiter Topalov
Telerik team
 answered on 08 Aug 2017
0 answers
224 views
Kendo widgets as webcomponents

Hi,

 

I'm using some kendo widgets in a polymer project. I followed instructions from Kendo web components article. This link is currently broken. Does kendo plan to support webcomponents? Where can I found documentation about using kendo widgets as Webcomponents?

 

Thanks

Integration with other JS libraries
Daní
Top achievements
Rank 1
 asked on 21 Jun 2017
Narrow your results
Done
Selected tags
Tags
Integration with other JS libraries
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
2 3
4
5 6
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how