As the topic explains I want to create an extra column (without column header) with buttons that every one of them opens in a kendo ui window component that has all the fields of the same row as the button, with its values as content.

Is it possible?

I am using Kendo UI for Angular

Hi Team,

We are going to leverage the Kendo UI for angular Application . please help me with few licensed related doubt.

(1) Is Kendo UI for Angular free to use for commercial project?

(2)If its not free then what is the pricing tier

(3)In my development team there are 3 resources so do we need to take license for all team members or one license will workout

(4)How do i purchase & integrate the license in our project?

Thanks,

Sanyam

Hello guys.

I am using Angular UI Components (I will have a license from my company in the next days) and I have created a Grid with loan records.

So I have created a tabstrip component and inside it the first tab contains a kendo grid.

The first column is loan id.

I want to be able to click on the first cell of  every loan row and get the event so that I can open a new tab inside the tabstrip with tab title the value of the cell (the loan id) and ta content the rest of the loan row cells belonging to that loan id.

Any ideas on how to do that?

Thank you!

How can I make a chip list wrap, particularly in a grid cell? I've noticed that <kendo-chip-list> generates a span with a display style of "inline-flex", which seems to make a one-row flexbox that goes shooting off to the right, past my window border. I have enough vertical space for a wrap and that's what I'd prefer.

I can leave off the <kendo-chip-list> element and just go straight to <kendo-chip *ngFor="...">, and that suits my purpose since I don't need to be able to select chips, but if I did, I'd be stuck.

I can also include <kendo-chip-list> and slap in a style="flex-wrap: wrap;", but that seems inelegant.

What have I missed?

We are using the Kendo Angular Grid Master-Detail View (https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/detail-template/).

What we want to achieve is a toggle button in the header of the +/- expansion column, which toggles the expansion stage.

I did some research and found out that it's possible to toggle the expansion state programmatically, but no way to do this from the column header.

Is there a way to include a button in the expansion row header, am I missing something?

Thanks in advance!

My current angular project uses latest angular version with some kendo grids. We have a requirement where I need to have a kendo grid and use kendo multiselects for two of the columns -State, County. So while adding/editing data in the grid, user should be able to select multiple states and the county column should filter the data based on the selected states. I'm not sure how to achieve this.

I've added some basic code as below. State column works fine and lets me pick multiple states. I'm unable to properly filter the County column data based on selected states and bind the data.

My html code:

<kendo-grid style="height:600px" [kendoGridBinding]="statesData">

<kendo-grid-column field="capital" title="Capital City" width="140"></kendo-grid-column>                

<kendo-grid-column field="stateName" title="State" width="140" id="stateColumn"> 

<ng-template kendoGridCellTemplate >

<kendo-multiselect [data]="statesData" textField="stateName" valueField="stateId"  (valueChange)="onStateChange($event)">

</kendo-multiselect>

</ng-template>

</kendo-grid-column>

<kendo-grid-column field="countyName" title="County" width="140" id="countyColumn">

<ng-template kendoGridCellTemplate >

<kendo-multiselect [data]="countiesData" textField="countyName"    valueField="countyId">                          

</kendo-multiselect>

</ng-template>

</kendo-grid-column>                

</kendo-grid>

TS code:

public statesData: IState[] = states;

public countiesData: ICounty[] = counties;         

public onStateChange(values) {         

  const selStateIds = values.map(s => s.stateId);        

  const selectedCounties = this.countiesData.filter( c => selStateIds.includes( c.stateId ) );

  this.countiesData = selectedCounties;

}

My states data:

export const states: IState[] =

[

{

stateId: 1,

        stateName: "Delaware",

        capital: "DelCaptital"

},

{

stateId: 2,

        stateName: "New York",

        capital: "NY Captital"

},

{

stateId: 3,

        stateName: "New Jersey",

        capital: "NJ Captital"

}, 

    {

stateId: 4,

        stateName: "Virginia",

        capital: "VA Captital"

},      

];

County Data:

export const counties: ICounty[] = [

{

              countyId: 1,

stateId: 1,

              countyName: "Delaware County 1"     

},

{

            countyId: 2,

stateId: 1,

            countyName: "Delaware County 2"  

},

{

              countyId: 3,

stateId: 1,

              countyName: "Delaware County 3"  

}, 

           {

              countyId: 4,

stateId: 4,

              countyName: "VA County 1" 

},

          {

              countyId: 5,

stateId: 4,

              countyName: "VA County 2" 

},

      {

              countyId: 6,

stateId: 4,

              countyName: "VA County 3" 

},

];

Thank you.

Neelima

Hi ,

I create multiple kendo-grid in a for loop based on the data retrieved from the data source.  Lets assume we have only two grid created by the for loop. 

What I am trying to achieve is to deselect all the rows from the first grid when a row is selected in a second grid.

Setting the selectedIndex = -1  for previous grid and removing the class removes the class , but that row is still not selectable in the grid one.

If you look at any grid examples in StackBliz, we have to manually doa CTL+Click to unselect that row.

How can we mimic the  clicking of Clt+Click  rpogrammatically so kendo does not think that row is already clicked.t

const previousSelectedRow: HTMLCollection = this.grids[this.previousIndex]?.grid.ariaRoot.nativeElement.getElementsByClassName('k-state-selected')[0];
      if (previousSelectedRow) {
        this.renderer.removeClass(previousSelectedRow, 'k-state-selected');
        this.renderer.removeClass(previousSelectedRow, 'selected');
      }

Thanks

Hello, I am currently facing an issue with the "Filter" button in the filter menu popup of my grid.

I implemented a grid with a customized filter menu where I have set the [extra] option to false so I have to fill only one input, as following:

I used the same code to create other grids in my application and I am not facing this issue. Here when I open the filter menu popin, the "Filter" button is first disabled which is normal as I must type something in the filter input to enable it, but even if I do, the "Filter" button stays disabled, and I couldn't figure out what am I missing.

Is there any generic bad implementation that can cause this behavior and that I can fix? Or can I at least make the "Filter" button always clickable (I tried to remove the [disabled] option from the template in the kendo-grid-string-filter-menu file but I still have the same issue)?

Thank you in advance for you reply and tell me if you need some further informations.

Chahid

Hi Team,

Following URL show example export to pdf.

https://www.telerik.com/kendo-angular-ui/components/pdf-export/

What if I have dynamic components?
Means based on the scenario my components getting changing and loading dynamically based on passed parameters.

Regards,
Srinivas M. P.

Hello, 

We Have a dynamic grid columns,  and the user is allowed to add column to it, moreover we  have enabled the reordering feature. 

but whenever a user reorder a column and tries to add a new column, the newly added column is not placed at the last column, but right after the reordered column.

Here's a sample : https://angular-wwvczz.stackblitz.io/

So our business need is that when a user add a new column, the added column should be added as last column, unless user want to change it's position, he can reorder the columns again.

Note in the example that grid.columnList property is not returning the newly added column unless a reorder happens.

can you please advise how should I proceed to achieve this requirement

Thanks in advance