Telerik Forums
Kendo UI for Angular Forum
1 answer
996 views

Is there a way to restrict column reorder?  

In general we would like users to reorder the column as they see fit for preference.  However, there are some scenarios where it becomes problematic to allow it.  Even it we disable a column for reorder, if other columns are reorderable it can still move columns which have it disabled. 

 

I'll give you a few examples of where restricting the reorder is helpful - columns meant for outside edge. 

- "Select" column is set to be 1st column in the grid.  It doesn't have reorder enabled, so a user can't move it directly.  However, other columns which are reorderable can be moved in front of the "Select" column making it 2,3,4th or whatever.  It would be great to prevent this to say the select is not reorderable it should remain 1st (reorder to in front of it off-limits).

- This would also be true for an action column that we made sticky on the far right side (last).  Its not reorderable and should remain last.

 

Dimiter Topalov
Telerik team
 answered on 23 Jul 2021
5 answers
559 views

I have a nested, selectable grid. When I click on the check that are below the scope of the window it causes the grid to auto scroll all the way back to the top. Selecting by clicking on the cells does not cause this to happen. Only when I click on the checkbox itself.

<kendo-grid
    class="kendo-grid"
    [data]="gridView"
    filterable="menu"
    (dataStateChange)="dataStateChange($event)"
    [pageable]="{ pageSizes: [10, 25, 50], previousNext: true, buttonCount: 5, info: true }"
    [pageSize]="state.take"
    [skip]="state.skip"
    (pageChange)="pageChange($event)"
    [resizable]="true"
    [sortable]="{ allowUnsort: true, mode: 'multiple' }"
    [sort]="state.sort"
    [selectable]="selectableSettings"
    [kendoGridSelectBy]="'id'"
    [selectedKeys]="selections"
    (selectedKeysChange)="onSelectedKeysChange($event)"
    (cellClick)="transactionSelected($event)"
    [rowClass]="rowCallback"
>
    <kendo-grid-checkbox-column [hidden]="group?.groupId !== 1" width="50"></kendo-grid-checkbox-column>
    <kendo-grid-column field="transactionId" title="ID" width="90">
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
            <kendo-grid-numeric-filter-menu [column]="column" [filter]="filter" [filterService]="filterService">
            </kendo-grid-numeric-filter-menu>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="effectiveDate" title="Date" width="100" format="MM/dd/yyyy">
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
            <kendo-grid-date-filter-menu [column]="column" [filter]="filter" [filterService]="filterService"> </kendo-grid-date-filter-menu>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="amount" title="Amount" width="110" [format]="{ style: 'currency' }">
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
            <kendo-grid-numeric-filter-menu [column]="column" [filter]="filter" [filterService]="filterService">
            </kendo-grid-numeric-filter-menu>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
            <span *ngIf="dataItem.debitCredit == 'DR'">-</span>{{ dataItem.amount | currency: 'USD' }}
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="transactionTypeVerbose" title="Type" width="120">
        <ng-template kendoGridFilterMenuTemplate let-column="column" let-filter="filter" let-filterService="filterService">
            <multicheck-filter
                [isPrimitive]="true"
                [field]="column.field"
                [filterService]="filterService"
                [currentFilter]="filter"
                [data]="distinctPrimitive(column.field)"
            >
            </multicheck-filter>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="source" title="Source" width="120">
        <ng-template kendoGridFilterMenuTemplate let-column="column" let-filter="filter" let-filterService="filterService">
            <multicheck-filter
                [isPrimitive]="true"
                [field]="column.field"
                [filterService]="filterService"
                [currentFilter]="filter"
                [data]="distinctPrimitive(column.field)"
            >
            </multicheck-filter>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="details" title="Details"> </kendo-grid-column>
    <kendo-grid-column field="transactionCommentFirst" title="Comment"> </kendo-grid-column>
    <kendo-grid-column data-filterable="false" width="140">
        <ng-template kendoGridCellTemplate let-dataItem>
            <i
                *ngIf="!dataItem.isRemoving && user.canWrite"
                (click)="openMoveToPendingModal(dataItem)"
                class="fa fa-2x fa-share cursor-pointer text-success mr-2"
                aria-hidden="true"
                placement="top"
                ngbTooltip="Move Transaction to Pending Resolution"
                container="body"
            ></i>
            <app-nori-comments [dataItem]="dataItem" [user]="user"></app-nori-comments>
            <i
                *ngIf="dataItem.isRemoving && user.canWrite"
                class="fa fa-2x fa-circle-o-notch fa-spin fa-fw text-primary cursor-pointer mr-2"
                aria-hidden="true"
            ></i>
            <app-audit-history [dataItem]="dataItem"></app-audit-history>
            <i
                *ngIf="!dataItem.isRemoving && dataItem.transactionGroup.groupName !== 'Ungrouped' && user.canWrite"
                (click)="removeFromGroup(dataItem)"
                class="fa fa-2x fa-minus-circle text-danger cursor-pointer"
                aria-hidden="true"
                placement="top"
                ngbTooltip="Remove from Group"
                container="body"
            ></i>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

 

