We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grouping not working with barcode column

Hello, I have a grid with allowGrouping="true". I am generating barcodes for each row in a column in the dataBound event using the code

function dataBound(args) {            
            var barCodeElements = this.element.querySelectorAll('.barcode-elem');
            var i = 0;
            while (i < barCodeElements.length) {
                // Initialize barcode generator
                var barcode = new ej.barcodegenerator.BarcodeGenerator({
                    width: '180px',
                    height: '70px',
                    mode: 'SVG',
                    type: 'Code128',
                    value: this.currentViewData[i].Position,
                    label: false
                // Append the initialized barcode to the div element

However, when I group, I believe the column is getting shifted, and I get an error.

Uncaught TypeError: Cannot read properties of undefined (reading 'search')

    at t.validateInput (ej2.min.js:1:596178)

    at t.renderElements (ej2.min.js:1:635424)

    at t.render (ej2.min.js:1:636903)

    at t.appendTo (ej2.min.js:1:550634)

    at t.dataBound (ShelvingBin:698:25)

    at e.notify (ej2.min.js:1:507280)

    at e.trigger (ej2.min.js:1:535008)

    at ej2.min.js:1:6458742

    at ej2.min.js:1:326839

Help appreciated.



1 Reply

RR Rajapandi Ravi Syncfusion Team January 3, 2023 12:55 PM UTC

Hi Ali,

Greetings from Syncfusion support

Based on your query we have prepared a sample with Barcode and tried to reproduce your reported problem, but it was unsuccessful. The Grouping was applied properly for the barcode column. Please refer the below code example, sample and video demo for more information.


<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowGrouping="true" allowPdfExport="true" dataBound="bound" toolbar="@(new List<string>() { "Print", "PdfExport" })" allowPaging="true">

    <e-grid-pagesettings pageSize="7"></e-grid-pagesettings>


        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>

        <e-grid-column field="Freight" headerText="Freight" validationRules="@(new { required=true})" textAlign="Right" editType="numericedit" format="C2" width="120"></e-grid-column>

        <e-grid-column field="EmployeeID" template="#dropdown" headerText="EmployeeID" width="120"></e-grid-column>

        <e-grid-column field="CustomerID" headerText="CustomerName" textAlign="Right" width="120"></e-grid-column>

        <e-grid-column field="OrderDate" headerText="Date" width="150" format="yMd">





<script type="text/x-jsrender" id="dropdown">

    <div id="container" class="barcodeStyle">

        <div id="combo${OrderID}"></div>






    var image = [];

    var imgStrings = [];

    var barcode;


    function bound() { //dataBound event of Grid

        var currentviewdata = this.currentViewData; //get currentviewdata

        for (var i = 0; i < currentviewdata.length; i++) {

            barcode = new ej.barcodegenerator.BarcodeGenerator(


                    width: '200px',

                    height: '150px',

                    mode: 'SVG',

                    type: 'Code39Extension',

                    value: currentviewdata[i].EmployeeID,



            barcode.appendTo("#combo" + currentviewdata[i].OrderID);





Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/barcode-356230436.zip

Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vdbarcode415955264.zip

If you still face the issue, please share any issue reproducible sample or try to reproduce the issue with our above attached sample.


Rajapandi R

Live Chat Icon For mobile
Up arrow icon