Hi, I am using Angular 2 igGrid. I am experiencing an issue where sorting on a column doesn't work if a primary key is not provided in the gridOptions.
From the documentation, a primary key is not required in the example:
http://www.igniteui.com/help/api/2016.1/ui.iggridsorting
Clicking on any column header would reduce the number of records to a single row.
The data that I have can contain duplicates in each of the columns. If I send in the key for a column with duplicates, the same sorting issue occurs.
If a primary key is required for the sorting to work properly, should I create a surrogate key as a primary key and hide that column?
Thanks!
-Jessica
this.gridOptions = { dataSource: this.gridData, width: "100%", height: "400px", autoGenerateColumns: false, primaryKey: "a", columns: [ { key: "a", headerText: "A", width: "30%", dataType: "string" }, { key: "b", headerText: "B", width: "40%", dataType: "string" }, { key: "c", headerText: "C", width: "30%", dataType: "string" }, ], features: [ { name: "Paging", pageSizeDropDownLocation: "inpager" }, { name: "Sorting" } ] }
Hey Jessica,
The primaryKey is not required when using the Sorting feature and I'm not sure why you are facing this issue.
Could this be something with the data and using incorrect dataTypes?
Is this your complete grid configuration?
Can you provide a complete sample demonstrating this or do you want me to send you working one without a defined primaryKey?
Hi DeyanK, thanks for your quick response. The grid is able to display the data. Once I click on any of the header, the number of rows reduces down to 1.
Another problem I have is that, if I only use the same array for the gridData without a surrogate key, i.e.
Replace the following:
this.gridData = data;this.gridOptions.dataSource = data;
with the following:
for (let e of data) { this.gridData.push(e); }
I would get double number of records (10 instead of 5).
Thanks,
import { Component } from '@angular/core';import { IgGridComponent } from "../igniteui-angular2/index";import { Supplier } from "../Services/Supplier.service";
@Component({ selector: 'home', templateUrl: 'app/Components/supplier.component.html', styleUrls: ['app/Components/supplier.component.css']})export class SupplierComponent { gridId: string = ""; gridOptions: IgGrid = {}; gridData: any[] = [];
constructor(private supplier: Supplier) { this.supplier.getAllSuppliers().then( data => { this.gridData = data; this.gridOptions.dataSource = data; }); this.populateGrid(); }
populateGrid(): void { this.gridId = "supplierGrid"; this.gridOptions = { dataSource: this.gridData, width: "100%", height: "400px", autoGenerateColumns: false, columns: [ { key: "supplierName", headerText: "Supplier Name", width: "25%", dataType: "string" }, { key: "description", headerText: "Description", width: "25%", dataType: "string" }, { key: "created", headerText: "Created", width: "25%", dataType: "string" }, { key: "users", headerText: "Users", width: "25%", dataType: "number" } ], features: [ { name: "Paging", pageSizeDropDownLocation: "inpager" }, { name: "Sorting" } ] } }
};
import { Injectable } from "@angular/core";import { SUPPLIERS} from "./supplier-mock-data";
@Injectable()export class SupplierService {
// GET getAllSuppliers(): Promise<any[]> { return Promise.resolve(SUPPLIERS); }}
supplier-mock-data.ts
export const SUPPLIER: any[] = [ { supplierName: "Company A", description: "Crackers", created: "08/01/2016", users: 2 }, { supplierName: "Company B", description: "Water", created: "08/01/2016", users: 2 }, { supplierName: "Company C", description: "Meat", created: "08/01/2016", users: 3 }, { supplierName: "Company D", description: "Misc", created: "08/01/2016", users: 6 }, { supplierName: "Company E", description: "Gas", created: "08/01/2016", users: 2 }];