I have an application that uses kendo grid, and when I try to run the application, I get this error
JavaScript runtime error: 'kendo' is undefined
Below is my code. Where do I need to define kendo?
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<div id="rpViewContent" class="view-content">
<div id="purchdGrid"
data-role="grid"
data-resizable="true"
data-navigatable="true"
data-editable="true"
data-pageable="false"
data-columns="[
{ 'field': 'PO', 'title': '<b>PO #', 'width': 65 },
{ 'field': 'Line', 'title': '<b>Line #', 'width': 65 },
{ 'field': 'Item', 'title': '<b>Item #', 'width': 65 },
]"
data-bind="source:purchDataSource"
style="height: 55%">
</div></div>
<script>
var viewModel = kendo.observable({
purchDataSource: new kendo.data.DataSource({
schema: {
model: {
id: "ID",
fields: {
Line: { type: "string" },
Item: { type: "string" }
}
}
},
data: [
{ ID: "43824", Line: "1", Item: "Thus is a test 1" },
{ ID: "43825", Line: "2", Item: "Thus is a test 2" },
{ ID: "43826", Line: "3", Item: "Thus is a test 3" }
]
})
});
kendo.bind($("#purchViewContent"), viewModel);
</script>
This snippet shows a valid Kendo object, ensure your link and script tags are in the correct place in the HTML document.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css" />
</head>
<body>
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<script>
console.log(kendo);
</script>
</body>
</html>
Related
I have a gijgo grid with a column Year(which has values 2011,2012,2013,etc). When I debug the json data returned in javascript, the the year value is number but when I filter this grid on this column, I get an error -"Uncaught TypeError: f.toUpperCase is not a function at gijgo.min.js:1"
The javascript code is below
function CreateRegionChartGrid() {
var retrievedObject = JSON.parse(localStorage.getItem('stackedRegionChartSourceData'));
if (retrievedObject !== null) {
///Make Grid visible
document.getElementById('regionChartGrid').style.visibility = "visible";
regChartGrid = $('#regionChartGrid').grid({
primaryKey: retrievedObject.salesByRegQuery.ProductCategoryKey,
dataSource: retrievedObject.salesByRegQuery,
responsive: true,
columns: [
{ field: 'ProductCategoryKey', hidden: true },
{ field: 'EnglishProductCategoryName', sortable: true, title: 'Category' },
{ field: 'SalesTerritoryKey', hidden: true },
{ field: 'SalesTerritoryRegion', sortable: true, title: 'Region' },
{ field: 'CalendarYear', sortable: true, title: 'Year' },
{ field: 'Total_Sales', sortable: true, title: 'Total Sales' },
{ field: 'Total_cost', sortable: true, title: 'Total Cost' },
{ field: 'Total_Margin', sortable: true, title: 'Total Margin' }
],
pager: { limit: 5 }
});
regChartGrid.render(retrievedObject.salesByRegQuery);
}
}
$('#btnRegionSearch').on('click', function () {
regChartGrid.reload({
page: 1, EnglishProductCategoryName: $('#txtProductCategory').val(),
SalesTerritoryRegion: $('#txtRegion').val(), CalendarYear: parseInt($('#txtCalendarYear').val(),10)
});
});
$('#btnRegionClear').on('click', function () {
$('#txtProductCategory').val('');
$('#txtRegion').val('');
$('#txtCalendarYear').val('');
regChartGrid.reload({ EnglishProductCategoryName: '', SalesTerritoryRegion: '', CalendarYear: '' });
});
Below is the code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<script src="https://gijgo.com/Areas/Development/dist/libraries/jquery/jquery.js"></script>
<script src="https://gijgo.com/Areas/Development/dist/modular/js/core.js" type="text/javascript"></script>
<link href="https://gijgo.com/Areas/Development/dist/modular/css/core.css" rel="stylesheet" type="text/css">
<link href="https://gijgo.com/Areas/Development/dist/modular/css/grid.css" rel="stylesheet" type="text/css">
<script src="https://gijgo.com/Areas/Development/dist/modular/js/grid.js"></script>
</head>
<body style="padding: 8px;">
<div class="card">
<div class="card-body" style="position: relative;">
<div>
<input id="txtName" class='display-inline-block' style="float:left;" type="text" placeholder="Product Category" />
<input id="txtPlaceOfBirth" class='display-inline-block' style="float:left;" type="text" placeholder="Region" />
<input id="txtdYear" class='display-inline-block' style="float:left;" type="number" placeholder="Year" />
<button id="btnRegionSearch" style="float:left;" type="button" class="btn btn-default">Search</button>;
<button id="btnRegionClear" style="float:left;" type="button" class="btn btn-default">Clear</button>
</div>
<table id="grid"></table>
</div>
</div>
<script>
var grid, data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria', CountryName: 'Bulgaria', dYear: '2011' },
{ 'ID': 2, 'Name': 'Ronaldo Luís Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil', CountryName: 'Brazil', 'dYear': 2012 },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England', CountryName: 'England', 'dYear': 2012 },
{ 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany', CountryName: 'Germany', 'dYear': 2011 },
{ 'ID': 5, 'Name': 'James Rodríguez', 'PlaceOfBirth': 'Cúcuta, Colombia', CountryName: 'Colombia', 'dYear': 2013 },
{ 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria', CountryName: 'Bulgaria', 'dYear': 2014 }
];
grid = $('#grid').grid({
dataSource: data,
columns: [{ field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' }, { field: 'dYear', type: 'number', cssClass: 'grid-number' }]
});
$('#btnRegionSearch').on('click', function () {
grid.reload({
page: 1, EnglishProductCategoryName: $('#txtName').val(),
SalesTerritoryRegion: $('#txtPlaceOfBirth').val(), CalendarYear: parseInt($('#txtdYear').val().toString(), 10)
});
});
</script>
</body>
</html>
In the snippet, I have given the column type explicitly as number for year, the filter on this column doesn't work for this grid. I couldn't find any gijgo example or post about filtering grid on a column which returns number. Please help me resolve this issue.
Since Gijgo Grid only allows filtering on fields which are bound with only string values, I converted my numeric field "CalendarYear" in javascript array object to string before binding the data to the grid, so now since "CalendarYear" is string, filter is working on it.
In the code below, unable to set the checkbox to checked. I would like to set certain checkbox checked=true. is there any way to solve the problem in kendo-mvvm where the databind will be done in the html part?
expected output is
[ ]General
[X]Name
[ ]Device
[X]Status
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<script>
$(function() {
$("#treeview").kendoTreeView({
dataSource: {
data: [{
id: 7,
parent_id: 0,
text: "Work Order assignment",
value: "Work Order assignment",
expanded: true,
items: [
{ id: 71, parent_id: 7, text: "Name", value: "woName" },
{ id: 72, parent_id: 7, text: "Device", value: "woDevice" },
{ id: 73, parent_id: 7, text: "Status", value: "woStatus" }]
}]
},
checkboxes: true
});
var values = ["woName","woStatus"];
var setTreeViewValues = function(values) {
var tv = $("#treeview").data("kendoTreeView");
tv.dataItems().forEach(function(dataItem) {
if (values.indexOf(dataItem.text) > -1) {
dataItem.set("checked", true);
}
});
};
setTreeViewValues(values);
});
</script>
</head>
<body>
<div id="treeview"></div>
</body>
</html>
$("#treeview").data("kendoTreeView").dataItems() this method does not return all items in tree. It returns first level items. So if you want to check child nodes you may want to travel nodes recursively.
indexOf(string) function doesn't work with javascript arrays. You need to get values in loop.
http://www.w3schools.com/jsref/jsref_indexof.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<script>
$(function() {
$("#treeview").kendoTreeView({
dataSource: {
data: [{
id: 7,
parent_id: 0,
text: "Work Order assignment",
value: "Work Order assignment",
expanded: true,
items: [
{ id: 71, parent_id: 7, text: "Name", value: "woName" },
{ id: 72, parent_id: 7, text: "Device", value: "woDevice" },
{ id: 73, parent_id: 7, text: "Status", value: "woStatus" }]
}]
},
checkboxes: true
});
var dataItems = $("#treeview").data("kendoTreeView").dataItems();
setTreeViewValues(dataItems);
});
var values = ["woName","woStatus"];
function setTreeViewValues(dataItems){
dataItems.forEach(function(dataItem){
values.forEach(function(value){
if (value.indexOf(dataItem.text) > -1) {
dataItem.set("checked", true);
}
if(dataItem.hasChildren){
// checking child dataItems recursively
setTreeViewValues(dataItem.children.data());
}
});
});
}
</script>
</head>
<body>
<div id="treeview"></div>
</body>
</html>
I'm building a Kendo Grid using the MVVM pattern and I want 2 custom filters:
A general grid filter with extra = false and custom operators
A custom column filter with a combobox
Very similar to this Kendo Grid demo. I just can't seem to get it working with MVVM pattern using data-filterable attribute or filterable ui on the column:
<div data-role="grid"
data-filterable="customGridFilter"
data-columns="[
{ field: 'Id', hidden: 'true' },
{ field: 'Name', filterable: '{ ui: customNameFilter }' },
{ field: 'Value' }
]"
data-bind="source: gridDs">
</div>
I've created a JS Fiddle to illustrate what I'm going for.
Actually it just missed some point like
data-filterable="customGridFilter" should become
data-filterable="true",
and also in the kendo dojo they are using jQuery 1.9.1 and yours is
compact(edge) which cause the issue.
After changing to jQuery 1.9.1 it works fine like below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="test">
<script>
var customNameFilter = customNameFilter || null;
</script>
<div data-role="grid" data-filterable="true" data-columns="[
{ field: 'Id', hidden: 'true' },
{ field: 'Name', filterable: { ui: customNameFilter } },
{ field: 'Value' }
]" data-bind="source: gridDs"></div>
</div>
<script>
$(document).ready(function() {
customNameFilter = function(e) {
console.log("test")
e.kendoComboBox({
dataSource: {
data: [{
Id: 1,
Name: "Test1"
}, {
Id: 2,
Name: "Test2"
}, {
Id: 3,
Name: "Test3"
}]
},
dataValueField: "Id",
dataTextField: "Name",
filter: "contains"
});
};
var viewModel = kendo.observable({
gridDs: new kendo.data.DataSource({
data: [{
Id: 1,
Name: "Test1",
Value: 3
}, {
Id: 2,
Name: "Test2",
Value: 5
}, {
Id: 3,
Name: "Test3",
Value: 2
}, {
Id: 4,
Name: "Test4",
Value: 7
}]
}),
customGridFilter: {
extra: false,
operators: {
string: {
contains: "Contains",
doesnotcontain: "Does not contain",
eq: "Is equal to",
neq: "Is not equal to",
startswith: "Starts with",
endswith: "Ends with"
}
}
},
});
kendo.bind($('#test'), viewModel);
});
// this doesn't work
//var grid = $('#test').data('kendoGrid');
//grid.options.filterable = customFilter;
</script>
</body>
</html>
Going through my first SlickGrid examples. I encounter this issue where the header row that shows the column names would simply run way pass the table itself.
I am attaching a screenshot that shows the misbehavior. Please pay attention to the length of the header where the column names appear.
My code is below. Please help.
<html>
<head>
<link rel="stylesheet" href="./slick/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="./slick/examples/examples.css" type="text/css"/>
<script src="./slick/lib/jquery-1.7.min.js"></script>
<script src="./slick/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="./slick/lib/jquery.event.drag-2.0.min.js"></script>
<script src="./slick/slick.editors.js"></script>
<script src="./slick/slick.core.js"></script>
<script src="./slick/slick.grid.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var grid,
data = [],
columns = [
{ id: "col1", name: "Col1", field: "col1"},
{ id: "col2", name: "Col2", field: "col2" },
{ id: "col3", name: "Col3", field: "col3" },
{ id: "col4", name: "Col4", field: "col4" },
{ id: "col5", name: "Col5", field: "col5" },
{ id: "col6", name: "Col6", field: "col6" }
],
options = {
editable: false,
enableAddRow: true,
enableCellNavigation: false,
autoHeight: true
};
for (var i = 5; i-- > 0;) {
data[i] = {
col1: "",
col2: "",
col3: "",
col4: "",
col5: "",
col6: ""
};
}
grid = new Slick.Grid("#container", data, columns, options);
</script>
</body>
</html>
Setting the width of the div container to the exact width of the table resolves the problem.
<div id="container" style="width:480px;"></div>
I am new to ExtJs and I am trying to follow this tutorial:
http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture
However, when I get to the part where the grid is actually suppose to become visible, I get an error in the Javascript console that says: "Type error: name is undefined".
I have the following files,
app.js:
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userList'
}
});
}
});
app/controller/Users.js
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List'],
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('This panel was rendered');
}
});
app/view/user/List.js
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
title : 'All Users',
initComponent: function() {
this.store = {
fields: ['name', 'email'],
data : [
{name: 'Ed', email: 'ed#sencha.com'},
{name: 'Tommy', email: 'tommy#sencha.com'}
]
};
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
}
});
and of course Index.html
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="ExtJs/ext-4.1.1a/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJs/ext-4.1.1a/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Thanks
You've changed the case:
xtype: 'userList'
alias : 'widget.userlist'