Button in a Grid

[Dave Monks]

Hi,

I'm trying to add a button into a column on a grid that when clicked will call a function and pass in the key value for that row.
I've added the following as a column template, but my button does not show.

            <ej-grid [allowPaging]="true" [pageSettings]="pageSettings" [allowSelection]="flase"
                     [allowGrouping]="false" [allowSorting]="true" [allowFiltering]="false"
                     [filterSettings]="filterType" [groupSettings.groupedColumns]="groupedColumns" [dataSource]="gridShipsData">
              <e-columns>
                <e-column headerText="" width="10" textAlign="center">
                  <template e-template let-data>
                    <div>
                      <button type="button" onclick="alert('' + data.MGLT + '');">...</button>
                    </div>
                  </template>
                </e-column>
                <e-column field="name" headerText="Name" width="30"></e-column>
                <e-column field="model" headerText="Model" width="50"></e-column>
                <e-column field="cost_in_credits" headerText="Cost (Credits)" width="30" textAlign="right"></e-column>

              </e-columns>
            </ej-grid>

Any ideas what I am doing wrong here?

Thanks,
Dave

[Prasanna Kumar Viswanathan]

Hi Dave, 

Thanks for contacting Syncfusion support. 

We created a sample with your code example and in our sample the button has been displayed in our Grid. In this you have mentioned that when you click on the button you have to call a function and need to pass the key value of that row.   

We achieved your requirement and for your convenience we have created a sample,  so please download the sample from the below link. 

Find the code example and sample:   

<ej-grid id="Grid" [dataSource]="data" [allowPaging]="true"  [toolbarSettings]="toolbarItems" [editSettings]="editSettings"  

 [allowSorting]="true" >  

    <e-columns> 

         <e-column headerText="Photo" width="90"> 

              <ng-template e-template let-data> 

                    <div>                    

                      <button (click)="clicked($event, data.OrderID)">...</button>  

                    </div> 

                  </ng-template> 

         </e-column> 

        <e-column field="OrderID" headerText="OrderID" [isPrimaryKey]="true" width="75"></e-column> 

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

    </e-columns> 

 </ej-grid> 

 

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

export class AppComponent { 

      

     public gridData; 

     

     public editSettings; 

        public toolbarItems; 

         

        clicked(e: any, test: any){ 

        alert(e.target.id) 

       } 

 } 

Sample: http://www.syncfusion.com/downloads/support/forum/133429/ze/angular2-seeds-master413937529-328965326 

Try the attached sample and still if you face the same issue please replicate the issue in the attached sample.  

Regards, 

Prasanna Kumar N.S.V 

[Dave Monks]

I've tried putting the example code into my page, but the button doesn't appear in that grid either.

[Venkatesh Ayothi Raman]

Hi Dave, 

Thanks for the update. 

We were unable to reproduced the reported issue at our end and we have prepared a video demo for your reference, 

Video demo: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular546714847 

Sample: http://www.syncfusion.com/downloads/support/forum/133429/ze/angular2-seeds-master413937529-328965326  

If you still face the same issue, then could you please provide following details? 

1)      Essential Studio and Angular version details. 

2)      Share the code example of Grid and template code snippets. 

3)      Any script error thrown in console window while rendering the template column? If so, share the screenshot of the issue and details. 

4)      A sample if possible or modified the given sample as issue reproducible. 

Regards, 

Venkatesh Ayothiraman. 

[Dave Monks]

Here are the versions of Angular:

@angular/cli: 1.4.4
node: 7.10.0
os: win32 x64
@angular/animations: 4.3.3
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.4.4
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3
typescript: 2.3.4

The version of Essential Studio is 15.2.0.40

This is the HTML snippet

 <div class="card-deck-wrapper">
    <div class="card-deck">
      <div class="col-xl-6 col-lg-12">
        <div class="card">
          <div class="card-header">
            Test
          </div>
          <div class="card-block" style="margin:4px">
            <ej-grid id="Grid" [dataSource]="data" [allowPaging]="true" [toolbarSettings]="toolbarItems" [editSettings]="editSettings"
                     [allowSorting]="true">
              <e-columns>
                <e-column headerText="Photo" width="90">
                  <ng-template e-template let-data>
                    <div>
                      <button (click)="clicked($event, data.OrderID)">...</button>
                    </div>
                  </ng-template>
                </e-column>
                <e-column field="OrderID" headerText="OrderID" [isPrimaryKey]="true" width="75"></e-column>
                <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column>
                <e-column field="EmployeeID" headerText="EmployeeID" width="80"></e-column>
                <e-column field="Freight" headerText="Freight" width="90"></e-column>
                <e-column field="ShipCountry" headerText="ShipCountry" width="90"></e-column>
              </e-columns>
            </ej-grid>

          </div>
        </div>
      </div>
      <div class="col-xl-6 col-lg-12">
        <div class="card mb-3">
          <div class="card-header">
            Blank
          </div>
          <div class="card-block" style="margin:4px">
            Blank
          </div>
        </div>
      </div>

    </div>
  </div>

The only errors that I see in the console are:

polyfills.ts:19 Uncaught ReferenceError: $ is not defined
    at Object.../../../../../src/polyfills.ts (polyfills.ts:19)
    at __webpack_require__ (bootstrap e73e458254711559f364:54)
    at Object.1 (zone.js:2709)
    at __webpack_require__ (bootstrap e73e458254711559f364:54)
    at webpackJsonpCallback (bootstrap e73e458254711559f364:25)
    at polyfills.bundle.js:1
../../../../../src/polyfills.ts @ polyfills.ts:19
__webpack_require__ @ bootstrap e73e458254711559f364:54
1 @ zone.js:2709
__webpack_require__ @ bootstrap e73e458254711559f364:54
webpackJsonpCallback @ bootstrap e73e458254711559f364:25
(anonymous) @ polyfills.bundle.js:1

core.es5.js:2933 Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("
[WARNING ->]<template [ngIf]="!isClosed">
  <div [class]="'alert alert-' + type" role="alert" [ngClass]="classes""): ng:///AlertModule/AlertComponent.html@1:0

[Venkatesh Ayothi Raman]

Hi Dave, 

Thanks for the update. 

We went through your script error which you have shared for us and the script error will throw while we not installing the jQuery files in Angular app. This is the cause of this issue, because Syncfusion JavaScript widgets need jQuery to render the Angular components. We need to import the jQuery file in vendor.ts and include the Syncfusion theme files from node_modules as like follows, 

import * as $ from  

'jquery'; window["jQuery"] = $; 

window["$"] = $; import 'jsrender';  

import '../node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css'; 

Please refer to the following Help documentation, 

webpack - https://help.syncfusion.com/angular/gettingstarted/getting-started-with-angular-quick-start-webpack#configure-syncfusion-angular-component-in-quick-start 

 

https://help.syncfusion.com/angular/gettingstarted/getting-started-webpack 

 

 

Systemjs- https://help.syncfusion.com/angular/gettingstarted/getting-started-with-angular-quick-start-systemjs#systemjs-configuration 

 

https://help.syncfusion.com/angular/gettingstarted/getting-started-systemjs 

Regards, 

Venkatesh Ayothiraman.