Hi,
i updated the question briefly.
I added new column "sign" in grid, I want to make ajax call to track id
I added following code "<columns>" tag
<column name="manufacturers" class="Namespace\Module\Ui\Component\Listing\Column\sign">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Namespace_Module/js/columns/html</item>
<item name="sortable" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Sign</item>
<item name="indexField" xsi:type="string">user_id</item>
<item name="sortOrder" xsi:type="number">90</item>
</item>
</argument>
</column>Column class code
<?php
namespace Namespace\Module\Ui\Component\Listing\Column;
use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
class Sign extends Column
{
protected $urlBuilder;
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
UrlInterface $urlBuilder,
array $components = [],
array $data = []
) {
$this->urlBuilder = $urlBuilder;
parent::__construct($context, $uiComponentFactory, $components, $data);
}
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
foreach ($dataSource['data']['items'] as &$item) {
$html="<div align='left'><input type='checkbox' onclick='test()' value='".$item['user_id']."' id='sign_".$item['user_id']."'></div>";
$item[$this->getData('name')] = $html;
$item[$this->getData('name').'_userid'] = $item['user_id'];
}
}
return $dataSource;
}
}component html.js
define([
'underscore',
'uiRegistry',
'mageUtils',
'uiElement',
'Magento_Ui/js/grid/columns/column',
], function (_, registry, utils, Element, Column) {
'use strict';
return Column.extend({
defaults: {
headerTmpl: 'ui/grid/columns/text',
bodyTmpl: 'ui/grid/cells/html',
disableAction: false,
controlVisibility: true,
sortable: true,
sorting: false,
visible: true,
draggable: true,
fieldClass: {},
ignoreTmpls: {
fieldAction: true
},
statefull: {
visible: true,
sorting: true
},
imports: {
exportSorting: 'sorting'
},
listens: {
'${ $.provider }:params.sorting.field': 'onSortChange'
},
modules: {
source: '${ $.provider }'
}
},
initialize: function () {
this._super()
.initFieldClass();
return this;
},
initObservable: function () {
this._super()
.track([
'visible',
'sorting',
'disableAction'
])
.observe([
'dragging'
]);
return this;
},
initFieldClass: function () {
_.extend(this.fieldClass, {
_dragging: this.dragging
});
return this;
},
applyState: function (state, property) {
var namespace = this.storageConfig.root;
if (property) {
namespace += '.' + property;
}
this.storage('applyStateOf', state, namespace);
return this;
},
sort: function (enable) {
if (!this.sortable) {
return this;
}
enable !== false ?
this.toggleSorting() :
this.sorting = false;
return this;
},
sortDescending: function () {
if (this.sortable) {
this.sorting = 'desc';
}
return this;
},
sortAscending: function () {
if (this.sortable) {
this.sorting = 'asc';
}
return this;
},
toggleSorting: function () {
this.sorting === 'asc' ?
this.sortDescending() :
this.sortAscending();
return this;
},
isSorted: function () {
return !!this.sorting;
},
exportSorting: function () {
if (!this.sorting) {
return;
}
this.source('set', 'params.sorting', {
field: this.index,
direction: this.sorting
});
},
hasFieldAction: function () {
return !!this.fieldAction || !!this.fieldActions;
},
applyFieldAction: function (rowIndex) {
if (!this.hasFieldAction() || this.disableAction) {
return this;
}
if (this.fieldActions) {
this.fieldActions.forEach(this.applySingleAction.bind(this, rowIndex), this);
} else {
this.applySingleAction(rowIndex);
}
return this;
},
applySingleAction: function (rowIndex, action) {
var callback;
action = action || this.fieldAction;
action = utils.template(action, {
column: this,
rowIndex: rowIndex
}, true);
callback = this._getFieldCallback(action);
if (_.isFunction(callback)) {
callback();
}
},
getFieldHandler: function (record) {
if (this.hasFieldAction()) {
return this.applyFieldAction.bind(this, record._rowIndex);
}
},
_getFieldCallback: function (action) {
var args = action.params || [],
callback = action.target;
if (action.provider && action.target) {
args.unshift(action.target);
callback = registry.async(action.provider);
}
if (!_.isFunction(callback)) {
return false;
}
return function () {
callback.apply(callback, args);
};
},
getLabel: function (record) {
return record[this.index];
},
getFieldClass: function () {
return this.fieldClass;
},
getHeader: function () {
return this.headerTmpl;
},
getBody: function () {
return this.bodyTmpl;
},
onSortChange: function (field) {
if (field !== this.index) {
this.sort(false);
}
},
selectRow: function(data, event) {
alert('You select item: ' + data.name);
}
});
});It successfully displays column in the grid.
I tried checkbox on click event "test()" by adding javascript file in the head section of layout, but it's not working.
require([
"jquery"
], function($){
function test(){
alert('hi');
//here ajax call to action class
}
});
I want to make ajax call to track the id, suggestion pls.
Thanks.
