Telerik Forums
Kendo UI for Angular Forum
1 answer
1.1K+ views

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.

Svet
Telerik team
 answered on 29 Aug 2018
2 answers
285 views

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?

Bob
Top achievements
Rank 1
Veteran
 answered on 28 Aug 2018
1 answer
345 views

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.

 

Dimiter Topalov
Telerik team
 answered on 28 Aug 2018
1 answer
1.6K+ views
I have an autocomplete that's working fine, except I want to change one aspect of its behavior-- I would like to not react to the valueChange event when the control has lost focus. The situation is a search box, where once a user has made a selection, a search page will be routed to. However, I don't want to navigate if the user abandons their input. The control emits a valueChange when a blur happens. I have noticed that the valueChange emits before the blur emits. What would be the best way to achieve the desired behavior? I have a ViewChild reference available if that is needed.
Ivan
Telerik team
 answered on 27 Aug 2018
2 answers
170 views
Is there a way to specify buttons in a window to be positioned fixed at the bottom of the window so if a scrollbar is needed for the content, the buttons are still visible?  For dialogs, there's the KendoDialogActions component but that overrides the default styles of buttons.  I want to keep the styles of buttons but have it behave like buttons inside KendoDialogActions.  
Jacky
Top achievements
Rank 1
 answered on 24 Aug 2018
1 answer
356 views
I have done some digging and it seems grid columns are unable to resize to fit the full width of a grid (responsively) if there is a locked column present on the grid. Is this the case? If not could someone point me in the direction of how I would go about achieving this? Thanks.
Rosen
Telerik team
 answered on 24 Aug 2018
1 answer
1.2K+ views

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.

Rosen
Telerik team
 answered on 24 Aug 2018
1 answer
262 views

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)

Alex Gyoshev
Telerik team
 answered on 23 Aug 2018
2 answers
1.0K+ views

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

WenatexIT
Top achievements
Rank 1
 answered on 22 Aug 2018
1 answer
408 views

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>

 

Svet
Telerik team
 answered on 22 Aug 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?