Category / Section
How to add barcode data-extension for Web Report Designer
1 min read
We need to add the barcode data extension to show the barcode item in our standalone Report Designer application.
Find the below step for how to add the barcode data extension in our standalone angular JS application.
1.Add the below attached barcode standalone sample in our application.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BarcodeExtension_-1927834608.zip
2.Add the extension in your application web.config file as shown in below code example.
<configuration> <configSections> <section name="ReportingExtensions" type="Syncfusion.Reporting.Extensions, syncfusion.EJ.ReportViewer" allowLocation="true" allowDefinition="Everywhere" /> </configSections> <ReportingExtensions> <ReportItems> <ReportItem Name="Barcode" Assembly="Syncfusion.Extensions.BarcodeCRI" Type="Syncfusion.Extensions.BarcodeCRI.BarcodeCustomReportItem" /> </ReportItems> </ReportingExtensions> </configuration>
3.Add the reportItemExtension property in default.html page as shown in below code example.
<link href="Scripts/extension/barcode.reportitem.css" rel="stylesheet" />
<script src="Scripts/extension/barcode.reportitem.js"></script>
</head>
<body >
<div ng-controller="ReportController">
<div ng-if="report">
<div id="container" ej-reportdesigner="ej-reportdesigner" e-toolbarsettings="toolbarsettings"
e-ajaxbeforeload="ajaxbeforeload"
e-reportitemextensions="reportItemExtensions"
e-serviceurl="samplevalue" style="position: absolute;height:500px;width:100%"></div>
</div>
</div>
<script type="text/javascript">
angular.module('syncApp', ['ejangular']).controller('ReportController', function ($scope) {
$scope.report = true;
$scope.samplevalue = '../../api/ReportingAPI';
$scope.ajaxbeforeload = "ajaxBeforeLoad";
$scope.reportItemExtensions = [{
name: 'barcode',
className: 'EJBarcode',
imageClass: 'customitem-barcode',
displayName: 'Barcode',
category: 'Data Patterns'
}];
Output snap:
