Questions on Kendo UI for jQuery Forum

6 answers

614 views

Kendo Diagram - wrapping labels and individual shape color without using visual template

Hi,

1. I'm trying to create a process diagram using the kendoDiagram function. However, the labels for each node are not contained inside its shape's container. I tried several methods to break the line, but none seem to work. Is it possible to wrap the text of each node so it will fit inside its shape's container?

2. Another question, is it possible that on initial load I can give a shape a different color besides the one that is set in shapeDefaults? I am using dataSource and I assume that I can do something like:
{ id: "one", name: "C" width: 40, height: 40, type: "circle", fill: "red"}
I tried other property names like 'color' but it does not work.

Please see attached sample screenshot and the script I used.

Thanks!!

General Discussions

answered on 27 Apr 2017

1 answer

531 views

Load on demand with refresh of node without affecting children already loaded

The treeview is currently configured to load on demand.

Scenario is this I need to be able to refresh a node (ask database) due to one of the following actions from a user:

1. Adding of a new node under currently selected item.
2. Deleting of a node that is the currently selected item.
3. Updating the name of the currently selected item.

I have this working however if the selected node is expanded and all nodes below are expanded also - the state of the branch up to the selected node is retained but the nodes past the selected node are now collapsed after a reload of the selected node. (In the case of the delete - I refresh the parent node).

Is there a way to maintain the state of the branches so that a refresh does not collapse the branch below the refresh point?

If my description is insufficient I can explain with a more specific scenario and include screen shots.

TreeView

answered on 27 Apr 2017

7 answers

489 views

Grid Filter with Angular

Hello, i'm implementing a grid with filters in angular 4.0 using Kendo-ui-angular.

I been trying to automatically bind my source of data (API) into the grid data like so:

Service for the API:

public query(state: any): void {

this.getAll(state)

.subscribe(x => super.next(x));

}

private getAll(state: any): Observable<GridDataResult> {

return this.http

.post(this.BASE_URL + 'getall', state)

.map(response => response.json())

.map(response => (<GridDataResult>{

data: response.result.data,

total: response.result.total

}));

}

And my component:

public ngAfterViewInit(): void {

this.grid.dataStateChange

.do(({ skip, take }: DataStateChangeEvent) => {

this.gridConfig.skip = skip;

this.gridConfig.pageSize = take;

})

.do(x => console.log(x))

.subscribe(x => this.hrtypeService.query(x));

}

My view:

<kendo-grid

[data]="listHrType | async"

[pageSize]="gridConfig.pageSize"

[scrollable]="'virtual'"

[skip]="gridConfig.skip"

[sort]="gridConfig.sort"

[rowHeight]="15"

[height]="300"

[selectable]="true"

[filter]="gridConfig.filter"

[filterable]="true"

[groupable]="gridConfig.groupable"

>

But i'm having an issue with the filters, everytime i try to filter one of the columns, the object returns just one single colum, and overlaps the remaining one's.

i add 1 filter to the field test_1 and i get

field: "teste_1"

operator:"contains"

value:"teste_value_1"

and once i fill out test_2 with a second filter, it overwrites the first object in the array, instead of adding a second filter

field: "teste_2"

operator:"contains"

value:"teste_value_2"

Opposed to

[field: "teste_1"

operator:"contains"

value:"teste_value_1"]

[field: "teste_2"

operator:"contains"

value:"teste_value_2"]

I'm not manipulating the data, just return what i get from the kendo-ui into my API, what configuration did i missuse?

Apologies beforehead if i made my issue unclear.

Grid

answered on 27 Apr 2017

1 answer

152 views

WebApi DataSource

Is the Spreadsheet component compatible with DataSource objects configured for WebApi requests? The transport properties for updating records don't see to be triggered when I update a row etc. Are there examples available on github or elsewhere?

Regards

Spreadsheet

answered on 27 Apr 2017

1 answer

129 views

