Telerik Forums
Kendo UI for Angular Forum
0 answers
3 views

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);
            }
        };
    }

Tanvir
Top achievements
Rank 1
 updated question on 29 May 2024
0 answers
5 views
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.
M
Top achievements
Rank 1
 asked on 29 May 2024
1 answer
8 views
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.

Yanmario
Telerik team
 answered on 29 May 2024
0 answers
3 views

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

Nico
Top achievements
Rank 1
 asked on 29 May 2024
1 answer
11 views

Hi,

 

Is there a possibility to give background colour to a weekday in Kendo Scheduler based on some conditions like how we can do it for weekends as seen in the screenshot.. We want to mark holidays in a different colour in the scheduler.

 

Thanks

Varun

Yanmario
Telerik team
 answered on 29 May 2024
1 answer
6 views

I tried setting the min property to rem, but it didn't work. Then I read that I can use minPixel property to specify a pixel value in Angular 11+, but that doesn't work either.

The min property of the kendo-splitter-pane element works correctly for me only with %, but I need rem or px. 

Please provide information about the actual behavior and how you can get the desired result.

Zornitsa
Telerik team
 answered on 27 May 2024
0 answers
6 views
Is there a way to prevent a groupable kendo grid from indenting and resizing columns when grouping, so that all columns stay the same width and group headers all fill the width of the grid? 
Jenna
Top achievements
Rank 1
 asked on 23 May 2024
1 answer
15 views

How can I adjust the background colour display on column charts to match the behaviour of line charts, where the colour spans the entire width of the value? Currently, the background colour on column charts only covers the width of the column itself. Is there a way to extend it to cover the full width of the value, similar to line charts?

Line chart


Column chart

Yanmario
Telerik team
 answered on 23 May 2024
1 answer
6 views
Is it possible to plot radial bar charts with kendo's chart library?? I already use kendo for grids and I don't wanna use another library for the charts in our project. Attached are two of the examples I'm looking for.
Yanmario
Telerik team
 answered on 23 May 2024
0 answers
10 views

Hi,

if the grid is loading the data, I would like to show the loading template, and if filtering the data, and there is no data, then the no record template. The issue is, that it seems, that if I set up the loading template, also the no record template is showing while loading.

How to avoid that?

horváth
Top achievements
Rank 2
Iron
Iron
 asked on 22 May 2024
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?