Questions on Kendo UI for jQuery Forum

7 answers

506 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

161 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

142 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

528 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

336 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

280 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

272 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

1 answer

2.1K+ views

merge cells

Does Kendoui-grid cells can be merged?

Grid

answered on 26 Apr 2017

1 answer

1.2K+ views

Update grid column template

Hi,

How can I update a column template based on a selected option from my context menu?

So when I select a row in my grid and right click the mouse to open the context menu I would like to update the status column with the selected option from my context menu.

so far the I build this exampl: http://dojo.telerik.com/@Ricardo%20Coelho/AyeVUz/11

Could someone help me with thins?

Thanks.

Grid

answered on 26 Apr 2017