Bug: It's impossible to resize the last column.

As an end-user, it's impossible to resize the last column if a horizontal scroll is present (no gap at the end), as soon as you try to drag it, the drag ends immediately up against the scrollbar.

Tried on the latest Firefox & Chrome.

Try for yourself on the KendoUI demos:

1. Go to http://demos.telerik.com/kendo-ui/spreadsheet/index

2. Scroll all the way to the right.

3. Grab the last columns edge and attempt to resize.

4. Notice nothing is resized.

Spreadsheet

answered on 27 Apr 2017

4 answers

4.2K+ views

Hide Row

Is it possible to hide a row (or a set of rows) in a grid?

Grid

answered on 26 Apr 2017

2 answers

516 views

Drop-down items arranged in multiple columns

Thanks to the templating is easy to have a template for the drop-down items. The sample demonstrates the power quite well: http://demos.telerik.com/kendo-ui/dropdownlist/template

But if I want the user to select one of 100 icons and display each icon with a size of 32x32 the list gets quite long while very thin. Can I arrange this in (let's say) 6 columns so the width is 192px and I only get 17 rows of icons. That would be much more compact.

DropDownList

answered on 26 Apr 2017

4 answers

324 views

[Solved] Center the shapes and position the connectors to the top

I have Circle as my first shape. But when I align the circle to the center by adding it in a rect layout the connector from the circle is still in the same position as it is now, pointing from nowhere. how do I align the Circle to center and the connector should also be from the center of the circle.?

I need the connectors at a fixed position on all shapes. eg. top-center. In the image I have attached you can see that the some connectors go to the side and some to the top. When there are more steps, its difficult to follow the flow and in most cases the connectors are overlapping. ie the from and to connector of a shape is merged together. how to make sure, I have different from and to connectors for each shape.?

Any help is appreciated. thanks in advance. I hope this does not require any sample code.

Diagram

answered on 26 Apr 2017

3 answers

268 views

How to retain value on the textbox filter?

When typing on the textbox and then loosing focus, the value gets cleared. Is there a way to retain the text?

MultiSelect

answered on 26 Apr 2017

2 answers

260 views

Animation not disabled, weird effect

Hello

By disabling animation on kendoTabStrip it is still active if you switch tabs programmatically. I have created a demo with two buttons, which switch between tabs programmatically. If you click directly on Tab1 or Tab2 there is no animation and the tabs are displayed right away.
If you use the switch buttons you see a slide up/down animation effect. Example based on your document code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>

</head>

<body>

<div id="tabstrip">

<ul>

<li id="tab1">Tab 1</li>

<li id="tab2">Tab 2</li>

</ul>

<div>Content 1</div>

<div>Content 2</div>

</div>

<button id= "switch1" type="button">Switch to Tab1</button>

<button id= "switch2" type="button">Switch to Tab2</button>

<script>

$("#tabstrip").kendoTabStrip({

animation: false

});

$(document).on("click", "#switch1", function(e) {

var tabToActivate = $("#tab1");

$("#tabstrip").kendoTabStrip().data("kendoTabStrip").activateTab(tabToActivate);

});

$(document).on("click", "#switch2", function(e) {

var tabToActivate = $("#tab2");

$("#tabstrip").kendoTabStrip().data("kendoTabStrip").activateTab(tabToActivate);

});

</script>

</body>

</html>

Shouldn't the animation also be disabled on using activateTab() function?

Weird behaviour: On disabled animation (animation: false) there is a case where tabstrip content wont be displayed anymore. You can use the demo above to reproduce this:

1. Start the demo
2. Click on tab "Tab 1"
3. Click on button "Switch to Tab2"
4. Click again on "Tab 1" -> content is not displayed (grey)

It also works the other way around so Tab2 is not showing content. This weird effect is only reproducible on "animation: false". So I guess its a problem with the animation itself.

Regards

TabStrip

answered on 26 Apr 2017