1. Home
  2. Forum
  3. Angular - EJ 2
  4. Child Grid

Child Grid

How do add command to child grid , dynamically?
For parent grid i am doing like this
 <e-column width=140 [commands]='commands'></e-column>


childGridDataBind() {
    this.childGrid = {
      dataSource: this.childdata,
      id: "DestGrid",
      queryString: "queryId",
      allowPaging: false,

      pageSettings: { pageSize: 6, pageCount: 5 },
      columns: [       
        {
          field: "itemNumber",
          headerText: "ID",
          isPrimaryKey: false,
          width: 120,
         
        },
        {
          field: "name",
          headerText: "Name",
          textAlign: "left",
          width: 120

        },
        {
          field: "nodeType",
          headerText: "Node Type",
          textAlign: "left",
          width: 120
        },
       
      ]

    };
   
  }

7 Replies 1 reply marked as answer
BS Balaji Sekar Syncfusion Team March 25, 2021 12:40 PM UTC

Hi Vin, 
 
Greetings from the Syncfusion support. 
 
We have validated your query with provided the information and we found that you do not define the column.commands in the childGrid. Since we created a sample with command column binding in the childGrid component. 
 
Please refer the below code example and sample for more information. 
 
[app.component.ts] 
 this.commands = [ 
      { buttonOption: { iconCss: "vertical e-icons", cssClass: "e-flat" } } 
    ]; 
this.childGrid = { 
      dataSource: orderDatas, 
      queryString: "EmployeeID", 
      allowPaging: true, 
      pageSettings: { pageSize: 6, pageCount: 5 }, 
      columns: [ 
        { 
          field: "OrderID", 
          headerText: "Order ID", 
          textAlign: "Right", 
          width: 120 
        }, 
        { field: "ShipCity", headerText: "Ship City", width: 120 }, 
        { field: "Freight", headerText: "Freight", width: 120 }, 
        { field: "ShipName", headerText: "Ship Name", width: 150 }, 
        { headerText: "Command button", width: 180, commands: this.commands } 
      ] 
    }; 
 
 
If still facing same problem, please share the below details to us that will help to validate further. 
  1. Replicate the mentioned problem in above sample.
  2. Share the Grid rendering full code.
  3. Ensure the Syncfusion package version.
 
Regards, 
Balaji Sekar  


VI vin March 26, 2021 03:46 AM UTC

i added the command, but it is not opening the action menu for child grid

commandClick:"childCommandClick($event)",
     contextMenuOpen:"contextMenuOpen($event)",
     contextMenuItems:"contextMenuItems",
      contextMenuClick:'contextMenuClick($event)',





 childGridDataBind() {
    this.childGrid = {
      dataSource: this.childdata,
      // id: "DestGrid",
      queryString: "queryId",
      allowPaging: false,
     commandClick:"childCommandClick($event)",
     contextMenuOpen:"contextMenuOpen($event)",
     contextMenuItems:"contextMenuItems",
      contextMenuClick:'contextMenuClick($event)',
      pageSettings: { pageSize: 6, pageCount: 5 },
      load: function () {
        this.registeredTemplate = {}; 
      },
      columns: [
       
        {
          field: "itemNumber",
          headerText: "ID",
          isPrimaryKey: false,
          width: 120
        },
        {
         field: "itemName",
          headerText: "Name",
          textAlign: "left",
          // template: this.childtemplate,
          // template:  " ${itemName}
",

          // template: " ${itemName}", 
          width: 120

        },
        {
          field: "nodeType",
          headerText: "Node Type",
          textAlign: "left",
          width: 120
        }
        ,
        {
          field: "itemSTartDate",
          headerText: "Start Date",
          textAlign: "left",
          width: 120
        },
        {
          field: "itemEndDate",
          headerText: "End Date",
          textAlign: "left",
          width: 120
        },
        { headerText: "", width: 180, commands: this.commands } 

      ]

    };
    


  }

childCommandClick(args: any) {
    (<any>this.childGrid.contextMenuModule).element.ej2_instances[0].openMenu(null, null, (<any>event).pageY, (<any>event).pageX, event)

  }

this.childCommands= [{ buttonOption: { content: '', cssClass: 'e-flat ellipse' } }]; 



BS Balaji Sekar Syncfusion Team March 26, 2021 05:59 AM UTC

Hi Vin, 

By default, In our Grid’s childGrid define in TypeScript format when using Syncfusion’s Hierarchy Grid in Angular framework. We have achieved the contextmenu open from command column click using commandClick event in the child grid.  

Please refer the below code example and sample for more information. 
[app.component.ts] 
this.commands = [ 
      { buttonOption: { iconCss: "vertical e-icons", cssClass: "e-flat" } } 
    ]; 
    this.contextMenuItems = [  
      "Copy", 
       .     .    .   .  
    ]; 

