Questions on Kendo UI for Angular Forum

1 answer

145 views

I'm looking to acquire a UI library for an Angular desktop web browser project, and I'm trying to confirm whether Kendo UI supports border layouts/ Can anybody confirm this?

By 'border I may the NORTH-CENTER-SOUTH or WEST-CENTER-EAST layout of panels to contain other components, where the 'CENTER' panel will dynamically resize to take up the available space

General Discussions

answered on 21 Jul 2020

8 answers

291 views

UTC date filtering in grid

My dates are held as UTC in my database.
I get my dates from the server, which are returned in moment format and therefore need to be case to javascript. So far so good.

).subscribe((data) => {

data.data.forEach((d) => {

d.clientCreatedDatetime = new Date(d.clientCreatedDatetime);

d.creationTime = new Date(d.creationTime);

});

My grid is declared in the component ts file, here is the declaration for a datetime column:

{

field: 'clientCreatedDatetime',

title: this.l('ClientCreatedDatetime'),

_width: 100,

minResizableWidth: 100,

filter: 'date',

filterable: true,

hidden: false,

columnMenu: true,

format: '{0:dd/MM HH:mm}'

}

I want to get all items since midnight yesterday so I set my grid filter:

setGridSettings(): GridSettings {

let midnightYesterday = new Date(moment().subtract(1, 'days').startOf('day').utc().toString());

return {

state: {

skip: 0,

take: 500,

// Initial filter descriptor

filter: {

logic: 'and',

filters: [{ field: 'clientCreatedDatetime', operator: 'gte', value: midnightYesterday }]

},

group: [{ field: 'ncAction', aggregates: this.aggregates }],

sort: []

},

My grid shows the date filter perfectly: 18/05 00:00

I hit the filter button and expect the date to be passed to the server using utc which would be 17/05 23:00.
However, the value for the filter in the datasource request (I am using C# MVC) has not been converted to UTC.
I think, ok I will put in a filter extension and offset with the server timezone (which is not ideal):

private DateTime? GetFrom(IList<IFilterDescriptor> filters, string descriptorMember)

{

if (filters.Any())

{

foreach (var filter in filters)

{

var descriptor = filter as FilterDescriptor;

if (descriptor != null && descriptor.Member == descriptorMember

&& (descriptor.Operator.ToString() == "IsGreaterThanOrEqualTo"

|| descriptor.Operator.ToString() == "IsGreaterThan"))

{

return DateTimeOffset.Parse(descriptor.Value.ToString()).UtcDateTime;

}

else if (filter is CompositeFilterDescriptor)

{

GetFrom(((CompositeFilterDescriptor)filter).FilterDescriptors, descriptorMember);

}

return null;

}

This gets me the correct data from the server but when it is returned to the client the filter is reapplied and misses the first hour's worther of data.
How do I apply a filter in utc - the server should receive the filtered date in utc, the client should display the date in local time.

Grid

answered on 21 Jul 2020

5 answers

2.2K+ views

[Solved] Display chart tooltip on legend item hover event

Hi.

I'm using pie chart. Is there any way to display chart tooltip (kendo-chart-series-item-tooltip) when mouse hovers on legend-item? It must be like on the image.

And it would be great if legend would show categoryField and field value, is it possible?

Thank you.

General Discussions

answered on 21 Jul 2020

3 answers

8.2K+ views

How to get the selected row data item

hello,

i'm trying to get the selected row data item, i was able to get the data item from the selected row using DOM
but when a grouping or filtering or sorting is applied the data is different,
Is there a way to know the selected row data ?

Thank you

General Discussions

answered on 21 Jul 2020

1 answer

226 views

[Solved] uploaddropzone visually not disabled if upload component is disabled

I have a kendo-upload component which is disabled in certain cases.

I have a kendo-uploaddropzone component which is visually not disabled when the kendo-upload component is disabled.

The user can not upload a file by dropping it into the dropzone while the upload component is disabled, so functionally it works perfectly.

I would expect that when the upload component is disabled the uploaddropzone is also disabled visually, so it has similar opacity like the upload component, and the icon color is not changed to primary color when user tries to drop a file.

Maybe also a specific cursor can be shown, so the user sees that the uploaddropzone is disabled when he tries to drop a file.

I did create a Stackblitz to demonstrate the issue:
https://stackblitz.com/edit/angular-qo8pns

Is there a possibility to set the uploaddropzone disabled manually? I did not found anything in the uploaddropzone component's documentation.

Personally I would prefer the behaviour I described at the top.

Upload

answered on 21 Jul 2020

1 answer

4.9K+ views

@HostListener('document:keydown.enter')

How do I go about using a Host Listener for a kendo-dialog? My team and I haven't had enough time to sit down and talk through this, and we've been busy with other things and pushing this aside. However, it has resurfaced, and this time it should probably get figured out.

Dialog

answered on 20 Jul 2020

1 answer

353 views

Kendo multiselect scroll

I have a kendomultiselect with grouping enabled.And selection of all elements on clicking on a group is possible too.

My multiselect behaviour is as below,

When I select an element the item wil be removed from the datsource.when I select a group all elements under the group will be removed from data source.this is working fine.

But after removing the elements,I want to maintain the scroll position to the next element and key down/up events shoudk start from taht which is not working as expected.its always starting from first.

How can I acheive this behaviour..

Please help me out

MultiSelect

answered on 20 Jul 2020

1 answer

676 views

How to implement stepper with sub steps (or Child steps)

Hello, I am trying to implement stepper with child steps. For example Sports is my main step and football, cricket are my sub steps.

I can only see steppers without child steps in the website. Kindly help me on this

Stepper

answered on 17 Jul 2020

1 answer

241 views

How do I format the date filter field?

Hi,

I have a date filter field but due to the width of the filter cell, the placeholder "dd/mm/yyyy" is truncated. Is there any way to format this date filter cell so that

1) I can word wrap the placeholder to fully display it?

2) Or I can increate the width of the filter cell so that I can display the entire "dd/mm/yyyy"?

Best Regards,

General Discussions

answered on 16 Jul 2020

2 answers

302 views

Grid autoFitColumns() still has line wrapping

Hello. I am attempting to have it so that the grid's columns will be as wide as the widest value rendered. In other words, do not line wrap data or hide overflow of individual cells.

Per (https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-autofitcolumns), this method should adjust "the width of the specified columns to fit the entire content, including headers, without wrapping". I can verify that when the data source is specified in the client like so:
https://stackblitz.com/edit/angular-7bppyc-ujhnha?file=app%2Fapp.component.ts

However, if you fetch the data asynchronously, it only resizes to the width of the column header text and not the contents of the cells.

Grid

answered on 16 Jul 2020