The MultiSelect component appears to have an invisible textbox section that is allowed for the user to type and search the list. How can I disable this? It is very confusing at times because my users want to click the dropdown to select an option but you get no response because your actually clicking inside the textbox portion. So you have to move your mouse over a bit to leave the textbox then click to bring up your options. I have tried setting the filterable option to false but no luck.
Alternate solution is how I can enable the dropdown options to appear even if I click inside this textbox?
Is it possible to format the horizontal axis labels in percentage format (see attached screenshot)?
in .html file:<kendo-chart-series> <kendo-chart-series-item [data]="chartManagementObj.growthrevpatienttypeData" type="bar" [labels]="seriesLabels" field="revenue" categoryField="patienttype"> </kendo-chart-series-item>in .ts file:public seriesLabels: SeriesLabels = { visible: true, padding: 3, format: 'p2', font: 'bold 12px Arial, sans-serif' }
Thanks!
I have an editable grid based off this example. It works as expected, except that I need each row to have a detail row with a single text field in it, no columns. The EditTemplateDirective doesn't work outside of a kendo-grid-column. Is there another way to do this?
I would like to avoid creating a separate grid within my detail template if possible since this is a single form.
Here is what I have for my detail template:
<ng-template kendoGridDetailTemplate let-dataItem> {{dataItem.TSRs}} <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup"> <input kendoTextBox [value]="dataItem.TSRs" [formControl]="formGroup.get('TSRs')"> </ng-template></ng-template>
Thanks!


Hi,
In my scheduler I have a custom view and a custom group header template these are written outside the angular controller. But in order to do somethings with the obtained data I need to write these inside angularjs controller, whenever I try to do so an error shows up in console saying there is no such view (if view is defined inside the controller) and scheduler is not shown when custom group header template (if group header is defined inside the controller).
Is there a way to bring both these inside angular controller?
Reference Example

I know the documentation specifically says the kendoGridGroupBinding only works with in memory data, but is there a way around this possibly? My data is grouped by date and the idea is to allow the user to scroll back in time to any date within the last year or so. Using paging would impact the UX a great deal in this situation. I'm mostly looking for ideas, or insights from anyone who has attempted something similar.
Thanks in advance.

Something like this. Can I combine a kendo button and dropdown, or can I do this with a combination of bootstrap and a kendo dropdownlist?
<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul></div>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 serverpublic 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!