cancel
Showing results for 
Search instead for 
Did you mean: 

Create Ajax call for column in grid

Create Ajax call for column in grid

Hi,
I am new to magento ce , i created grid like product catalog grid and i added new column with check box.
I want to make Ajax call to track id when I click on the check box in grid.

Thanks.
3 REPLIES

Re: Create Ajax call for column in grid

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.

Re: Create Ajax call for column in grid

You can try with below code in your js file,

 

'use strict';
require(['jquery'], function($) {
    $(document).ready(function() {
    	function test(){
	        alert('hi');
	        //here ajax call to action class
	    }
    }
}

Run php bin/magento setup:static-content:deploy

remove cache.

 

If issue solved, click kudos/accept as solutins.

If Issue Solved, Click Kudos/Accept As solutions.

Re: Create Ajax call for column in grid

File path of js

Namespace\Module\view\adminhtml\web\js\grid.js

grid.js code as follow to test call

 

require([
"jquery"
], function($){
function test(){
alert('hi');
//here ajax call to action class
} 
});

Grid layout in following path

Namespace\Module\view\adminhtml\layout\plantadmin_plantadmin_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head> 
<script src="Namespace_Module::js/grid.js" /> 
</head>
<body> 
<referenceContainer name="content">
<uiComponent name="user_profile_listing"/>
</referenceContainer> 
</body>
</page>


Grid UI component in following path

Namespace\Module\view\adminhtml\ui_component\user_profile_listing.xml

 

Thanks