Neel
Top achievements
Rank 1
Iron
 answered on 21 Jul 2021
0 answers
441 views

Hi. 

I'm using donut chart, and I would like to know if there is any way to add a tooltip with the full name of the legend when hovering over it. I needed it because there is a scenario where I add ellipsis when the name is too big. As in the image below:   

I'm adding ellipsis changing the legend content:

public legendItemContent = (elements: any): string => {
    if (elements.text.length > 30) {
        elements.text = elements.text.substring(0, 30);

        return elements.text.concat('...');
    }

    return elements.text;
};

I tried several solutions but none were successful. I found out this answer, which was the closest approach, but it's not exactly what I wanted.

If it helps in any way, I'm using this stackblitz project to perform my tests.

Thank you beforehand.


Yago
Top achievements
Rank 1
 updated question on 20 Jul 2021
1 answer
146 views

Hello Kendo UI community,

 

I am going to develop a good-looking UI form with multiple components: input, textboxes, comboboxes, dropdownlists, etc. I am currently doing a research on interesting custom themes built for bootstrap. My question is can we apply those custom themes to the bootstrap that we have for Kendo UI? If yes, what would be the process like? Thanks.

Yanmario
Telerik team
 answered on 20 Jul 2021
2 answers
117 views

Hi,

 

Which type replace morning in scheduler ? https://angular-kqsgvs.stackblitz.io

I have following error message "and 'type' does not exist in type 'SchedulerEvent'.  type: 'morning'"

 

Regards

bahaso
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 19 Jul 2021
1 answer
369 views

Hello,

I want to place ```kendo-datepicker``` into my website, which I want to be responsive also for mobile devices, i.e. width cca 350 px.

I reduced the font and overall size of all controls (also buttons and comboboxes from bootstrap library) in the view, even the datepicker textbox. I managed also to reduce the size of datepicker popup by scaling it (I found this tip somewhere here in forum), but it's wrongly placed - because the textbox and button on ribbon above are not centered, the popup is not centered as well and is off the left edge.

Screens of popup in original and scaled size are attached.

Is there any straightforward way to reduce it's size (except changing font-size which does not work for me and scaling which I described above) so it would fit into screen?

Thanks for any advice.

Frimlik

Slavena
Telerik team
 answered on 19 Jul 2021
0 answers
340 views

Hi

 

I tried your schedule sample https://stackblitz.com/edit/angular-wttnac-9ednxl

but i have folloing error message

Error: src/app/app.component.ts:18:48 - error TS2339: Property 'slotClass' does not exist on type 'AppComponent'.

 

Could you help me thanks

bahaso
Top achievements
Rank 1
Iron
Iron
Iron
 asked on 19 Jul 2021
0 answers
59 views

Hi

 

Could i have calender of week and scheduler with day detail visible simultaneously ?

like outlook.

 

Regards

bahaso
Top achievements
Rank 1
Iron
Iron
Iron
 updated question on 18 Jul 2021
1 answer
203 views

What to I need to do in onDragEnd() in this sample, it should work?

https://stackblitz.com/edit/angular-jadbh4?file=app%2Fapp.component.ts

 

Hetali
Telerik team
 answered on 16 Jul 2021
1 answer
1.6K+ views

Hi,

 

In a definition like below I get the same Object in the 'dataItem' parameter as in the 'formGroup' parameter. This leads to me not being able to access the dataItem in my template.

 

<ng-template kendoGridEditTemplate let-dataItem let-formGroup="formGroup">
<!-- Usage of both dataItem and formGroup -->           
</ng-template>

Jeremy
Top achievements
Rank 1
Iron
 answered on 16 Jul 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?