Hi,

I am wondering if we can use the ScrollView using hardcoded items instead of using the [data] property.

Eg. in using kendo-tabstrip...

<kendo-tabstrip>                    
                    <kendo-tabstrip-tab [selected]="true">
                        <ng-template kendoTabTitle>
                                       title
                        </ng-template>
                        <ng-template kendoTabContent>

                                  markup here with stylings
                        </ng-template>
                    </kendo-tabstrip-tab>

</kendo-tabstrip>

Thank you in advance and Regards,
Rex

Hi there,

In Kendo-pdf-export, if an element is given margin-top and it  occupies more than 1 page then the margin-top is applied to the element in all the pages.

The image attached shows the abnormal behaviour.

Sample Code:

<kendo-pdf-export #pdf paperSize="A4" margin="2cm" [scale]="scale">
<div style="margin-top:200px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
</p>
<p>
Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
</p>
<p>
Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.
</p>
<p>
Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
</p>
<p>
Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.
</p>
<p>
Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
</p> <p>
Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.
</p>
<p>
Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
</p> <p>
Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.
</p>
<p>
Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
</p> <p>
Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.
</p>
<p>
Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
</p>
</div>

</kendo-pdf-export>

Please provide relevant solution ASAP.

Hi,

Are there any plans for adding a colorpicker to Kendo UI for Angular?

And for now, what is your recommendation for an alternative? 

Best regards

Flemming Christiansen

I was using text type in input elements that were styled k-textbox class, but I wanted to use email and password type, but for some reason this breaks the form layout. See this example based on the grid external form. Click Add to bring up the add form.

https://stackblitz.com/edit/kendogrid-externalform-boz

I'm trying to use a DatePicker, and I would like it to show the selected date in a format appropriate for the browser locale (e.g. as I'm in UK and my browser is set to UK English I'd like the DatePicker to show 23rd May 2019 as 23/05/2019).

I've been trying to read through the globalization documentation but I'm getting a bit lost. Can you point me in the right direction or share an example that does what I'm asking?

I am looking at upgrading from angular 7.0 to 7.2. In the angular upgrade guide (https://update.angular.io/) one of the steps is to upgrade rxjs and remove rxjs-compat. I have noticed that many of the kendo packges require rxjs-compat. Can I safely upgrade per instructions or will removing rxjs-compat cause issues with kendo angular components.

Thanks,

Paul

I have a grid that is receiving paged data from the server (paging is done on the server) that is bound to a GridDataResult. When the Export to excel button is clicked I need to get all of the data, not just the displayed page. I tried to configure the export as shown in the example using the kendoGridExcel component (<kendo-grid-excel [fetchData]="onExcelExportClicked()" fileName="MyExcelFile.xlsx"></kendo-grid-excel>). After adding this to the grid, the function onExcelExportClicked gets called anytime something happens to the page (not even related to the grid). It gets executed multiple times on page load and each time I click on any control on the page. Is this the expected behavior?

Paul

Hi,

Can I use groupBy for a column of boolean datatype?

like this:

I am trying to pass this to a Dropdownlist and it works if the column is a string typed column.

Best regards

Flemming Christiansen

Hi,

We have a kendo-dialog that has a drop down and bunch of other fields like label and text etc. The requirement is that when the selection is changed in the drop down, another dialog needs to be popped up warning the user with a message.

I was able to achieve this by using the DialogService. But the problem is I am not able to set the size of this dialog. It is way too long and occupies the entire height of the frame. Please see the attached file.

When I inspect the html via developers tool, I can see that it is controlled by 

.k-dialog-wrapper .k-dialog {
     position: relative; <----- If I change this to inherit, the size of the dialog is perfect. Please see image DialogServiceGood.
}

I tried setting the value like this in the css, but does not help at all.

.k-dialog-wrapper.k-dialog {
              position: inherit !important;
}

How can we achieve this? Any help is greatly appreciated.

Here is the code to bring up the dialog using the service

html:

<kendo-dialog  class="xxxx" *ngIf="openedDialog" (close)="close('dialog')"  [minWidth]="250" [width]="700"  >
    <div  class="row-style" >  
        <div class="xx-ad-header" style="flex:10 ;" >
          {{title}}
        </div>
        <div  style="flex:1 ;"  class="button-right">
            <button type="button" class="btn btn-primary btn-close btn-circle" (click)="closeDialog()">
              <span>X</span>
            </button>
          </div>
      </div>
      <div   kendoDialogContainer ></div>
  
  ... the rest here
</kendo-dialog>

component class

 public popupConfirmation() {
    const dialog: DialogRef = this.dialogService.open({
        title: 'Please confirm',
        content: 'Data entereed will be lost. Do yoy wish to zontinue?',
        actions: [
            { text: 'No' },
            { text: 'Yes', primary: true }
        ],
        width: 250,
        height:200,
        minWidth: 250
    });

    dialog.result.subscribe((result) => {
        if (result instanceof DialogCloseResult) {
            console.log('close');
        } else {
            console.log('action', result);
        }

        let aresult = JSON.stringify(result);
        
    });
  }

Regards,

Jyothi

I've got a strange case with an in-grid dropdown filter that, for some reason, will bind to the first seven or eight of twenty-one objects in an array but will send back an empty array when sending back to vmUserFilters and vmUserChange as well as having the dropdown vanish when users after the eighth or ninth record are selected. One work-around is selecting a name in the first seven records and then adding a record between the ninth and twenty-first and removing the first added however I don't think our client will accept that arrangement. Below is the grid column and dropdown in question:

        <kendo-grid-column field="currentHolderId" title="Sales Person" width="100">
        <ng-template kendoGridFilterMenuTemplate
                     let-column="column"
                     let-filter="filter"
                     let-filterService="filterService">
          <kendo-multiselect [data]="vmusers"
                             textField="userName"
                             valueField="id"
                             [valuePrimitive]="true"
                             [value]="vmUserFilters(filter)"
                             (valueChange)="vmUserChange($event, filterService)">
          </kendo-multiselect>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
          {{vmuserFind(dataItem.currentHolderId)?.userName}}
        </ng-template>
      </kendo-grid-column>

Some additional information from my code:

The functions referenced above:

  public vmUserFilters(filter: CompositeFilterDescriptor): FilterDescriptor[] {
    return flatten(filter).map(({ value }) => value);
  }

  public vmUserChange(values: any[], filterService: FilterService): void {
    filterService.filter({
      filters: values.map(value => ({
        field: 'currentHolderId',
        operator: 'eq',
        value
      })),
      logic: 'or'
    });
  }

The interface for the vmusers array:

export interface IVMUser {
  id: string
  userName: string
  role: string
}

Let me know if you can think of anything that could be causing this issue behind the scenes or what I might need to add/update. I can verify that these values are consistent - ie. id is a unique identifier, userName is a first and last name, role is a single-word string.

Thank you!