I have been trying to build a very simple treemap(no hierarchy) using KendoUI, by providing it some json data as a datasource. This should have been very straightforward and simple as it's a common use-case. However, I am having no luck with it, after spending hours on it.
I tried this :
<body>
<div id="treemap"></div>
<script>
var data = [
{
name: "foo123",
value: 10
},
{
name: "foo234",
value: 20
}
];
$("#treemap").kendoTreeMap({
dataSource: data,
valueField: "value",
textField: "name"
});
</script>
</body>
Any suggestions on what I may be missing?
As stated in the docs "TreeMap is a visualization for hierarchical":
TreeMapping is a visualization for hierarchical data which uses nested
rectangles. Each rectangle's size and color is related to the
structure of the data, allowing you to more easily identify trends and
patterns
So try to add a "root" level that wraps your two elements:
<body>
<div id="treemap"></div>
<script>
var data = [{
name: "foo",
value: 1,
items: [{
name: "foo123",
value: 10
},
{
name: "foo234",
value: 20
}]
}];
$("#treemap").kendoTreeMap({
dataSource: data,
valueField: "value",
textField: "name"
});
</script>
</body>
Related
I am using the built in functionality of Kendo Grid to export the grid data in pdf and excel http://demos.telerik.com/kendo-ui/grid/pdf-export. It is working fine for me. I want to customize the data that is exported i.e. add some additional columns and remove some of the columns of grid. Is there any way to customize the export data using templates or some other feature.
Thanks in advance.
You have two options:
Define a second grid with the columns that you want to export to PDF and when asked to export actually export the second. Both grids should share the datasource so filtering, orders... will be shared.
Intercept pdfExport event that is fired before the PDF is generated and hide/show the columns using showColumn and hideColumn methods.
The following code shows second approach (despite I -personally- prefer first). You will see that before clicking on export button you see EmployeeID but the PDF does not contain this column but includes Country.
$(document).ready(function() {
kendo.pdf.defineFont({
"DejaVu Sans" : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
});
var grid = $("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
fileName: "Kendo UI Grid Export.pdf",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
},
dataSource: {
type: "odata",
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
}
}
},
columns: [
{
title: "Photo",
width: 140,
template :'<img src="http://demos.telerik.com/kendo-ui/content/web/Employees/#: data.EmployeeID #.jpg" alt="#: EmployeeID #" />'
},
{ field: "FirstName" },
{ field: "LastName" },
{ field: "Country", hidden: true },
{ field: "EmployeeID" }
],
scrollable: false,
pdfExport: function(e) {
grid.showColumn(3);
grid.hideColumn(4);
}
}).data("kendoGrid");
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/pako_deflate.min.js"></script>
<div id="grid"></div>
I am struggling to get a custom edit command link working for kendo ui grid. Say I have following grid
<div id="request-grid" style="height: 400px;"></div>
<script type="text/javascript">
$("#request-grid").kendoGrid({
dataSource: dataSource,
columns: [{
field: "Id", title: "Id", width: 20
}, {
field: "FromName", title: "Req Name", width: 150
....
}, {
command: [{ name: "edit", template: kendo.template('#Html.ActionLink("Edit","_SoftwareRequestEdit","SoftwareRequest",new {id = "#= Id #"}, null)') }]
}],
});
</script>
I have used the code above for the edit link, but I don't remember the specifics. I have been scratching my head for the correct syntax for 2 hours now and still couldn't figure out. The above edit command template generates following link
Edit
whereas I was expecting this
Edit
for grid row with Id equal to 3
Any ideas how to correctly generate edit links with correct Id values
Remove kendo.template() from the definition of the template, KendoUI already knows that it has to be a template so it expects a string and not a kendo.template` object. See documentation and examples in their documentation here.
Example:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "<strong>#: name # </strong>"
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>
I Use a kendo UI list view. But even though I use a datasource, I don't see any data in the list view.
Can anybody help me out?
Here is my code,
Created a div #listView and a template .Then trying to bind data to the list view
<div id="listView"></div>
And this is the template i use
Template created using Kendo UI
<script type="text/x-kendo-tmpl" id="template" >
<div class="product">
<h3>#:title#</h3>
<p>#:kendo.toString(year, "c")#</p>
</div>
</script>
here i bind the datasource
This doesnt work although i bind the data.Is there any other way of binding data
var dataSource1 = new kendo.data.DataSource({
transport: {
read: {
dataType: "json",
data: [
{ title: "Star Wars: A New Hope", year: 1977 },
{ title: "Star Wars: The Empire Strikes Back", year: 1980}
]
}
}
});
$("#listView").kendoListView({
dataSource: dataSource1,
template: kendo.template($("#template").html())
});
Since you are binding your listview to local data, there is no need to call a transport... Just bind the data directly to the datasource :
var dataSource1 = new kendo.data.DataSource({
data: [
{ title: "Star Wars: A New Hope", year: 1977 },
{ title: "Star Wars: The Empire Strikes Back", year: 1980}
]
});
You can have a look to the demo page of a datasource here : http://demos.kendoui.com/web/datasource/index.html.
PS : by the way, the format "c", is for currency (see the documentation). Here you can call directly the year in your template : #:year#.
My case is a search window with around 20 properties, in which the user can choose to specify search criteria. Each property has a corresponding checkbox which toggles if the prop is included in the search result or not. The search result is then displayed in a kendo grid.
Simplified code which should illustrate the issue (kendo ui complete ver. 2012.2.710):
<input type="checkbox" onclick="fnShowHide(1);" name="showSearchColumn" id="checkShowField1" />
<div id="example" class="k-content">
<div id="kendoGridTest"></div>
</div>
<script>
function fnShowHide( iCol )
{
$('#kendoGridTest').data("kendoGrid").options.columns[iCol].hidden = false;
$('#kendoGridTest').data("kendoGrid").refresh();
}
</script>
The MVC3-controller method returns data from search is of type JsonResult (given as jsonResultSearchResult below):
$('#kendoGridTest').kendoGrid({
dataSource: jsonResultSearchResult,
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
Address: { type: "string" }
}
}
},
sortable: true,
resizable: true,
columns: [{
field: "FirstName",
width: 90,
title: "First name"
},
{
field: "LastName",
width: 120,
hidden: true,
title: "Last name"
},
{
field: "Address",
width: 140,
title: "Adr"
}
]
});
After performing a search, the grid fills with the right data and LastName is indeed hidden. But if the user now checks the checkShowField1 control, I would like the grid to refresh with all three cols visible. It does not. fnShowHide() does not do the job.
I must admit I was looking for anything of a type of Columns collection in a QuickWatch window while debugging in VS. The collection in fnShowHide contains the right data from when the grid was initialized, and I'm able to manipulate the .hidden property, but the grid still does not display the column.
I'm still a bit confused whether dynamic hide/show of cols is supported but this accepted answer from a Telerik employee looked promising.
To hide a column on the client side with JavaScript you should use the hideColumn() and to show it you use the showColumn(). Both methods have several overloads - you either pass the index of the column or you pass the name of the field the column is bound to.
For example:
var grid = $('#GridID').data('kendoGrid');
grid.hideColumn(2);
//or show it
grid.showColumn("OrderDate") // lets say thats the field name of the same column
The post you linked shows how to Hide/Show column with the MVC Wrappers which is slightly different.
I am trying to code two filteringselects which should both change according to data entered into any of the forms.
So data entered into fs1 should trigger changes in fs2.
Data entered into fs2 should trigger changes in fs1.
I am in a spring environment which in my case means that the dojo code is in a jsp file and the filtering select fields are populated through a Controller class on the server side using #ModelAttribute annotations to make the data available as a variable in the jsp file.
I have the relation data on the Java side so it's available through the controller.
Here is what confuses me at the moment.
I am new to DOJO and the documentation on the DOJO support site is a little hard to grasp for me. I would like to see a conceptual list of what is needed to accopmplish and connect the separate stores of my filteringselects.
When there is a change in one of the filteringselects, how do I inform the controllerclass of the changes and send the data that remains in the filteringselect?
This question could also be read as: how can I call a method with input parameters that hold the data available in the edited filteringselect?
I suggest we work on this in two incremental parts:
Get the first FilteringSelect's onChange event working
Wire them up to use server data stores
The following code sample takes a Dojo Campus' codependent FilteringSelect example and simplifies it so that its data stores are local. It shows how to programmatically instantiate two FilteringSelects with the second being dependent on the first by an onChange event handler.
Can you please try running it and let me know if you get it working?
Once we get your first FilteringSelect triggering filtering on the second, I will edit to add an explanation on how to convert them to use server side data stores.
<html>
<head>
<title>Test File</title>
<link type="text/css" rel="stylesheet" href="dijit/themes/tundra/tundra.css"/>
</head>
<body class="tundra">
<label for="state">State:</label>
<input id="state">
<label for="city">City:</label>
<input id="city">
<script type="text/javascript" src="dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(function() {
var cityJson = {
label: 'name',
items: [{ name: 'Albany', state: 'NY' },
{ name: 'New York City', state: 'NY' },
{ name: 'Buffalo', state: 'NY' },
{ name: 'Austin', state: 'TX' },
{ name: 'Houston', state: 'TX' }]
};
var stateJson = {
identifier: 'abbreviation',
label: 'name',
items: [ { name: 'New York', abbreviation: 'NY' },
{ name: 'Texas', abbreviation: 'TX' } ]
};
new dijit.form.ComboBox({
store: new dojo.data.ItemFileReadStore({
data: cityJson
}),
autoComplete: true,
query: {
state: "*"
},
style: "width: 150px;",
required: true,
id: "city",
onChange: function(city) {
dijit.byId('state').attr('value', (dijit.byId('city').item || {
state: ''
}).state);
}
},
"city");
new dijit.form.FilteringSelect({
store: new dojo.data.ItemFileReadStore({
data: stateJson
}),
autoComplete: true,
style: "width: 150px;",
id: "state",
onChange: function(state) {
dijit.byId('city').query.state = state || "*";
}
},
"state");
});
</script>
</body>
</html>
in the namespace of the jsp:
xmlns:springform="http://www.springframework.org/tags/form"
sample form:
<springform:form action="#" >
<label for="country">Country:</label>
<springform:select id="country" path="country" items="${countryList}" itemLabel="country" itemValue="id"/>
<div id="citySelectDiv"></div>
</springform:form>
javascript code:
<script type="text/javascript">
<![CDATA[
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
function countryChanged(dataFromServer){
//convert json to dojo filteringSelect options
var options = {
identifier: 'id',
label: 'city',
items: dataFromServer
};
var cityStore =new dojo.data.ItemFileReadStore({data : options});
// create Select widget, populating its options from the store
if (!dijit.byId("citySelectDiv")) {
//create city selction combo
new dijit.form.FilteringSelect({
name: "citySelectDiv",
store: cityStore,
searchAttr : "city",
}, "citySelectDiv");
}else{
//if already created the combo before
dijit.byId('citySelectDiv').set('value',null);
dijit.byId('citySelectDiv').store = cityStore;
}
}
Spring.addDecoration(new Spring.ElementDecoration({
elementId : "country",
widgetType : "dijit.form.FilteringSelect",
widgetAttrs : {
promptMessage: "Select a Country",
required : true,
onChange : function(){
var xhrArgs = {
url: "ajax/country/" +dijit.byId('country').get('value'),
handleAs: 'json',
load: function(dataFromServer) {
countryChanged(dataFromServer);
}
};
//make the ajax call
dojo.xhrGet(xhrArgs);
}
}
}));
Sample Controller method:
#ResponseBody
#RequestMapping("/ajax/country/{country}")
public List<City> clientSelection(#PathVariable("country") String country ) {
log.info("Country = {} ",country);
return cityService.findCitiesByCountry(country);
}