Grouping not working with barcode column

[Ali]

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
                barcode.appendTo(barCodeElements[i]);
                i++;
            }
        }

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.

Thanks,

Ali

[Rajapandi Ravi]

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-columns>

        <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">

        </e-grid-column>

    </e-grid-columns>

</ejs-grid>

 

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

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

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

    </div>

</script>

 

 

<script>

    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);

        }

    }

</script>

 

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.

Regards,

Rajapandi R