Add html5 data attribute to grid with datasource / datamanager

[Tomasz]

Hi.

I use Symfony5.1 + Webpack + yarn.

I make grid and datatasource like this:

import $ from "jquery";

import '../css/admin_locale.scss';

import 'bootstrap';

import {setCulture, L10n, Ajax} from '@syncfusion/ej2-base';
import {Button} from '@syncfusion/ej2-buttons';
import {Grid, Filter, Page, Sort, Search, Edit, Toolbar, RowDataBoundEventArgs } from '@syncfusion/ej2-grids'
import {DataManager, RemoteSaveAdaptor, ODataV4Adaptor } from '@syncfusion/ej2-data';
import * as EJ2_LOCALE from "@syncfusion/ej2-locale/src/pl.json";
import {FormValidator, FormValidatorModel} from '@syncfusion/ej2-inputs';

let mainUrl = "/admin/locale";

L10n.load({pl: EJ2_LOCALE.pl});

setCulture('pl');

Grid.Inject(Filter, Page, Sort, Search, Toolbar, Edit);

let myGrid = new Grid({
    // dataSource: null,
    locale: 'pl',
    toolbar: ['Search', 'Add', 'Edit', 'Delete', 'Update', 'Cancel'],
    // editSettings: {allowEditing: true, allowAdding: true, allowDeleting: true},

    editSettings: { showDeleteConfirmDialog: true, allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
    searchSettings: {operator: 'contains', ignoreCase: true},
    columns: [
        { field: "id", isPrimaryKey: true, visible:false },
        {field: 'position', textAlign: 'Right', type: 'integer', validationRules: { required: true, digits: true }},
        {field: 'name', type: 'string', validationRules: { required: true }},
        {field: 'shortcut', textAlign: 'Right', format: 'string', validationRules: { required: true, minLength: 2, maxLength: 2 }},
    ],
    // rowDataBound: rowBound,
    height: 175,
    allowFiltering: true,
    filterSettings: {type: 'Excel', ignoreAccent: true},
    allowPaging: true,
    pageSettings: {pageSize: 6},
    allowSorting: true,
    actionFailure: (e) => {
        let span = document.createElement('span');
        myGrid.element.parentNode.insertBefore(span, myGrid.element);
        span.style.color = '#FF0000'
        span.innerHTML = 'Server exception: 404 Not found';
    },
});


myGrid.appendTo('#table_container');

myGrid.showSpinner();

let ajaxObj = new Ajax();
ajaxObj.url = '/admin/locale/es_data_list';
ajaxObj.type = 'GET';
ajaxObj.send().then(function (value) {

    let dataajax = JSON.parse(value);

    myGrid.dataSource = new DataManager({
        json: dataajax,
        adaptor: new RemoteSaveAdaptor, //remote save adaptor
        insertUrl: mainUrl + '/es_data_insert',
        updateUrl: mainUrl + '/es_data_update',
        removeUrl: mainUrl + '/es_data_delete'
    });
});

How could i add html5 data attribute to every row? like "data-identfier="{row.id.from.database}"

Please help me. Regards.

[Sujith Kumar Rajkumar]

Hi Tomasz, 

 

Greetings from Syncfusion support. 

 

We could understand from the query that your requirement is to add custom attributes to each Grid row. You can achieve this by using Grid’s rowDataBound event. This event will be triggered for each row with the row element as shown in the below image, 

 

 

 

Using this you can add the required attributes to each row with the JavaScript’s setAttribute method. This is demonstrated in the below code snippet, 

 

// Grid’s rowDataBound event handler 

function onRowDataBound(args) { 

        // Custom attribute is added to the grid row element 

        args.row.setAttribute("data-identifier", "" + args.data.OrderID); 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/fwwddz?file=index.ts  

 

API link: https://ej2.syncfusion.com/documentation/api/grid/#rowdatabound  

 

JavaScript’s setAttribute method: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute  

 

If we misunderstood your query or if you require any further assistance, then please get back to us. 

 

Regards, 

Sujith R 

[Tomasz]

Works :) thanx so much :D

[Balaji Sekar]

Hi Tomasz, 

  

We glad that your issue has been fixed.  

  

Please get back to us if you require further other assistance from us. 

  

Regards, 

Balaji Sekar.