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
2 Answers, 1 is accepted
Hi Scott,
The desired filtering requirement seems to be more proper using a custom filter for all of the columns. Please check the following article for reusable custom filter components in our documentation:
https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/
StackBlitz example using the MultiSelect component to filter columns:
https://stackblitz.com/edit/angular-ur4kfg-tf9vd5?file=app%2Fapp.component.ts
In general, the described scenario is custom and indeed, it will require some custom logic. However, that is considered a developer effort.
I hope this helps and steers you in the right direction.
Regards,
Yanmario
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Hello Yanmario,
Thank you for your response. The solutions you gave pertains to filtering columns. My requirement is to implement cascading multiselects for the columns in a kendo grid, which contains related information. So when a user selects multi-select options of one of the grid columns, the values of the 2nd grid column multiselect should correspondingly update. For the grid editing, we are using in-line editing on row click approach.
In my case I've States, Counties as multi-selects for the two grid columns. When user selects state values, the counties multiselect values should correspondingly update. I'm using the (valueChange) event of the States multiselect to update the county multiselect values. And this approach works to some extent. I'm able to get the county multiselect to update its values based on state selections. However, the county mutiselect values should be specific to each row with in kendo grid, and not the same for all the rows. I'm not sure how to achieve this functionality specific to each row. Also, as soon as I leave the in-line editing of one row and clicks on the next row, my first row state, county selections disappear as it goes back to read-only mode.
<kendo-grid [data]="gridData"
(cellClick)="editHandler($event)"
(add)="addHandler($event)" [resizable]="true" [autoSize]=true>
<kendo-grid-column field="stateName" title="State" [width]="150">
<ng-template kendoGridCellTemplate
let-dataItem="dataItem">
{{ dataItem.stateName }}
</ng-template>
<ng-template kendoGridEditTemplate let-dataItem="dataItem" >
<kendo-multiselect [data]="statesData"
textField="stateName"
valueField="stateId"
(valueChange)="updateCounties($event)">
</kendo-multiselect>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="countyName" title="County" [width]="150">
<ng-template kendoGridCellTemplate
let-dataItem="dataItem">
{{ dataItem.countyName }}
</ng-template>
<ng-template kendoGridEditTemplate let-dataItem="dataItem" >
<kendo-multiselect [data]="selectedCounties"
textField="countyName"
valueField="countyId"
>
</kendo-multiselect>
</ng-template>
</kendo-grid-column>
</kendo-grid>
My TS Code –
--------------
import { states } from './mock-states-data';
import { counties } from './mock-counties-data';
export class DashboardComponent implements OnInit
{
public statesData: IState[] = states;
public countiesData: ICounty[] = counties;
selectedCounties: ICounty[] = [];
public updateCounties(values: any) {
const selStateIds: number[] = values.map((s: any) => s.stateId);
this.selectedCounties = this.countiesData.filter( c => selStateIds.includes( c.stateId ) );
}
}
Also, I've tried the sample given here to no vail (under the section - Implementing Cascading Drop-Down Lists).
https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/
Thanks!
Hi Scott,
Indeed you are taking the correct approach using the kendoGridEditTemplate to implement both MultiSelect components when the Grid is in Edit mode. From I will recommend using the valueChange event of the MultiSelect to check what value is being selected, thus providing you with the information to filter the second MultiSelect and display the desired values. Afterward, the formGroup needs to contain the changed values when saving the data element so that it can be reflected in the Grid view.
Please check the following example using local data demonstrating such an approach:
https://stackblitz.com/edit/angular-dmmf9y?file=app%2Fapp.component.ts
The demo is based on custom implementation to help steer you in the right direction. Further adjustments might be required depending on the use case scenario of the application. However, that would be considered a developer effort.
I hope the information provided helps and steers you in the right direction.
Regards,
Yanmario
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.