Questions on Kendo UI for Angular Forum

5 answers

1.4K+ views

how to use Custom Data-binding directive with grouping

I have implemented a grid with remote binding directive subscribing to a service to get data from server, and it is working great with the grid having sort, filter properties defined.

Now, I need to work on another grid which has a group defined, and I keep getting the error of 'Cannot convert undefined or null' at the line where translateDataSourceResultGroups is called.

@Injectable()

export class CodeSelectionsServiceClient extends BehaviorSubject<GridDataResult> {

public isLoading = true;

private BASE_URL = "api/BaseConfig/Get?type=codeselections_get&id=";

constructor(private http: HttpClient) { super(null); }

public query(state: any, config_id: any): void {

//alert('timestart:' + new Date());

var url = this.BASE_URL + config_id + "&override_combo=dep_0004&override_level=dep";

this.fetch(state, url)

.subscribe(data => {

super.next(data);

this.isLoading = false;

} );

}

public fetch(state: any, url: string): Observable<GridDataResult> {

const queryStr = `${toODataString(state)}`;

const hasGroups = state.group && state.group.length;

return this.http

.get(`${url}&${queryStr}`) // Send the state to the server

.pipe(

map(<CodeSelectionsGridDataResult>({ value, datacount }) => {

console.log(value);

return (<GridDataResult>{

data: hasGroups ? translateDataSourceResultGroups(value) : value,

total: parseInt(datacount, 10)

})

}));

}

//class defined on server

public class CodeSelectionsGridDataResult

{

public int datacount { get; set; }

public List<CodeSelection> value { get; set; }

}

If I don't send in the state.group info, then the fetch method does not call translateDataSourceResultGroups and the grid is binding OK with the list<CodeSelection> returned.

This is how my grid state is defined when I pass in the group info:

public state: DataStateChangeEvent = {

skip: 0,

take: 50, //controls grid paging settings

filter: {

logic: 'and',

filters: [{ field: 'isSelected', operator: 'eq', value: true }]

},

//group: [],

group: [{ field: 'CodeId' }],

sort: []

}

Could you tell me what I may have missed here?

I'm attaching the error displayed in debug mode on Chrome. The data returned (for testing) is a list of only one record as highlighted on the screenshot.

Thanks!

General Discussions

answered on 27 Jul 2018

1 answer

1.4K+ views

pdf export and unicode

I have a quick question regarding the pdf export. So far it's working fine and my reports are, for the most part, outputting as expected.

The one caveat is that I've needed to use mm³ for some of our displayed values and instead the pdf is receiving mm‡. I've tried both "\u00b3" and "\xb3" and find myself getting the same interpolation of character values.

Is this a known issue with the pdf export and, if not, do you have any suggestions on what I might need to do in order to safeguard translation from print to report?

General Discussions

answered on 26 Jul 2018

1 answer

120 views

Angular2- Total in Footer on GroupBy using Lazy loading.

I am using Angular2+ with kendo grid. I want to implement a footer and display the total in the footer. When user group by column, the footer with total should display in the footer of the group by. I referred below-given link for this;

https://www.telerik.com/kendo-angular-ui/components/grid/grouping/grouping/

But, this is not exactly suitable to work with lazy loading, as I have used [scrollable]="'virtual'" for lazy loading.
My user can do the group by himself on any column. So, please give me demo with the dynamic group by, if possible.

General Discussions

answered on 25 Jul 2018

7 answers

99 views

Combo filter

Combo filter operator is “start with” but I need it as a contains
e.g.: if I write hockey in the below example the combo will not select any value
https://plnkr.co/edit/?p=preview

I know there’s a filter option and a filterChange event but I want the combo behavior to be as it is now ( to see all the items and position to the selected data )

General Discussions

answered on 25 Jul 2018

1 answer

710 views

To disable popup in the multiselect component

I am not able to remove the drop down from the multi select component. Is there any other way I can achieve its functionality.

General Discussions

answered on 24 Jul 2018

1 answer

2.0K+ views

Styling titlebar of kendo-dialog dynamically

Hi, I have the following question about styling the titlebar of the kendo-dialog (stackoverflow link):

https://stackoverflow.com/questions/51306813/how-to-css-style-kendoui-dialog-titlebar-in-2-different-ways-when-opening-from-t

Thank you very much for your time.

General Discussions

answered on 24 Jul 2018

1 answer

252 views

Testing grid grouping selnium

Hi there

We're using selenium to generate our end to end tests. We are struggling to automate the drag and drop support for column grouping. Do you have any guidelines on how to test this functionality?

Thanks

General Discussions

answered on 24 Jul 2018

2 answers

1.4K+ views

Kendo Dropdown : Suggestion list hover on selected value showing red highlight -How to remove the red highlight

Hi Team,

I am using Kendo Dropdown.

on Suggestion list if I selected one value and hover on the selection showing red highlight, As per my requirement I should not use any red colors.

How to remove the red highlight?

Please refer the attachment

Thanks

Sankar

General Discussions

answered on 23 Jul 2018

1 answer

50 views

How to avoid my app talking back to Telerik.

Due to this message in Chrome...

"The SSL certificate used to load resources from https://www.telerik.com will be distrusted in M70. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information."

I now know the Kendo-UI tries to talk back to Telerik, for at least a CSS file, but I don't know what else.

Many of our customers have a white-list of allowed internet sites, and we don't want our application to require random 3rd party addresses to be white-listed on their firewalls, or have our request refused. Architecturally, we did not appreciate this requirement for remote files for a library that we thought we hosted and delivered ourselves.

What are the options for not requiring internet access to use the Kendo UI? Is it just a CSS file (or other CDN files) or other things like metrics reporting? The CSS file does not appear to relate to any given version of Kendo UI - how do you keep backwards compatibility?

Many thanks for your help.

General Discussions

answered on 23 Jul 2018

1 answer

297 views

Copying text from a kendo grid cell when it has scrollbar

Hi,

If any of the kendo grid cell has overflowing content (horizontal or vertical scroll), I want to have that text copied to a clipboard by showing a 'copy to clipboard' icon on that specific cell, when mouse is hovered over that data cell.

When trying to achieve this, I call a (mouseover) event and check if the element hovered on has overflow. If it does, I set a variable 'hasOverflow' to true and use this to conditionally show the icon.

But the problem is I don't have access to specific cell, because kendo automatically renders them for us.

<ng-template kendoGridCellTemplate let-dataItem let-column="column">

<div (mouseover) = setCellOverflow($event)><pre>{{dataItem[column.field]}}</pre></div>

</ng-template>

</div>

Script::

setCellOverflow(event) {

if(event.scrollHeight < event.clientHeight) hasOverflow = true; //instead of setting hasOverflow for every cell, want to set it for specific cell

}

General Discussions