I'm using Kendo UI for Angular to render a table. The table works fine, and everything shows up. My question is if it's possible to add a new header row before the initial row, where it's possible to add custom values.
I've added two images, which shows the current and desired behavior.

I have a call to my api as follows:
getEntitiesForKendo() { this.gridLoading = true; this._kendoGridService.getEntities(this.gridSettings.state) .subscribe((data) => { data.data.forEach((d) => { d.creationTime = new Date(d.creationTime); d.warnings = d.warnings.split(',').map(Number); }); this.gridData = data; this.getOrganisationUnits(); this.gridLoading = false; });}In my grid I have two sparkline charts, the pie chart is working, the column chart is not. Here is my code:
<kendo-grid-column field="carePlanSectionsForReviewCount" title="{{ l('CarePlanReviews')}}" class="text-center" width="120" media="(min-width:720px)" [filterable]="false"> <ng-template kendoGridCellTemplate let-dataItem> <kendo-sparkline [chartArea]="{background: ''}" [data]="[dataItem.carePlanSectionsForReviewTodayCount, dataItem.carePlanSectionsOverdueCount, dataItem.carePlanSectionsReviewedCount]" style="width:30px; height:30px;" [seriesColors]="['#ffb822', '#f4516c', '#34bfa3']" type="pie"> </kendo-sparkline> </ng-template></kendo-grid-column><kendo-grid-column field="warningCount" title="{{ l('NcWarnings')}}" class="text-center" width="120" media="(min-width:720px)" [filterable]="false"> <ng-template kendoGridCellTemplate let-dataItem> <kendo-sparkline [chartArea]="{background: ''}" [data]="[dataItem.warnings]"> </kendo-sparkline> {{dataItem.warnings | json}} <!-- {{dataItem.warningCount}} --> </ng-template></kendo-grid-column>The results can be seen in the attached file. The array seems good, why does the sparkline for the warnings column not display?
Using Kendo UI with Angular:
I have an Auto-generated column/grid and need to refresh all the data on an ongoing basis. (Every 10 seconds). To check for any changes to the data.
My data is local at the moment and called sampleCustomers (See below)
I`m relatively new to Kendo and Angular so as descriptive as you can be would be really appreciated. (Add this to app.component.ts, add this to app.component.html, etc.)
Sample of my data below:
export const sampleCustomers = [{
'Id': 'ALFKI',
'CompanyName': 'Alfreds Futterkiste',
'ContactName': 'Maria Anders',
'ContactTitle': 'Sales Representative',
'Address': 'Obere Str. 57',
'City': 'Berlin',
'PostalCode': '12209',
'Country': 'Germany',
'Phone': '030-0074321',
'Fax': '030-0076545',
'LikeDogs': "Yes",
"FirstOrderedOn": new Date(1996, 8, 20),
"Discontinued": false,
}, {
'Id': 'ANATR',
'CompanyName': 'Ana Trujillo Emparedados y helados',
'ContactName': 'Ana Trujillo',
'ContactTitle': 'Owner',
'Address': 'Avda. de la Constitución 2222',
'City': 'México D.F.',
'PostalCode': '05021',
'Country': 'Mexico',
'Phone': '(5) 555-4729',
'Fax': '(5) 555-3745'
},
I`m looking forward to an answer regarding this as I have dug deep throughout the internet and have come up empty.
We have a requirement to construct a somewhat complex grid that requires multiple "footer template rows". Each row should be statically locked at the bottom of the grid as the user scrolls. I have scoured the docs but it this does not seem this is currently supported. Am I missing something?
Thanks.
I get the following error trying to ng serve an app using 1.2.0 version of the angular material theme. 1.1.4 version runs without issue.
ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module build failed:
undefined
^
Functions may not be defined within control directives or other mixins.
in node_modules\@progress\kendo-theme-material\scss\progressbar\_theme.scss (line 5, column 15)
Hello
I miss some translations in these components - my app is running in German and most of all seems fine, but on some points there are things written in Englisch
DatePicker: TODAY-Link in the top-right edge does not tranlsate - Month / Placeholders / Days are translated
TimePicker: The buttons "Cancel" & "Set"
Grid: Empty message "No records available."
Overall: Tips by moseover buttons like "Toggle calendar" at the DatePicker or "Decrease/Increase value" at the NumericTextBox
Am I missing something?
Kind regards
Jürgen
Hi Team,
I am using <kendo-daterange> which includes <kendo-dateinput> and <kendo-daterange-popup>.
<kendo-daterange-popup> has a kendo dropdown with options like last week, last month etc.
With every change of values from drop-down I am changing the value property of <kendo-dateinput>, below is the code:
<kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
whenever I cahnge range.start and range.end it changes the value in input box but after sometime it goes back to its orignal state and <kendo-daterange-popup> doesnt reflect the changes.
Note: It works fine when is changed directly from the input box, it also works at the time of initial load where I am assigning the initial value of range.start and range.end
Below is the full HTML template:
<kendo-daterange>
<label>
<span class="label">Start</span>
<kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
</label>
<label>
<span class="label">End</span>
<kendo-dateinput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
</label>
<kendo-daterange-popup>
<ng-template kendoDateRangePopupTemplate>
<h4>Popup Template</h4>
<kendo-multiviewcalendar topView= "month" [views]= 3 kendoDateRangeSelection >
</kendo-multiviewcalendar>
<kendo-dropdownlist
(valueChange) = "changeDatePeriod($event)"
[ngModel] = "defaultDropdownItem"
[data]="calendarDropdownItems"
textField = "text"
valueField = "value">
</kendo-dropdownlist>
</ng-template>
</kendo-daterange-popup>
</kendo-daterange>
