We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Drop down edit in child grid - Hierarchy grid

Hi,

  1. I have accomplished changing grid cells based on drop down list value in my project, but it's not working in a hierarchy child grid. I have a drop down edit in a child grid (hierarchy grid) which is bind to a 'Item' column in the database and it's loading fine but other fields in the same row like 'Unit Price' is empty. See codes below that l've tried. Kindly assist.

2. I also want to know how to include command column in this child grid

Component.ts

@Component({
selector: 'app-fetch-data',
templateUrl: './fetch-data.component.html'
})
export class FetchDataComponent implements OnInit{

public plantrules: Object;
public editparams: Object;
public data: DataManager;
public editSettings: Object;
public toolbar: ToolbarItems[] | object;
public orderForm: FormGroup;
public pageSettings: Object;
public submitClicked: boolean = false;
@ViewChild('grid', { static: false })
public grid: GridComponent;

public itemElem: HTMLElement;
public itemObj: DropDownList;

public itemParams: IEditCell = {
create: () => {
this.itemElem = document.createElement('input');
return this.itemElem;
},
read: () => {
return this.itemObj.text;
},
destroy: () => {
this.itemObj.destroy();
},
write: (args) => {
this.itemObj = new DropDownList({
dataSource: new DataManager({
url: 'api/Product',
adaptor: new ODataV4Adaptor(),
}),
query: new Query().take(10000),
fields: { value: 'Id', text: 'Item' },
text: args.rowData[args.column.field],
change: (args) => {
this.grid.editModule.formObj.element.querySelector("#" + this.grid.element.id + "UnitPrice" as any)
.ej2_instances[0].value = args.itemData.UnitPrice;
},
placeholder: 'Item/Produce',
floatLabelType: 'Always',
});
this.itemObj.appendTo(this.itemElem);
},
};

public dataManager: DataManager = new DataManager({
url: 'Invoice/UrlDatasource',
adaptor: new UrlAdaptor()
});
ngOnInit(): void {
this.data = this.dataManager;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
this.toolbar = ['Add', 'Edit', 'Delete', 'Search',
{ text: 'Refresh grid', tooltipText: 'Refresh grid', id: 'Refresh', prefixIcon: 'e-refresh', align: 'Left'}, ];
this.pageSettings = { pageCount: 10};
}

public childGrid: GridModel = {
dataSource: new DataManager(
{
url: 'Invoice/UrlDatasource',
updateUrl: 'Invoice/Update',
insertUrl: 'Invoice/Insert',
removeUrl: 'Invoice/Delete',
adaptor: new UrlAdaptor() },
new Query().take(100)
),
queryString: 'InvoiceNo',
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
allowResizing:true,
columns: [
{ field: 'Id', headerText: ' ID', isPrimaryKey: true, width: 40, visible:true },
{ field: 'InvoiceNo', headerText: 'Invoice#', allowEditing :false, width: 40 },
{ field: 'Item', headerText: 'Item', width: 70, editType:'dropdownedit', edit:this.itemParams },
{ field: 'Category', headerText: 'Category', width: 60 },
{ field: 'UnitPrice', headerText: 'Unit Price', width: 60, textAlign: 'Center' },
],
actionBegin(args: AddEventArgs) {
if (args.requestType === 'add') {
const InvoiceNo = 'InvoiceNo';
(args.data as object)[InvoiceNo] = this.parentDetails.parentKeyFieldValue;
}
}
}


Regards

Charles



1 Reply 1 reply marked as answer

JC Joseph Christ Nithin Issack Syncfusion Team November 8, 2022 01:54 PM

Hi Charles,


   Based on your query, when you edit the value of on column in the child grid you want to change the value of another column, you also want to add command column for the child grid. Refer the below sample, in which when you edit a column in the child grid using the dropdown in the edit template, and also added the command column for the child grid.


Refer the below code example:


 

public itemParamsIEditCell = {

    create: () => {

      this.itemElem = document.createElement('input');

      return this.itemElem;

    },

    read: () => {

      return this.itemObj.value;

    },

    destroy: () => {

      this.itemObj.destroy();

    },

    write: (args=> {

      this.itemObj = new DropDownList({

        dataSource: [

          { Id: 10Item: 'Item1'UnitPrice: 40 },

          { Id: 20Item: 'Item2'UnitPrice: 50 },

          { Id: 30Item: 'Item3'UnitPrice: 60 },

          { Id: 40Item: 'Item4'UnitPrice: 70 },

        ],

        fields: { value: 'Id'text: 'Item' },

        change: (args=> {

          var childGridInstance =

            args.element.closest('.e-grid').ej2_instances[0];

          childGridInstance.editModule.formObj.element.querySelector(

            ('#' + childGridInstance.element.id + 'UnitPrice'as any

          ).ej2_instances[0].value = args.itemData.UnitPrice;

        },

        value: args.rowData[args.column.field],

        placeholder: 'Item/Produce',

        floatLabelType: 'Always',

      });

      this.itemObj.appendTo(this.itemElem);

    },

  };

 

 

  this.childGrid = {

      toolbar: ['Add''Edit''Delete''Update''Cancel'],

      editSettings: {

        allowEditing: true,

        allowAdding: true,

        allowDeleting: true,

      },

      dataSource: [

       -----------------------

       -----------------------

      ],

      queryString: 'stockInHeaderId',

      allowPaging: false,

      allowSorting: 'true',

      allowResizing: true,

      columns: [

        {

          field: 'id',

          headerText: 'S.No.',

          width: 120,

        },

        {

          field: 'itemCode',

          headerText: 'Item Code',

          width: 120,

        },

        {

          field: 'quantity',

          headerText: 'Item',

          edit: this.itemParams,

          width: 150,

        },

        {

          field: 'UnitPrice',

          headerText: 'Unit Price',

          width: 150,

        },

        {

          headerText: 'Action',

          width: 150,

 

          commands: [

            {

              type: 'Delete',

              buttonOption: { cssClass: 'e-flat', iconCss: 'e-icons e-delete' },

            },

          ],

        },

      ],

    };

 


Sample: https://stackblitz.com/edit/angular-6cc8vs-6msfbd?file=app.component.ts,app.component.html


Regards,

Joseph I.


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon