Commands only working on first grid item

[Zack]

<ej-grid id="marketingGrid"

[dataSource]="data"

[editSettings]=" { allowAdding: 'true', allowDeleting: 'true', allowEditing: 'true' }"

[filterSettings]="{ filterType: 'excel' }"

(dataBound)="onCreate($event)"

(beginEdit)="beginEdit($event)"

(actionComplete)="onComplete($event)"

class="marketing-list-table">

<e-columns>

<e-column field="retailPrice" headerText="Retail Price" format="{0:C}" textAlign="left" width=140></e-column>

<e-column field="specialPrice" headerText="Special Price" format="{0:C}" textAlign="left" width=140></e-column>

<e-column [commands]="editCommand" headerText="Edit" textAlign="center" width=40></e-column>

<e-column [commands]="removeCommand" headerText="Remove" textAlign="center" width=55></e-column>

</e-columns>

</ej-grid>

this.removeCommand = [

{

type: ej.Grid.UnboundType.Delete,

buttonOptions: {

contentType: "imageonly",

size: "normal",

prefixIcon: "mi"

}

}

];

this.editCommand = [

{

type: ej.Grid.UnboundType.Edit,

buttonOptions: {

contentType: "imageonly",

size: "normal",

prefixIcon: "mi mi-mode-edit",

}

}

];

}

I have a grid as the above with those commands and whenever I go to use them they work but only on the first item in the dataSource. When I log the beginEdit it gets the right row but then displays the first row in the UI and edits that one. To clarify, the positioning stays the same,and the first row still has it's item but the row that is in the process of editing also has a copy of it.

[Zack]

Attached an example image to fully clarify what I mean
Attachment: Screenshot__4_24_2017_,_8_43_56_PM_ver001_155f9f92.zip

[Thavasianand Sankaranarayanan]

Hi Zack, 

We have analyzed your query and we suspect that you want to do CRUD operations in Grid but while editing the record first record value gets shown in other records editing. 

If Grid columns does not have primaryKey column then CRUD operations are not properly working. CRUD operations are performed based on the primaryKey column in Grid. So, you need to enable isPrimaryKey property in any one of the column, which has unique values. 

Refer the below code example. 

<ej-grid id="Grid23" [allowPaging]="true" > 

 

        <e-columns> 

            <e-column field="EmployeeID"  headerText="Employee ID" textAlign="right"></e-column> 

            <e-column field="OrderID" [isPrimaryKey]="true"  headerText="Order ID" textAlign="right"></e-column> 

            <e-column field="CustomerID" headerText="Customer ID" textAlign="right"></e-column> 

        </e-columns> 

 

    </ej-grid> 

Refer the help documentation. 

Link:  https://help.syncfusion.com/api/js/ejgrid#members:columns-isprimarykey 

Regards, 

Thavasianand S.