Questions on Kendo UI for jQuery Forum

2 answers

433 views

Hi Kendo team,

I'm trying to filter a datasource passed to a grid while is initialized. I think it should be a pretty simple task but I can't make it working:

http://dojo.telerik.com/ACAlu/2

I'm sure I'm missing something,

Thanks,

Adolfo Marinucci

Grid

answered on 01 Oct 2015

3 answers

281 views

TreeList expanded true for items loaded with ajax

I am trying to expand items in treeList automatically.

In the following example you can see the result:

http://dojo.telerik.com/ukOMo/2

When the items a loaded with ajax extended = true does not really work.

Any way to achieve this?

My problem is also that I should open multiple levels of a branch.

TreeList

answered on 01 Oct 2015

3 answers

165 views

Drop target with filter a particular shape (node)

Hi Telerik team! I'm trying to use drag and drop with a diagram. All works fine but I can't understand how I can choose a particular node, instead of another, as target of a drop target. I mean, if the shapes (nodes) aren't traditional DOM elements but they're graphic elements (svg), I can't assign an id or a css class to those shapes.
For now I'm using as filter element in drop target area, a <g> element of the DOM, but for my business logic, I have to allow to drop an element if and only if the target isn't a leaf.

I have checked inside the function that handle the event on drop and I have only the <g> DOM element (as Javascript or jQuery object), but I am not able to recognize if it's the root, a child or a leaf or whatever.

Any suggestions?

I'm using Angular, here some code:

<div kendo-droptargetarea

k-filter="'g'"

k-drop="ctrl.add"

k-dragenter="ctrl.onDragEnter"

k-dragleave="ctrl.onDragLeave"

class="k-content col-lg-10 col-sm-11"

id="sourceEditorCanvas"

ng-cloak="">

<div kendo-diagram

k-options="ctrl.diagramOpts"

style="margin-left:20px;height:81vh;"

id="sourceDiagram">

</div>

this is my HTML with kendo-angular directives, note k-filter="'g'" and k-drop="ctrl.add", the next code snippet instead is the function that handle the drop event:

add: function (e) {

var draggableElement = {},

dataItem = {},

ctrl = this.$angular_scope.ctrl;

draggableElement = e.draggable.currentTarget;

dataItem = draggableElement.data().$scope.dataItem;

if ($.isEmptyObject(dataItem)) return;

var shape = {

name: dataItem.name,

type: dataItem.type,

color: colorsUI["teal"]

};

ctrl.currentSource[0].items.push(shape);

$('#sourceDiagram').data('kendoDiagram').dataSource.data(ctrl.currentSource);

ctrl.onDragLeave($('#sourceEditorCanvas'));

},

Diagram

answered on 01 Oct 2015

2 answers

161 views

[Solved] subtraction between rows of same group

Hi,

I want to do subtraction between rows of a same group in the kendo grid (see attachment). I understand that aggregates doesn't support subtraction, and I'm encouraged to call functions from the groupFooterTemplate. However, I'm find it difficult to track which group I'm calculating the value for. What's the recommended way?

Grid

answered on 01 Oct 2015

6 answers

1.5K+ views

Multiple grids on one page clashing

