I'm trying to get the KendoTree view working with checkbox options. I have copied the exact same code and added:
<link href="kendo/kendo.common.min.css" rel="stylesheet" />
<link href="kendo/kendo.default.min.css" rel="stylesheet" />
<script src="kendo/jquery.min.js" />
<script src="kendo/kendo.all.min.js" />
<script>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },
{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
]
},
{
id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}]
});
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
$("#treeview").data("kendoTreeView").dataSource.bind("change", function() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
});
</script>
It is giving me -
Uncaught TypeError: Cannot read property 'dataSource' of undefined.
Any help would be great.
Thanks.
Sonu
Seems to me you missed the control from your html, works for me :
http://jsfiddle.net/vojtiik/L38KA/1/
<div id="treeview">
</div>
Nope- I cannot get it to work.. I'm using FlatUI theme so it might be the issue with the theme.
Uncaught TypeError: Cannot read property 'dataSource' of undefined index2.html:211
(anonymous function) index2.html:211
i.extend.trigger kendo.all.min.js:9
nt.extend._process kendo.all.min.js:11
nt.extend._change kendo.all.min.js:11
b.isFunction.i jquery.min.js:3
i.extend.trigger kendo.all.min.js:9
(anonymous function) kendo.all.min.js:11
i.extend.trigger kendo.all.min.js:9
(anonymous function) kendo.all.min.js:11
i.extend.trigger kendo.all.min.js:9
nt.extend._process kendo.all.min.js:11
nt.extend._change kendo.all.min.js:11
b.isFunction.i jquery.min.js:3
i.extend.trigger kendo.all.min.js:9
(anonymous function) kendo.all.min.js:11
i.extend.trigger kendo.all.min.js:9
(anonymous function) kendo.all.min.js:11
i.extend.trigger kendo.all.min.js:9
nt.extend._process kendo.all.min.js:11
nt.extend._change kendo.all.min.js:11
b.isFunction.i jquery.min.js:3
i.extend.trigger kendo.all.min.js:9
(anonymous function) kendo.all.min.js:11
i.extend.trigger kendo.all.min.js:9
nt.extend.set kendo.all.min.js:11
Rt.extend.set kendo.all.min.js:11
v.extend._checkboxChange kendo.all.min.js:24
b.isFunction.i jquery.min.js:3
b.event.dispatch jquery.min.js:3
v.handle
Related
I am trying to write assertion for a menu list which render after full fill the expression condition and sorted such as:
{packageFamilyId &&
packageMap[packageFamilyId] &&
packageMap[packageFamilyId].sort(Constants.sortAlphabeticallyAscending)
.map((p) => (
<MenuItem value={p.id} key={p.id} data-test="package-menu">{p.name}</MenuItem>
}
I am passing props as:
const props = {
packageFamilyId: 1,
packageMap: [
{
packageFamilyId: [],
},
{
packageFamilyId: [
{
active: true,
code: "0",
id: 121,
is_price_applicable: false,
name: "ctest_name",
typeId: 2,
},
{
active: true,
code: "0",
id: 121,
is_price_applicable: false,
name: "btest_name",
typeId: 2,
},
{
active: true,
code: "0",
id: 121,
is_price_applicable: false,
name: "atest_name",
typeId: 2,
}
],
},
],
};
import React from "react";
import { shallow } from "enzyme";
import { componentName } from "./componentName ";
import componentNameMock from "../../../test/mockData/componentName";
describe("componentNameComponent", () => {
const wrapper = shallow(<component {...props} />);
const menuList = wrapper.find("[data-test='package-menu']");
expect(menuList .length()).toEqual(1);
});
But it is giving me Type Error:
TypeError: packageMap[packageFamilyId].sort is not a function
packageMap[packageFamilyId] &&
packageMap[packageFamilyId]
.sort(Constants.sortAlphabeticallyAscending)
............................................................................
where Constants.sortAlphabeticallyAscending is sorting function
sortAlphabeticallyAscending: (a, b) => {
if (a !== undefined && b !== undefined) {
if (a.name?.toLowerCase() < b.name?.toLowerCase()) return -1;
else if (a.name?.toLowerCase() > b.name?.toLowerCase()) return 1;
else return 0;
}
}
Issue
packageMap[packageFamilyId] is an object:
{
packageFamilyId: [
{
active: true,
code: "0",
id: 121,
is_price_applicable: false,
name: "ctest_name",
typeId: 2,
},
{
active: true,
code: "0",
id: 121,
is_price_applicable: false,
name: "btest_name",
typeId: 2,
},
{
active: true,
code: "0",
id: 121,
is_price_applicable: false,
name: "atest_name",
typeId: 2,
}
],
}
This is not an array nor is there a sort property that is a function that can be called. In otherwords, packageMap[packageFamilyId].sort is undefined and not callable.
Solution
Access the property that is an array and sort this.
{packageMap[packageFamilyId]?.packageFamilyId?.sort(
Constants.sortAlphabeticallyAscending
).map((p) => (
<MenuItem value={p.id} key={p.id} data-test="package-menu">
{p.name}
</MenuItem>
)
)}
Since there are actually 3 elements in the specified array the test should be updated to assert against the correct length. length is also a property, not a function to call.
describe("componentNameComponent", () => {
const wrapper = shallow(<component {...props} />);
const menuList = wrapper.find("[data-test='package-menu']");
expect(menuList.length).toEqual(3);
});
it worked with mockup setting , instead of familyPackageId string i gave value 1(index value).
it("expects to render package-menu ", () => {
const wrapper = shallow(<componentNameComponent{...props} />);
const menuList = wrapper.find("[data-test='package-menu']");
expect(menuList .length).toEqual(props.packageMap["1"].length);
});
packageMap: {
1: [
{
id: 4,
isPriceApplicable: true,
is_price_applicable: true,
name: "ctest_name",
packageAgentType: "FoS",
typeId: 1,
},
{
id: 3,
isPriceApplicable: true,
is_price_applicable: true,
name: "btest_name",
packageAgentType: "FoS",
typeId: 1,
},
{
id: 4,
isPriceApplicable: true,
is_price_applicable: true,
name: "atest_name",
packageAgentType: "FoS",
typeId: 1,
},
],
},
I'm using the TreeView component from Kendo UI library and I would like to know how to update the data in the tree. Is it possible?
This is my code:
class TreeViewTest extends React.Component {
dataSource = [
{
id: 123,
text: "aaaa",
expanded: true,
spriteCssClass: "rootfolder",
items: [
{
id: 2,
text: "aaa1",
expanded: true,
spriteCssClass: "folder",
items: [
{
id: 3,
text: "aaa2",
spriteCssClass: "html"
},
{
id: 4,
text: "aaa3",
spriteCssClass: "html"
},
{
id: 5,
text: "aaa4",
spriteCssClass: "image"
}
]
}
]
}
];
async componentDidUpdate(prevProps) {
if (this.props.endpoint !== prevProps.endpoint) {
init(this.props, this);
}
}
render() {
return (
<div>
<TreeView dataSource={this.dataSource} />
</div>
);
}
}
const init = async (props, _this) => {
const { endpoint, selectContent, setModal } = props;
const actions = props;
const response = await fetch(`${endpoint}/my/api/here`);
const body = await response.json();
/* some work on body here....*/
const data = [
{
id: 345,
text: "bbbb",
expanded: true,
spriteCssClass: "rootfolder",
items: [
{
id: 2,
text: "bbb1",
expanded: true,
spriteCssClass: "folder",
items: [
{
id: 3,
text: "bbb2",
spriteCssClass: "html"
},
{
id: 4,
text: "bbb3",
spriteCssClass: "html"
},
{
id: 5,
text: "bbb4",
spriteCssClass: "image"
}
]
}
]
}
];
_this.dataSource.push(data);
};
How can I update the dataSource after a remote call with the new data?
Before to install the react package I add a working solution with the Kendo UI jquery version and it worked fine with all the updates.
With the jquery version I have to set the options and I have the function setDataSource(data) and it works perfectly, now what I have to do?
Edit
I improved the code with the componentDidUpdate and the network call.
You could take a reference to the wrapped kendo.ui.TreeView element. Then you could call the function you have mentioned - setDataSource(data). Here is an example:
class TreeViewContainer extends React.Component {
wrappedWidget;
constructor(props) {
super(props);
this.dataSource = [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
}
]
}];
}
render() {
return (
<div>
<TreeView widgetRef={(el) => { this.wrappedWidget = el }} dataSource={this.dataSource} />
</div>
);
}
componentDidMount() {
// Simulate a response from a web request.
setTimeout(() => {
this.wrappedWidget.setDataSource(new kendo.data.HierarchicalDataSource({
data: [{
id: 1111, text: "My Documents1111", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 222, text: "Kendo UI Project222", expanded: true, spriteCssClass: "folder", items: [
{ id: 333, text: "about333.html", spriteCssClass: "html" },
{ id: 444, text: "index444.html", spriteCssClass: "html" },
{ id: 555, text: "logo555.png", spriteCssClass: "image" }
]
}
]
}]
}));
}, 1000)
}
}
ReactDOM.render(
<TreeViewContainer />,
document.querySelector('my-app')
);
I added highchart looking Page source but not visible on page
I followed this https://www.youtube.com/watch?v=FSg8n5_uaWs
how can ı solve this problem
my codes;
ts;
export class VerilerPage {
chartOptions : any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.chartOptions={
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
}
}
html;
<chart options="chartOptions" type="chart" ></chart>
Since you are using angular 2/4, you have to enclose options with []
<chart [options]="chartOptions" type="chart" ></chart>
I am having trouble trying to bind my data to the data gridOptions. I read that doing a refresh would help load the data however when I add the logic it errors out.
Please help...
<<<<<< HTML Code >>>>>>
<div ng-controller="MainCtrl">
<br />
<b>{{msg}}</b>
<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-pagination></div>
</div>
<<<<<< JavaScript Code >>>>>>>
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.pagination']);
app.controller('MainCtrl', function($scope, $filter, $http, $timeout) {
$scope.gridOptions = {
enableSorting: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableFiltering: true,
selectionRowHeaderWidth: 35,
rowHeight: 35,
multiSelect: true,
enableGridMenu: true,
columnDefs: [
{ name: 'client' },
{ name: 'qa_ver' },
{ name: 'qa_build_no' },
{ name: 'qa_build_date' },
{ name: 'prod_ver' },
{ name: 'prod_build_no' },
{ name: 'prod_build_date' },
{ name: 'prod_deploy_date' },
{ name: 'deploy_src' }
],
data: 'jsonData',
paginationPageSizes: [5, 10, 25, 50],
paginationPageSize: 5,
}
$timeout(function() {
getJSONData();
$scope.data = jsonData;
$scope.gridOptions.data = $scope.data;
}, 3000);
$scope.gridOptions = {
onRegisterApi: function(gridApi){ $scope.gridApi = gridApi;}
}
$scope.gridApi.core.refresh();
<<<<<< Error Thrown >>>>>>
TypeError: Cannot read property 'core' of undefined
at new <anonymous> (dashboard.html:114)
at Object.invoke (angular.js:4625)
at $controllerInit (angular.js:10027)
at nodeLinkFn (angular.js:8965)
at compositeLinkFn (angular.js:8333)
at compositeLinkFn (angular.js:8336)
at compositeLinkFn (angular.js:8336)
at publicLinkFn (angular.js:8213)
at angular.js:1715
at Scope.$eval (angular.js:17025)
I believe the correct form should be :
$scope.gridOptions = {
enableSorting: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableFiltering: true,
selectionRowHeaderWidth: 35,
rowHeight: 35,
multiSelect: true,
enableGridMenu: true,
columnDefs: [
{ name: 'client' },
{ name: 'qa_ver' },
{ name: 'qa_build_no' },
{ name: 'qa_build_date' },
{ name: 'prod_ver' },
{ name: 'prod_build_no' },
{ name: 'prod_build_date' },
{ name: 'prod_deploy_date' },
{ name: 'deploy_src' }
],
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
}
data: 'jsonData',
paginationPageSizes: [5, 10, 25, 50],
paginationPageSize: 5,
}
$timeout(function() {
getJSONData();
$scope.data = jsonData;
$scope.gridOptions.data = $scope.data;
}, 3000);
$scope.gridApi.core.refresh();
..
..
.
}
I want to make a tree Grid by react-redux-grid. However I got the error: Uncaught TypeError: Cannot read property 'map' of undefined.
I had followed the instruction by https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_TREE.md
Not sure what is going wrong, the codes is as below:
import { Grid } from 'react-redux-grid';
export const Tree = ({ store }) => {
const dataSource = {
data: [
{
id: 11,
parentId: 1,
name: 'Category 11',
editable: false,
leaf: true,
categoryCode: '12jf-3h3h-11'
}
],
partial: true
}
const data = {
root: {
id: -1,
parentId: null,
children: [
{
id: 1,
parentId: -1,
name: 'Category 1',
categoryCode: 'as-ffw-34neh-',
editable: true,
children: [
{
id: 12,
parentId: 1,
leaf: false // there are children for this record that haven't been fetched yet
// ... rest of data
},
{
id: 13,
parentId: 1
// ... rest of data
}
]
}
]
}
}
const treeConfig = {
stateKey: 'tree-grid-1',
gridType: 'tree', // either `tree` or `grid`,
showTreeRootNode: false, // dont display root node of tree
columns: [
{
dataIndex: 'category',
name: 'Category',
expandable: true // this will be the column that shows the nested hierarchy
},
{
dataIndex: 'categoryCode',
name: 'Category Code',
expandable: true // can be set on multiple columns
},
{
dataIndex: 'editable',
name: 'Editable',
expandable: false // will be displayed as flat data
}
],
data: data
dataSource: dataSource
};
return (
<Grid { ...treeConfig } />
);
}
//another page
let React = require('react');
import thunk from 'redux-thunk';
import Tree from '../Tree.jsx';
const reducers = {
//some reducers here
}
const store = createStore(reducer,applyMiddleware(thunk));
let gridPage = React.createClass({
render: function() {
return(
<Provider store={store}>
<Tree store={store} />
</Provider>
)
}
});