this.childGrid = { 
      dataSource: orderDatas, 
      queryString: "EmployeeID", 
      allowPaging: true, 
      pageSettings: { pageSize: 6, pageCount: 5 }, 
      contextMenuItems: this.contextMenuItems, 
      commandClick: function(args) {  
        (<any>this.contextMenuModule).element.ej2_instances[0].openMenu( 
          null, 
          null, 
          (<any>event).pageY, 
          (<any>event).pageX, 
          event 
        ); 
      }, 
      columns: [ 
        { 
          field: "OrderID", 
          headerText: "Order ID", 
          textAlign: "Right", 
          width: 120 
        }, 
        { field: "ShipCity", headerText: "Ship City", width: 120 }, 
        { field: "Freight", headerText: "Freight", width: 120 }, 
        { field: "ShipName", headerText: "Ship Name", width: 150 }, 
        { headerText: "Command button", width: 180, commands: this.commands } 
      ] 
    }; 


If still facing same problem, please share the below details to us that will help to validate further.  

  1. Replicate the mentioned problem in above sample.
  2. Share the Grid rendering full code.
  3. Ensure the Syncfusion package version.

Regards, 
Balaji Sekar 


VI vin March 27, 2021 04:44 PM UTC

I got that, thanks
But i am not able to call any function in the command click, shows undefined
this.redirectToBacklog();


 redirectToBacklog() {
    console.log('redirect IN', this.router);
    var getRouteLink = "/project-charts/backlog"
    this.router.navigateByUrl(getRouteLink);
  }



 this.childGrid = {
      dataSource: this.childdata,
      // id: "DestGrid",
      queryString: "queryId",
      allowPaging: false,
     
      commandClick: function (args) {
        console.log("view", args);
        this.redirectToBacklog();
               
        // (<any>this.contextMenuModule).element.ej2_instances[0].openMenu(
        //   null,
        //   null,
        //   (<any>event).pageY,
        //   (<any>event).pageX,
        //   event
        // );
      },


BS Balaji Sekar Syncfusion Team March 29, 2021 07:48 AM UTC

Hi Vin, 
 
Based on your query we have achieved your requirement in the commandClick event of childGrid. In this event, we have bound the “this” component instances in the commandClick event we will access “this” properties when trigger the commandClick and you can call your own function. 
 
Please refer the below code example sample for more information. 
[app.component.ts] 
 commandClick: function(args) { 
        this.redirectToBacklog();   // Call your own function 
        var childGrid = args.target.closest(".e-grid").ej2_instances[0]; 
        (<any>childGrid.contextMenuModule).element.ej2_instances[0].openMenu( 
          null, 
          null, 
          (<any>event).pageY, 
          (<any>event).pageX, 
          event 
        ); 
      }.bind(this), 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar 


VI vin March 29, 2021 04:48 PM UTC

Thanks
can we show the command button as link?

this.commands = [
      { buttonOption: { iconCss: "vertical e-icons", cssClass: "e-flat" } }
    ];
 <e-column headerText="Manage Records" width="160" [commands]="commands"></e-column>

BS Balaji Sekar Syncfusion Team March 30, 2021 05:18 AM UTC

Hi Vin, 
 
Thanks for your update. 
 
Based on your query we understand that you want to bind the button with navigation action in commandColumn in the childGrid component. We suggest you to bind the button in the commandColumn and we can navigate the URL link using commandClick event of Grid. 
 
Please refer the below code example and sample for more information. 
 
[app.component.ts] 
 this.commands = [ 
      { buttonOption: { iconCss: "vertical e-icons", cssClass: "e-flat" } }, 
      { buttonOption: { content: "click me", cssClass: "e-flat" } } 
    ]; 
 this.childGrid = { 
      dataSource: orderDatas, 
      queryString: "EmployeeID", 
      allowPaging: true, 
      pageSettings: { pageSize: 6, pageCount: 5 }, 
      contextMenuItems: this.contextMenuItems, 
      commandClick: function(args) { 
        if ( 
          args.commandColumn.buttonOption.content && 
          args.commandColumn.buttonOption.content == "click me" 
        ) { 
          window.open("https://ej2.syncfusion.com/home/"); 
        } else { 
          this.redirectToBacklog(); 
          var childGrid = args.target.closest(".e-grid").ej2_instances[0]; 
          (<any>childGrid.contextMenuModule).element.ej2_instances[0].openMenu( 
            null, 
            null, 
            (<any>event).pageY, 
            (<any>event).pageX, 
            event 
          ); 
        } 
      }.bind(this), 
      columns: [ 
        { 
          field: "OrderID", 
          headerText: "Order ID", 
          textAlign: "Right", 
          width: 120 
        }, 
        { field: "ShipCity", headerText: "Ship City", width: 120 }, 
        { field: "Freight", headerText: "Freight", width: 120 }, 
        { field: "ShipName", headerText: "Ship Name", width: 150 }, 
        { headerText: "Command button", width: 180, commands: this.commands } 
      ] 
    }; 
  } 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar 


Marked as answer
Loader.
Up arrow icon