Telerik Forums
Kendo UI Integration Forum
or
Ask question
All Questions
Unanswered
Answered
184 questions
1 answer
286 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
122 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
92 views
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
Veteran
Iron
 answered on 30 Aug 2017
2 answers
851 views
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
331 views
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
1.9K+ 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
132 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
3 answers
295 views
Angular complex directive in Kendo grid column

Hello,

I'm evaluating kendo grid before purchasing. I'm trying to replace the open source ui-grid in my app to Kendo Grid.

I'm facing a performance problem when trying to replace the row template of the grid to create a "card-view" to the table.

The row template's structure is like this:

<tr data-uid="#= uid #">
   <td colspan="100" style="padding: 0px">
      <directive item="dataItem"></directive>
   </td>
</tr>

"directive" is a complex directive who has inner directives with user interaction, logic, etc.
the rendering performance of 200 items is unacceptable.
trying to use virtual scrolling and render only 15 items at a time, causes unsmoothness in scrolling, as the next page is rendering.
I tried it with kendo ListView as well, but no virtualization there, only paging, and I don't want separate pages.

The open source ui-grid I want to get away from, renders the same template/data settings seamlessly + no delay in scrolling.

What's the best approach to solve this, if any? sadly for me it is a deal-breaker.

Integration with other JS libraries
Vasil
Telerik team
 answered on 15 Jun 2017
5 answers
154 views
Kendo UI Scheduler with Polymer
Hi, I want to know if Polymer can be combined with Kendo UI scheduler. Since I've tried with other scheduler tools and have not been integrated with Polymer.
Integration with other JS libraries
Ivan Danchev
Telerik team
 answered on 04 Apr 2017
3 answers
841 views
Kendo UI for Angular 2 Access component from directive

Hello,

I am trying to create a custom directive that will be placed in a DropDownList component. In the constructor of the directive I would like to get a reference of the host DropDownList component.

Here is my code:

import { Directive, ElementRef } from '@angular/core';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 
@Directive({
    selector: '[trackDDLChanges]'
})
export class TrackDDLChangesDirective {
    ddl: DropDownListComponent;
 
    constructor(elem: ElementRef) {
        this.ddl = elem.nativeElement; <-- how to get the reference of the component?
         
    }
}

 

I am using it as:

<kendo-dropdownlist [data]="statuses"
                                [(value)]="value"
                                [valuePrimitive]="true"
                                [textField]="'name'"
                                [valueField]="'id'"
                                (valueChange)="statusChanged()"
                                [trackInputChanges]="'some data'" >
            </kendo-dropdownlist>

 

I could not find anything in the documentation. ElementRef gives me the html element, but I cannot find a way to convert it into the corresponding component.
In the previous version of kendo we could do:

$(elem).kendo('kendoDropDownList')

 

to get a reference to the widget.

Is there something similar available in this version?

Thank you.

Integration with other JS libraries
Dimiter Topalov
Telerik team
 answered on 29 Mar 2017
Narrow your results
Done
Selected tags
Tags
Integration with other JS libraries
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Learn how
2 3
4
5 6
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how