Questions on Kendo UI for Angular Forum

1 answer

16 views

Issue with nested fields in grid template

I have the code below. The column titled "Hair Color" shows the value properly. However "Hair Color2", which uses a template, does not. Note that both versions of "Last Name" work fine. So the issue appears to be something to do with using a template and a nested field. How can I make this work?

Here is a StackBlitz demonstrating the issue: https://stackblitz.com/edit/angular-phpipy-9tnfas?file=src%2Fapp%2Fapp.component.ts

 
<kendo-grid [data]="data">

  <kendo-grid-column field="id" title="id"></kendo-grid-column>
  <kendo-grid-column field="firstName" title="First Name"></kendo-grid-column>
  <kendo-grid-column field="lastName" title="Last Name"></kendo-grid-column>
  <kendo-grid-column field="hair.color" title="Hair Color"></kendo-grid-column>

  <kendo-grid-column title="Last Name2">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ dataItem['lastName'] }}
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column title="Hair Color2">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ dataItem['hair.color'] }}
    </ng-template>
  </kendo-grid-column>

</kendo-grid>

data = [

    {
      "id": 101,
      "firstName": "Abbi",
      "lastName": "Jones",
      "email": "ajones123@aol.com",
      "correctiveLens": false,
      "hair": { "color": "Blond", "type": "Curly" },
      "birthdate": "2/23/1981",
      "startTime": "8:15 PM"
    },
    {
      "id": 1,
      "firstName": "Terry",
      "lastName": "Medhurst",
      "email": "atuny0@sohu.com",
      "correctiveLens": true,
      "hair": { "color": "Black", "type": "Strands" },
      "birthdate": "12/1/1981",
      "startTime": "12:05 AM"
    },
    {
      "id": 2,
      "firstName": "Sheldon",
      "lastName": "Quigley",
      "email": "hbingley1@plala.or.jp",
      "correctiveLens": false,
      "hair": { "color": "Blond", "type": "Curly" },
      "birthdate": "12/1/1981",
      "startTime": "12:00 AM"
    },
    {
      "id": 3,
      "firstName": "Terrill",
      "lastName": "Hills",
      "email": "rshawe2@51.la",
      "correctiveLens": true,
      "hair": { "color": "Blond", "type": "Very curly" },
      "birthdate": "12/1/1981",
      "startTime": "12:00 AM"
    }
  ];

Grid

answered on 04 Jun 2024

1 answer

13 views

Adding Markers to the bubble layer makes the whole map flicker/redraw every time

We have a map tile layer and are trying to show the growth of our locations by programmatically adding makers to the array used by the bubble layer on a timed interval. And it "works" but every time we update the array of markers, the entire map redraws or flashes or something. Is that avoidable? In the code below displayMarkers() is a computed signal that returns an array of markers depending on where we are in the chronological progression.

    <kendo-map-layers>
      <kendo-map-tile-layer #tileLayer [subdomains]="tileSubdomains" [urlTemplate]="tileUrl"
        attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>">
      </kendo-map-tile-layer>
      <kendo-map-bubble-layer #markerLayer [data]="displayMarkers()" locationField="latlng" valueField="size"
        [symbol]="vanguardSymbol"></kendo-map-bubble-layer>
    </kendo-map-layers>

Map

answered on 04 Jun 2024

1 answer

14 views

Disabling Kendo-Filter Control

Good afternoon,
Does anyone know how to disable <kendo-filter> control?

<kendo-filter [filters]="populationCriteriaFilters"
  [value]="initialValue" (valueChange)="onFilterChange($event)"> </kendo-filter>

I have it on the card and the card is disabled and I need to disable it as well.
Any help will be greatly appreciated.

Filter

answered on 31 May 2024

1 answer

22 views

Grid custom buttons

I am using Kendo Angular grid and have a column containing multiple buttons. These buttons are custom angular components. I am using [navigable]="true". How can I make these buttons be part of the navigation?

Grid

updated question on 31 May 2024

0 answers

18 views

Grid - custom components

I am using Kendo Grid in Angular. I have [navigable]="true". When I go into edit mode, I have a custom template similar to this:

<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">

<custom-select [data]="col.data"></custom-select>

</div>

</ng-template>

It works find except that I can't click in this component. The custom-select component has a search box, paging control, and other elements the user may click while making a selection. Any time any of these are clicked it closes the component. How can I avoid this.

Similarly, another column is a custom component that wraps the material date picker. This component has the same issue any time the user tries to select a different month, etc.

Here is a StackBlitz demonstrating the problem using Material Datepicker. To replicate, click the date to edit, then click the icon to open the calendar, and then click next or previous month button and see how it closes the dialog.

https://stackblitz.com/edit/angular-material-datepicker-lkmb8d?file=src%2Fapp%2Fapp.component.ts

Grid

updated question on 31 May 2024

0 answers

11 views

Kendo TreeView call nodeDrop twice

Hello,

its been dealt with. But i have another issue. I have a treeview and a editService as a directive/datasource. Anyway the nodeDrop called twice. Have u any idea why nodeDrop is called twice. Best regards Nico

this.treeview.nodeDrop.subscribe(x=>console.log(x));
 

TreeView

asked on 31 May 2024

1 answer

12 views

Angular TreeView disable Drag and drop for single Elements

Hello,

i wante to disable drag and drop in my TreeView for specific Elements.

For example, i need something like that:

<ng-template kendoTreeViewNodeTemplate
                 let-dataItem>
      <span class="bold" [disable]="dataItem.name === 'uwe' ? true: false">
        {{dataItem.name}}
      </span>
</ng-template>
 
Best regards Nico

TreeView

answered on 31 May 2024

0 answers

16 views

Add extra icon in the hierarchical drawer component

I want to use hierarchical drawer, were in parent component i want to add extra icon (+ icon) next to the drawer text.

expected behaviour is, when i click the (+ icon) the drawer should not get expanded, instead i have to do some other functionality like opening a window/dialog. I want restrict the drawer expansion.

current behaviour: Drawer gets expanded wherever i click , including the (+ icon) .

Drawer

asked on 30 May 2024

0 answers

9 views

kendo ui grid options data source transport : read : function not firing

Here is my defaultGridSettings code. I wanted to auto scroll paging for the grid with back end api call. But the onDataLoad() function is not invoking when I scroll down. It is only fired once at the initial page load. So I am unable to load subsequent data (next) with scrolling the grid.

protected setDefaultGridSettings() {
        this.gridOptions = {
            height: "100%",
            allowCopy: false,
            sortable: {
                mode: "multiple",
                allowUnsort: true
            },
            resizable: true,
            columnMenu: true,
            filterable: true,
            scrollable: {
                virtual: true
            },
            noRecords: {
                template: require("../../common/templates/GridEmptyState.html")
            },
            edit: !this.readonlyAccess ? this.editOnchange.bind(this) : null,
            cancel: this.cancelChange.bind(this),
            columns: [
                { field: `id`, hidden: true, filterable: false, sortable: false, menu: false },
                {
                    field: `sellerName`, title: `Seller Name`,
                    filterable: {
                        multi: true,
                        search: true
                    }
                },
                {
                    field: `marketPlace`,
                    title: `Marketplace`,
                    filterable: {
                        multi: true,
                        search: true
                    },
                    editor: this.marketPlaceEditor.bind(this),
                    template: `# if(marketPlace){ # #=marketPlace# #} else {# #=marketPlace||""# #} #`,
                },
                { field: `phoneNumber`, title: `Phone Number`, filterable: false },
                { field: `emailAddress`, title: `Email Address`, filterable: false },
                { field: `physicalAddress`, title: `Physical Address`, filterable: false },
                {
                    field: `partnerType`,
                    title: `Partner Type`,
                    filterable: {
                        multi: true,
                        search: true
                    },
                    hidden: false,
                    editor: this.partnerTypeEditor.bind(this),
                    width: "200px",
                    template: `# if(partnerType){ # #=partnerType# #} else {# #=partnerType||""# #} #`,
                },
                {
                    field: `sellerType`,
                    title: `Authorization`,
                    filterable: {
                        multi: true,
                        search: true
                    },
                    hidden: false,
                    editor: this.authorizationTypeEditor.bind(this),
                    template: `# if(sellerType){ # #=sellerType# #} else {# #=sellerType||""# #} #`
                },
                {
                    field: `sellerCategory`,
                    title: `Category`,
                    filterable: {
                        multi: true,
                        search: true
                    },
                    hidden: false,
                    editor: this.categoryTypeEditor.bind(this),
                    template: `# if(sellerCategory){ # #=sellerCategory# #} else {# #=sellerCategory||""# #} #`
                },
                {
                    field: `tag`,
                    title: `Auto-Tag`,
                    filterable: {
                        multi: true,
                        search: true
                    },
                    hidden: false,
                    editor: this.tagEditor.bind(this),
                    template: `# if(tag){ if(tag == 'Benign') {# #=tag# #} else {# #=tag# #} } else {# #=tag||""# #} #`
                },
                //  {command: ["edit", "destroy"], title: "Actions", width: "270px", menu:false},
                {
                    command: [{
                        name: "edit",
                        template: "<a class='k-grid-edit command-edit glyphicon glyphicon-pencil'></a>"
                    }, {
                        name: "destroy",
                        template: "<a class=' k-grid-delete command-delete glyphicon glyphicon-trash danger'></a>"
                    }], title: "Actions", menu: false, width: "120px"
                }

            ] as kendo.ui.GridColumn[],
            editable: "inline",
            dataSource: {
                serverSorting: true,
                serverFiltering: true,
                serverPaging: true,
                pageSize: 500,
                transport: {
                    read: this.onDataLoad.bind(this),
                    update: (options => {
                        let tag = "";
                        if (options.data.tag instanceof Object) {
                            tag = options.data.tag.id;
                        } else if (tag !== "") {
                            tag = (this.tagOptions.filter(x => options.data.tag === x.text))[0].id;
                        }
                        this.addButton = false;
                        const sellerList: ISeller[] = [{
                            id: options.data.id,
                            sellerName: options.data.sellerName ? (options.data.sellerName).trim() : options.data.sellerName,
                            marketPlace: options.data.marketPlace,
                            phoneNumber: options.data.phoneNumber ? (options.data.phoneNumber).trim() : options.data.phoneNumber,
                            emailAddress: options.data.emailAddress ? (options.data.emailAddress).trim() : options.data.emailAddress,
                            physicalAddress: options.data.physicalAddress ? (options.data.physicalAddress).trim() : options.data.physicalAddress,
                            sellerType: options.data.sellerType,
                            sellerCategory: options.data.sellerCategory,
                            partnerType: options.data.partnerType,
                            tag: tag ? tag : options.data.tag

                        }];
                        this.sellerViewDataService.updateSeller(sellerList).subscribe(response => {
                            if (response.success) {
                                options.success(sellerList);
                                this.grid.kendoGrid.dataSource.read();
                            } else {
                                options.error(null);
                                this.alertDialog.show(response.messages);
                            }
                        },
                            error => {
                                options.error(null);
                                this.alertDialog.show(error.messages);
                            });
                    }).bind(this),
                    destroy: (options => {
                        this.addButton = false;
                        const sellerList: ISeller[] = [{
                            id: options.data.id,
                            sellerName: options.data.sellerName,
                            marketPlace: options.data.marketPlace
                        }];
                        this.sellerViewDataService.deleteSeller(sellerList).subscribe(response => {
                            if (response.success) {
                                options.success(null);
                            } else {
                                options.error(options.data);
                                this.alertDialog.show(response.messages);
                                this.grid.kendoGrid.dataSource.read();
                            }
                        },
                            error => {
                                options.error(options.data);
                                this.alertDialog.show(error.messages);
                                this.grid.kendoGrid.dataSource.read();
                                ;
                            });
                    }).bind(this),
                    create: (options => {
                        this.addButton = false;
                        const sellerList: ISeller[] = [{
                            sellerName: options.data.sellerName ? (options.data.sellerName).trim() : options.data.sellerName,
                            marketPlace: options.data.marketPlace,
                            phoneNumber: options.data.phoneNumber ? (options.data.phoneNumber).trim() : options.data.phoneNumber,
                            emailAddress: options.data.emailAddress ? (options.data.emailAddress).trim() : options.data.emailAddress,
                            physicalAddress: options.data.physicalAddress ? (options.data.physicalAddress).trim() : options.data.physicalAddress,
                            sellerType: options.data.sellerType,
                            sellerCategory: options.data.sellerCategory,
                            partnerType: options.data.partnerType,
                            tag: options.data.tag
                        }];
                        this.sellerViewDataService.addSeller(sellerList).subscribe(response => {
                            if (response.success) {
                                options.success(sellerList);
                                this.grid.kendoGrid.dataSource.read();
                            } else {
                                options.error(null);
                                this.alertDialog.show(response.messages);
                            }
                        },
                            error => {
                                options.error(null);
                                this.alertDialog.show(error.messages);
                            });
                    }).bind(this),
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options) {
                            return JSON.stringify({ data: options });
                        }
                    }

                },
                schema: SellerTrackingViewSourceSchema,
                // change: this.countSeller.bind(this)
            },
            change: this.onGridChange.bind(this),
            dataBound: this.onGridDataBound.bind(this),
            reorderable: true,
            selectable: "multiple row",
            navigatable: false,
            columnMenuOpen: (field) => {
                this.selectColumnReorderController.bind(field, this.grid);
            }
        };
    }

ScrollView

updated question on 29 May 2024

1 answer

22 views

Kendo button theme

I am changing the application theme dynamically on runtime, so when i use kendo button with property "themeColor="primary" , its not taking the dynamic theme colour of the application.

Application theme is default-ocean-blue, but its taking orange colour for button menu.

Button

Styling