I have two grids that are clashing; this is to say that if I group on a column in the first table it groups but adds the filter into the second (#masonicB) table. I cannot group at all on the #masonicB table

My code is:

$(document).ready(function() {

$("#iaplusB").kendoGrid({

groupable: true,

scrollable: false,

sortable: true

});

$("#masonicB").kendoGrid({

groupable: true,

scrollable: false,

sortable: true

});

Thanks,
Dom

Grid

answered on 01 Oct 2015

1 answer

208 views

Assign Angular Scope Object Array to DataSource for Grid

I am trying to assign an angular scope object array to a DataSource item. Below is what I have tried.

$scope.getWaivers = function () {

waiverService.getCustomers($scope.model.customer.CustomerID).then(function (result) {

$scope.model.waivers = result.data;

$scope.model.dataSource = new kendo.data.DataSource({

pageSize: 15,

autoSync: true,

autoBind: false,

data: $scope.model.waivers,

});

$scope.model.dataSource.read();

}

});

};

$scope.surchargeGridOptions = {

dataSource: $scope.model.dataSource,

. . .

}

I can get everything to work using the transport read calls but I want to be able to make changes and add items locall without going back to the server data source.

Data Source

answered on 01 Oct 2015

2 answers

121 views

[Solved] stack chart proportion is not correct

My stack chart is defined like this:

seriesDefaults: {
type: "bar",
stack: {
type: "100%"
},
spacing: 0,
gap: 0
},

But the bar's proportion is not correct. See the attachments.

Charts

answered on 30 Sep 2015

4 answers

560 views

[Solved] angularjs k-data-source menu binding

Hi there,

just try to bind a JSON object to the menu k-data-source, but somehow cannot get it work. Could anyone help me out?

$scope.menuData = [

{

text: "Item 1",

url: "http://www.telerik.com" // Link URL if navigation is needed, optional.

},

{

text: "<b>Item 2</b>",

content: "text" // content within an item

},

{

text: "Item 4",

}

];

<div ng-controller="menuCtrl">

<ul kendo-menu style="display: inline-block" k-data-source="menuData"></ul>

</div>

Menu

answered on 30 Sep 2015

4 answers

472 views

Set OData filter operator conditionally

Hi,

I have an OData Datasource for an Autocomplete Box. The textfield of this box contains entries which have an article number and article description as a combined string. Now I want to achieve if the user types in a numeric value, that it filters by startswith and if the user enters a string, that it gets filtered by contains.

Does anybody have an idea how to get this?

Thanks!

Data Source

answered on 30 Sep 2015

1 answer

196 views

How to load nested function on read?

I'm a scenario, where I should load the multiple methods to get the response for the grid. From the below code, I suppose to load the loadData() function in the read function. Code is showing below.

The loadData function is having nested function. Once the first method is completed I have to call the second method on promise of first method. Once all the method executed. I've to call the parse function.

If I use single restApi It's working fine. But here I have methods method on promise... So how to handle this kind of scenario.


dataSource: new kendo.data.DataSource({
     transport: {
        read: loadData
     },
     schema: {
        parse: $scope.kendoParse
         ......
         .......

function loadData(){

atFacade.eventDataApi.getCurrentShift().then((data) => {

$scope.fleetListingFilter.currentShift = data;

getAllOperatingSummary();

});

}

function getAllOperatingSummary() {

var startDate = new Date().now() + " " + $scope.fleetListingFilter.currentShift.startTime;

var endDate = new Date().now() + " " + $scope.fleetListingFilter.currentShift.endTime;

var operatingSummary = new at.Models.OperatingSummaryReportFilter(events.PAYLOAD, [], startDate, endDate);

$scope.fleetListingPromise = atFacade.eventDataApi.getOperatingSummaryReportData(operatingSummary).then((data) =>       {$scope.allVehicles = data;

loadAllVehicles();

});

}

function loadAllVehicles() {

$scope.fleetListingPromise = atFacade.eventDataApi.getAllVehicles().then((data: Array<any>) => {

for (var i = 0, total = data.length; i < total; i++) {

for (var j = 0, tot = $scope.allVehicles.length; j < tot; j++) {

if (data[i].id === $scope.allVehicles[j].vehicleId) {

data[i].summary = $scope.allVehicles[j];

}

$scope.vehicles = data;

$scope.kendoParse(data);

});

}

$scope.kendoParse = (result) => {

var data = [];

var results = atFacade.restangularService.stripRestangular(result);

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

var fleetListingData = {

name: results[i].name,

registrationNumber: results[i].registrationNumber,

operator: results[i].summary.operator,

lastStop: results[i].summary.lastStop

};

data.push(fleetListingData);

}

return { "results": data, "totalResults": data.length };

};

Grid

answered on 30 Sep 2015