I am using dxDataGrid UI widget of Devextreme product.

I want to make one of its column to act as a button. Therefore, I have done the following listing so far:

One of my Fields

  { dataField: 'LetterNumber', caption: 'Letter Number', cellTemplate: showLetterImageTemplate }

Its CellTemplate to show button

function showLetterImageTemplate (cellElement, cellInfo) {
    cellElement.html(' <button class="btn btn-info btn-sm btn-block" ng-click="show('+cellInfo+')">' + cellInfo.displayValue + ' </button> ');
    $pile(cellElement)($scope);
};

The function which is called by clicking on the buttons in the Field

$scope.show = function (cellInfo) {
    DevExpress.ui.notify("TEST" + cellInfo.data, "error", 2000);
}

The problem is I want to pass the current clicked row data to the Show() function so I can understand which row has been clicked on. however, when I click on the button it gives me the following error:

ng-click=Show([Object Object])

Just to note, I am using Agular as my UI framework.

I am using dxDataGrid UI widget of Devextreme product.

I want to make one of its column to act as a button. Therefore, I have done the following listing so far:

One of my Fields

  { dataField: 'LetterNumber', caption: 'Letter Number', cellTemplate: showLetterImageTemplate }

Its CellTemplate to show button

function showLetterImageTemplate (cellElement, cellInfo) {
    cellElement.html(' <button class="btn btn-info btn-sm btn-block" ng-click="show('+cellInfo+')">' + cellInfo.displayValue + ' </button> ');
    $pile(cellElement)($scope);
};

The function which is called by clicking on the buttons in the Field

$scope.show = function (cellInfo) {
    DevExpress.ui.notify("TEST" + cellInfo.data, "error", 2000);
}

The problem is I want to pass the current clicked row data to the Show() function so I can understand which row has been clicked on. however, when I click on the button it gives me the following error:

ng-click=Show([Object Object])

Just to note, I am using Agular as my UI framework.

• javascript
• angularjs
• devexpress
• devextreme

2 Answers 2

Try to use the following code to define cellTemplate:

$scope.onClick = function(cellInfo) {
    // cellInfo object
};

$scope.dataGridOptions = {
    dataSource: [
        { name: "Alex", age: 23 },
        { name: "Bob", age: 25 }
    ],
    columns: [
        "name", {
        dataField: "age", cellTemplate: function(cellElement, cellInfo) {

            var $button = $("<button>")
                .text("Click me")
                .on("click", $.proxy($scope.onClick, this, cellInfo));

            cellElement.append($button);
            }
        }
    ]
};

Next, add this markup to the view:

<div dx-data-grid="dataGridOptions"></div>

Hope it helps!

// Based on your code, this should work for you        
columns: [
    // ...
              {
                dataField: "LetterNumber",  
                caption: "Letter Number",
                cellTemplate: function (container, cellInfo) {
                  var gridButton = $("<button>")
               // (if needed)
               // .attr("attribute name (i.e. class, disabled)", "attribute value")  
                  .text("Show Letter")
                  .on("click", function () { $scope.show(cellInfo) });

                  container.append(gridButton);

                }

              }
    // ... 
    ]

You can also check this example: https://codepen.io/alfredomason1986/pen/KveBNd