Questions on Kendo UI for jQuery Forum

8 answers

396 views

Get field name in filterable UI javascript function

Hi

I am using the following syntax to use a the javascript function for adding a dropdown to a filter within a column of a grid:

columns: [
           {
                title: "Typ",
                field: "FileExtension",
                width: 50,
                filterable: {
                   ui: dropDownFilter
               }
            },
            {
                title: "Titel",
                field: "Title",
                width: 360,
                filterable: {
                   ui: dropDownFilter
               }
            },

Within the javascript function "typeFilter" I would like to know the column or better the field of the column
to build a javasript function that can work dynamically for several columns.
So is there a way to get the field ("FileExtension") within the javascript function or a way to pass it down to it?

function dropDownFilter(element) {
       element.field ?????
}

Thanks for your help!

Best regards,

Pascal Hohensträter

Grid

answered on 29 Feb 2016

5 answers

212 views

Angular scatter chart datasource multiple series

Hello,

I am trying to create multiple series in a scatter chart using the datasource property.

However I am not able to make it work, maybe I'm missing something?

Here's the code, using data fro jquery example from the page:

<html>
<head>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="kendo/js/kendo.all.min.js"></script>

<link rel="stylesheet" href="kendo/styles/kendo.common.min.css"></link>
<link rel="stylesheet" href="kendo/styles/kendo.default.min.css"></link>

<script>

angular.module("chartApp", ["kendo.directives"])

.controller("ScatterChart", ["$scope", function($scope){

$scope.dataSource = {
title: {
text: "Rainfall - Wind Speed"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "scatter"
},
series: [{
name: "January 2008",
data: [
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
},{
name: "January 2009",
data: [
[6.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [2.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
},{
name: "January 2010",
data: [
[21.7, 3], [13.6, 3.5], [13.6, 3], [29.9, 3], [21.7, 20], [19, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [16.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [13.6, 6], [13.6, 8], [13.6, 5], [10.9, 4], [16.4, 0], [32.6, 10.3], [21.7, 20.8], [24.5, 0.8], [16.4, 0], [21.7, 6.9], [13.6, 7.7], [16.4, 0], [8.1, 0], [16.4, 0], [16.4, 0]]
}],
xAxis: {
max: 35,
title: {
text: "Wind Speed [km/h]"
},
crosshair: {
visible: true,
tooltip: {
visible: true,
format: "n1"
}
}
},
yAxis: {
min: -5,
max: 25,
title: {
text: "Rainfall [mm]"
},
axisCrossingValue: -5,
crosshair: {
visible: true,
tooltip: {
visible: true,
format: "n1"
}
}
}};

}]);

</script>
</head>
<body ng-app="chartApp">
<div ng-controller="ScatterChart">

<div kendo-chart
k-data-source="dataSource"></div>

</div>

</body>
</html>

Charts

answered on 29 Feb 2016

1 answer

467 views

Autocomplete popup suggestion always above input

Is there a way to show autocomplete popup suggestion always above input. Here's what we have tried: http://dojo.telerik.com/oxUbe

Also I had idea that popup can be appendedTo DOM element (div) with fixed width and height, but popup has position: absolute, so this isn't an option.

AutoComplete

answered on 29 Feb 2016

1 answer

511 views

Initialize from table containing input elements

Hi All,

I need to initialize a Kendo UI grid from an existing table that contains a column with a "Select All" check box in the header and also check boxes in each row.

The example below shows exactly what I want, this is taken from Kendo's examples.

This issue is, the check box in each row is not rendered in the kendo generated grid. Is there a way to overcome this issue?

Thanks

<table id="grid">

<thead>

<tr>

<th><input type="checkbox" id="cbSelectAll"/></th>

<th data-field="make">Car Make</th>

<th data-field="model">Car Model</th>

<th data-field="year">Year</th>

<th data-field="category">Category</th>

<th data-field="airconditioner">Air Conditioner</th>

</tr>

</thead>

<tbody>

<tr>

<td><input type="checkbox" class='checkbox' value='1' /></td>

<td>Audi</td>

<td>A4</td>

<td>2002</td>

<td>Saloon</td>

<td>Yes</td>

</tr>

<tr>

<td><input type="checkbox" class='checkbox' value='2' /></td>

<td>BMW</td>

<td>535d</td>

<td>2006</td>

<td>Saloon</td>

<td>Yes</td>

</tr>

<tr>

<td><input type="checkbox" class='checkbox' value='3' /></td>

<td>BMW</td>

<td>320d</td>

<td>2006</td>

<td>Saloon</td>

<td>No</td>

</tr>

<tr>

<td><input type="checkbox" class='checkbox' value='4' /></td>

<td>VW</td>

<td>Passat</td>

<td>2007</td>

<td>Saloon</td>

<td>No</td>

</tr>

<tr>

<td><input type="checkbox" class='checkbox' value='5' /></td>

<td>VW</td>

<td>Passat</td>

<td>2008</td>

<td>Saloon</td>

<td>Yes</td>

</tr>

</tbody>

</table>

<script>

$(document).ready(function() {

$("#grid").kendoGrid({

height: 550,

sortable: true

});

</script>

Grid

answered on 29 Feb 2016

1 answer

1.2K+ views

Kendo Grid take and Skip Parameters for Jquery Load

I am loading the Kendo grid with Jquery Ajax call as following. I am trying add Paging to Grid Unable but do not know where put the Paging info because data is loaded from Jquery. Where and how should pass the parameter take and Skip Parameters ?

Grid

answered on 29 Feb 2016

2 answers

181 views

expand with optional entity

I'm trying to figure out how to configure an odata v3 dataSource for a field that belongs to an optional entity, particularity when using the dataSource to bind to a grid

For example, I have TableA which has an optional foreign key (FK) to TableB. My dataSource: transport: read has a url property set to odata/TableA and mydata object has $expand: "TableB". All this works great as long as every row in TableA has a valid TableB_Id. However, TableB_id is nullable, and when a row exists that has null for TableB_id, my application breaks. The error appears because in my model, I have defined a filed as follows: Name: { type: "string", nullable: true, from: "TableB.Name" },

The "from" specifies the expand entity but when the row happens to have a nullable TableB_id, TableB is undefined for that row, causing the app to crash. Placing nullable:true in the field definition probably only addresses the last segment of whats in the from statement.

Is there an easy way to address this? In my real world app, I have 5 optional tables, each with fields I'd like to bring to the grid with default type values acceptable if the entity doesn't exist.

Kendo UI v2016.1.112

Data Source

answered on 29 Feb 2016

2 answers

213 views

100% Stacked chart - series proportion length is wrong

If the first value is larger then the second one the length of the series is wrong. The smaller value appears longer than the bigger value.

If the first value is smaller than the second one it is ok.

See attached http://dojo.telerik.com/OlUME/4 to recreate the issue

Please advice

Charts

answered on 29 Feb 2016

3 answers

213 views

Summing columns or do custom calculations

I would like to create aggregate calculations like in the example picture.

1) Is this possible with an aggregate field or;

2) Should I use the Change event and manipulate the model directly?

Here is the code for the datasource:

var dataSource = new kendo.data.TreeListDataSource({

transport: {

read: {

url: "../getModelTargetWeights?SSM_id=" + id,

dataType: "json"

}

},

schema: {

parse: function (response) {

NodeArray = [];

if (response.length == undefined) {

var node = {

id: response.id,

currWeight: response.currWeight,

tgtWeight: response.tgtWeight,

hasChildren: response.hasChildnode,

parentId: response.parent,

ext_model_id: response.ext_model_id,

securitySelectionModelName: response.SSM.securitySelectionModelName,

classificationNameNode: response.classificationNameNode,

};

NodeArray.push(node);

} else {

for (var i = 0; i < response.length; i++) {

var node = {

id: response[i].id,

currWeight: response[i].currWeight,

tgtWeight: response[i].tgtWeight,

hasChildren: response[i].hasChildnode,

parentId: response[i].parent.id,

ext_model_id: response[i].ext_model_id,

securitySelectionModelName: response[i].SSM.securitySelectionModelName,

classificationNameNode: response[i].classificationNameNode.classificationName

}

NodeArray.push(node);

}

return NodeArray;

},

model: {

id: "id",

parentId: "parentId",

hasChildren: false,

fields: {

id: {type: "number", nullable: false},

parentId: {field: "parentId", type: "number", defaultValue: null},

hasChildren: {type: "boolean", field: "hasChildren"},

tgtWeight: {type: 'number', editable: true},

currWeight: {type: "number", editable: false},

classificationNameNode: {type: "string", editable: false},

securitySelectionModelName: {type: "string", editable: false }

}

},

aggregate: [

{field: "currWeight", aggregate: "sum"},

{field: "tgtWeight", aggregate: "sum"},

]

}

});

TreeList

answered on 29 Feb 2016

1 answer

242 views

Slow Chart and Grid Rendering Time

Here is a mock of my code: http://dojo.telerik.com/@spresnal/usOfI

What kind of modifications can be made that will reduce render time without heavily affecting the look of the page? Is there a way to do it without grid paging or increasing interval size? We are phasing out older libraries in favor of kendo, but the rendering time seems to be slower.

General Discussions

answered on 29 Feb 2016

4 answers

1.1K+ views

[Solved] Hide header/footer when exporting to PDF?

Is there any way that you can exclude the toolbars with the export buttons and the message about dragging columns to group, and footer/pager from the PDF when exporting the grid? See the attached PDF screen shot for an example.

Frank Wanicka

Grid

answered on 29 Feb 2016