Telerik Forums
Kendo UI for Angular Forum
6 answers
319 views
In our application we need to highlight some special days such as holidays. I was able to provide a red circle to the date but it appears in all date is it possible to provide a conditional function inside the scheduler (angularjs code is preferred).

Reference Example

Dimitar
Telerik team
 answered on 20 Aug 2018
1 answer
873 views

Hi, 

I have a grid in my app that can display content of various width depending on the page it's on. Some columns can be 100 px wide when on another page it will be 250px wide. 

In order to handle this I'm using the autoFitColumns() method to display it nicely to the user. However, I'm surprised that when running autoFitColumns(), all the columns will shrink to their optimal size and then render a grid which is not nice at all. (Just like in your stackblitz when clicking Auto-fit all columns https://z1p2hz.run.stackblitz.io) Wouldn't it be possible to actually fit all columns to their optimal size and then stretch them back to use 100% of the grid width ? 

I have to do the following to achieve that : 

container.querySelectorAll('table')[0].style.width = '100%';
container.querySelectorAll('table')[1].style.width = '100%';

Same goes for the autoFitColumn() method, the columns passed as parameter should have their size optimized but then stretched again so that the grid content doesn't end up using only 50% of the grid for example. 

My other question is, what is the best way to call the autofit method ? In angular, I feel like there is no event to subscribe for grid rendering so this is also kind of custom. I just call the autoFitColumns() when my data is received from the back-end but sometimes the grid is not rendered yet at this moment so I have to put the call to autoFitColumns() in a loop to wait for the table rendering. I had to do a custom method to check for table rendering and it is quite ugly. We should have the possibility to include the autoFitColumns feature in the grid declaration itself so it will automatically autoFit each time the grid is rendered. 

 

Thanks in advance for your answers.

 

Svet
Telerik team
 answered on 20 Aug 2018
2 answers
1.9K+ views

I have a grid where half of the columns are generated dynamically, but I need to add a tooltip to these columns. Normally I would use a kendoGridCellTemplate, but this doesn't seem to work with dynamic columns. I have tried a number of different things, but I'm not getting anywhere. 

<kendo-grid-column *ngFor="let block of dynamicBlocks" field="{{block.field}}" title="{{block.title}}" width="82">
<ng-template kendoGridCellTemplate>
{{THE FIELD VALUE}} --- what goes here?
</ng-template>
</kendo-grid-column>

Rebekah
Top achievements
Rank 1
 answered on 17 Aug 2018
2 answers
628 views

I am a little frustrated by the lack of responsive properties of the grid. I can live with the problem of having to use the media property and kendo-grid-span-column directive for columns but why can't I also hide the toolbar on smaller devices?  Surely the best method here would be to have the media property follow standard grid principles.  For example a grid with four columns could have media="col-2", media="col-3", media="col-5", media="col-2" and the hidden property could have [hidden]="sm" etc.  To stack using the kendo grid we need to duplicate code like so:

<!-- any device bigger than 360px -->
<kendo-grid-column
    field="displayName"
    title="{{ l('DisplayName')}}"
    [minResizableWidth]="140"
    width="140"
    media="(min-width: 361px)">
</kendo-grid-column>
<kendo-grid-column
    field="organizationUnit.id"
    title="{{ l('OrganizationUnits')}}"
    [minResizableWidth]="100"
    media="(min-width: 361px)">
    <ng-template kendoGridFilterMenuTemplate
        let-column="column"
        let-filter="filter"
        let-filterService="filterService">
        <multi-check-filter
            [isPrimitive]="false"
            [field]="column.field"
            [currentFilter]="filter"
            [filterService]="filterService"
            textField="displayName"
            valueField="id"
            [data]="locations">
        </multi-check-filter>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
        {{dataItem.organizationUnit?.displayName}}
    </ng-template>
</kendo-grid-column>
<!-- typical Android (360px) -->
<kendo-grid-span-column>
    <kendo-grid-column
        field="displayName"
        title="{{ l('DisplayName')}}"
        media="(max-width: 360px)"
        [columnMenu]="false">
    </kendo-grid-column>
    <ng-template kendoGridCellTemplate let-dataItem>
        <h4>{{dataItem.displayName}}</h4>
        <p>{{dataItem.organizationUnit?.displayName}}</p>
    </ng-template>
</kendo-grid-span-column>

But even then we can't hide the toolbar on smaller devices.  Why won't a simple directive instruction like this for the toolbar template:

<ng-template kendoGridToolbarTemplate media="(max-width: 360px)">
    <button type="button" kendoGridExcelCommand [icon]="'file-excel'">{{ l('ExportToExcel')}}</button>
    <kendo-grid-column-chooser class="pull-right"></kendo-grid-column-chooser>
</ng-template>

When I started with the angular grid I thought I was going to get a lot of modern way of looking at things but it seems that the underlying code is generating css like we did 10 years ago when we were working with Telerik and Visual Basic and had 34 columns in a window which more or less worked like a spreadsheet.  The documentation points to the widgets using a container which does not work well with Bootstrap because the Bootstrap container is 'non-default'.  Come on guys, DevExpress grids stack, as do PrimeNG grids as do data tables (the list goes on).

Your widgets are so well thought out they are a pleasure to work with and I have worked with the MVC and JQuery stuff for a decade or so.  Your scheduler has given me the opportunity to close so many deals I can't begin to count them all.  I am so looking forward to the angular version.  Your widgets are brilliant and your support is second to none.  Your forums have a wealth of information your competitors must look on with envy.

But your approach to responsiveness is just so poor.  Come one guys, give us something to shout about.  Is there anything on the roadmap to change your approach or are you going to hang on to a css foundation which has the same footprint as a fossilised dinosaur?

Rant over, keep up the good work but please give us some good news on responsiveness because if the scheduler has the same problem it's game over.  I really don't want to go and try the other options on the market but it's the device which is driving the market, not the functionality.

 

 

 

Bob
Top achievements
Rank 1
Veteran
 answered on 17 Aug 2018
2 answers
81 views

Hi,

I have a problem with Selectable. The rows are selectable even though it is false.

Please check this link:

https://angular-td5xc3.stackblitz.io

Regards,

/Pouya

 

Dimiter Topalov
Telerik team
 answered on 17 Aug 2018
2 answers
1.6K+ views

In Angular 4 how i change language to spanish filters items in grid?

Thanks

Juan Diego
Top achievements
Rank 1
 answered on 16 Aug 2018
1 answer
196 views
In master detail grid I set the property [navigable] = "true" in all nested grids which makes me face issue that for example I have expanded a row and select the 3rd(or any) row of inner most grid, so it will first select the 3rd(or any) row of outer most grid and then moves in hierarchy to select the one which I actually want to get selected.  I have recreated this issue ion stackblitz,
following is the link of recreated isssue:
https://angular-mywq7v.stackblitz.io/.
Dimiter Topalov
Telerik team
 answered on 16 Aug 2018
5 answers
2.5K+ views

 

My framework uses moment.js for datetime values which return values in ISO dateformat.  I have managed to format the correct datetime values in the grid by calling a function in my controller:

<kendo-grid-column field="creationTime" title="{{ l('CreationTime')}}" width="150" [hidden]="false" media="lg">
    <ng-template kendoGridCellTemplate let-dataItem>
        {{ formatDate(dataItem.creationTime) }}
    </ng-template>
</kendo-grid-column>

And my function:

formatDate(date: any) {
    return moment(date).format('L');
}

The problem is that the filter now sees the data as a string and therefore I get the string filter.  I have exhaustively searched the forums on how to set the ISO date value to a javascript Date value and find myself scratching my head because all of the examples are either JQuery or angular with rxjs prior to angular 5.5.

So, I have the following method where this.gridData is a GridDataResult which is bound to my grid:

getEntitiesForKendo() {
    this.gridLoading = true;
    this._kendoGridService.getEntities(this.state)
        .subscribe((data) => {
            this.gridData = data;
            this.getOrganisationUnits();
            this.gridLoading = false;
        });
}

Which works great but a datetime value in this.gridData I have to use a function to convert to datetime in the grid column.  It would be better to cast the ISO date value to a javascript value so the grid can understand it but so far my investigations shjow that the only advice from Kendo is that I have to cast the value:

data.datetimevalue = new Date(data.datetimevalue)

In the subscription to my observable how do I get to the datetime value and cast it?

I have tried both the pipe and map operators to no avail.  Surely the conversion of ISO datetime values to javascript values is common?  Can anyone give me any pointers?  At the moment (sic.) I have had to disable filters on the datetime column which is not really what I want.

 

 

 

Bob
Top achievements
Rank 1
Veteran
 answered on 16 Aug 2018
1 answer
210 views

Hi, 

Is there a way to implement the drag and drop functionality to the grid column, in order to have a custom behavior ?

What I tried:
  1. Get an access to grid internal services or replace them with my custom services. That would allow me to control behavior of components on low level and reuse their events-emitting systems.
  2. Get an access to grid internal components/directives by using @ViewChild(ren). That would allow me to subscribe on events on child components level.
  3. Implement the d&d functionality by myself without kendo-ui grid API by adding custom mouse events listeners on grid container.

What I got:
  1. All services are private (marked as hidden). It's hard to reference them externally. Replacing them with custom implementation didn't work.
  2. Most of the internal components/directives are also private. Didn't get a valid approach (selector for ViewChild) to get required view elements.
  3. Kendo-ui grid sorting, grouping and reordering features for columns suppress most of the mouse events. It works only for columns with these features turned off.

Dimiter Topalov
Telerik team
 answered on 16 Aug 2018
4 answers
816 views

Hi , 

if we set value programatically to the autocomplete then clear is not triggering value change first time.

As I got this related link https://github.com/telerik/kendo-angular/issues/1052 , Saying its resolve in Fixed v1.4.0-dev.201712121657

But is there any quick fix / alternative way available to solve this without updating new version...

Alexander Popov
Telerik team
 answered on 13 Aug 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?