Telerik Forums
Kendo UI Integration Forum
or
Ask question
All Questions
Unanswered
Answered
188 questions
6 answers
688 views
Grid Collumn Template with React+Redux

I am using React+Redux along with React wrappers for the Kendo UI Grid component. Here's a crop of my code:

import React, { Component } from 'react'
import { Grid } from '@progress/kendo-grid-react-wrapper';
 
class InputOrderComponent extends Component {
    
    static propTypes = {
        ...
        actionAdd: PropTypes.func,
        ...
    }
    render() {
        const { inputOrder, actionSelect, listBranch, actionChange, actionAdd, actionRetrieveBranch,  } = this.props;
         
        return (
           .....
           <Grid
                                    dataSource={new kendo.data.DataSource({
                                        transport: {
                                            read: function(e){
                                                actionRetrieveBranch()
                                                .then(res =>{                                              
                                                    e.success(res)
                                                })                                           
                                            }
                                        },
                                    })}
                                     
                                    filterable={true}
                                    sortable={true}
                                    groupable={false}
                                    pageable={true}
                                    columns={[
                                        {title:"No", filterable: false, template: '#='+ ++record  +'#', width:44},
                                        {field:"branchCode", title:"Part Number"},
                                        {field:"branchDescription", title:"Part Description"},
                                        {field: "phone1", title:"HET", width:100},
                                        {field: "branchCode", title:"Action", width:120, template:"<button onClick=\"actionAdd.bind(this,'branchCode')\" type='button' class='k-button k-button-icontext'><i class='fa fa-plus-circle' style='margin-right: 5px'></i> Pilih</button>"},
                                    ]}
                                    dataBinding={function() {
                                        //this.setState({
                                            //record : (this.dataSource.page() -1) * this.dataSource.pageSize()
                                        //})
                                        console.log(this.dataSource.data())                                
                                    }
                                    }
                                />
                 ....
         )
    }
}

I'm having diffucilties having my onClick action recognized. While the onClick event does trigger, the actionAddaction isn't. It throws a "Uncaught ReferenceError: actionAdd is not defined
    at HTMLButtonElement.onclick (inputOrder:1)" error.

Is this related to how the documentation mentions that react components are not supported in templates? I'm also having difficulties replicating this documentation on how to add Row Numbers. Records, in the template, throws an undefined error just like the above, unless I initialize the record variable outside the main component class.

Help would be appreciated.

Integration with other JS libraries
Stefan
Telerik team
 answered on 06 Dec 2017
7 answers
156 views
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
135 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
149 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
373 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
187 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
162 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
Iron
Iron
Veteran
 answered on 30 Aug 2017
2 answers
1.0K+ 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
492 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
2.3K+ 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
Narrow your results
Done
Selected tags
Tags
Integration with other JS libraries
+1 more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
2 3
4
5 6
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how