display Barcode in mvc grid

4 posts, 0 answers
  1. cwk
    cwk avatar
    31 posts
    Member since:
    Apr 2007

    Posted 09 Jul 2014 Link to this post

    Hi, I looking for an example to display a list of products information in mvc grid together with the barcode. is it possible?

    @(Html.Kendo().Grid<Example.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
    columns.Bound(c => c.ProductName).Width(140);
    columns.Bound(c => c.ProductCode).Width(190);
     <----this column should display barcode generated using Product code, ---->
    @(Html.Kendo().Barcode().Name("barcode").Value(c => c.ProductCode).Encoding(BarcodeSymbology.Code39).Width(200).Height(100))
       

    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(5))
    .DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("Products_Read", "Grid"))
    )
    )


    Regards
    cwk
  2. Rosen
    Admin
    Rosen avatar
    3247 posts

    Posted 11 Jul 2014 Link to this post

    Hello cwk,

    In order to show the Barcode widget within Grid column you will need to use the DataBound event to instantiate the Barcode widget. Similar to the following:

    @(Html.Kendo().Grid<GridBarcode.Models.Product>()
        .Name("Grid")
        .Columns(columns => {
            columns.Bound(p => p.ProductID);
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.ProductName).ClientTemplate("<span class=\"barcode\"/>");
        })
        .Pageable()
        .Events(events => events.DataBound("dataBound"))
        .DataSource(dataSource => dataSource.Ajax().Read("_Read", "Home"))
        )
     
    <script>
        function dataBound() {
            var grid = this;
     
            this.items().each(function (idx, item) {
                $(item).find(".barcode").kendoBarcode({
                    value: grid.dataItem(item).ProductName,
                    width: 250,
                    height: 80,
                    type: "code128"
                });
            });
        }
    </script>


    Regards,
    Rosen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Wenjun
    Wenjun avatar
    1 posts
    Member since:
    Aug 2016

    Posted 04 Aug in reply to Rosen Link to this post

    Hello,

    I'm trying to display barcode image for barcode type ean 13 in my grid but whenever I click on add a new record the adding function doesn't work properly. It just adds a new row with empty value for all the fileds. Please Advise. I searched everywhere, I couldn't find a sample or a solution.

     @(Html.Kendo().Grid<AssetManagementSystem.Models.Asset>()
        .Name("Asset")
        .Columns(columns =>
        {
            columns.Bound(a => a.AssetTagNo).Width(120);
            columns.ForeignKey(a => a.AssetTypeId, (System.Collections.IEnumerable)ViewData["assettypes"], "AssetTypeId", "AssetTypeName").Width(120);
            columns.Bound(a => a.Model).Width(120);
            columns.Bound(a => a.SerialNo).Width(120);
            columns.ForeignKey(a => a.StatusId, (System.Collections.IEnumerable)ViewData["statuses"], "StatusId", "StatusName").Width(120);
            columns.Bound(a => a.PurchaseDate).Width(150);
            columns.ForeignKey(a => a.SupplierId, (System.Collections.IEnumerable)ViewData["suppliers"], "SupplierId", "SupplierName").Width(120);
            columns.Bound(a => a.PurchaseOrderNo).Width(120);
            columns.Bound(a => a.PurchaseCost).Width(120);
            columns.Bound(a => a.FundSource).Width(120);
            columns.ForeignKey(a => a.SiteId, (System.Collections.IEnumerable)ViewData["sites"], "SiteId", "SiteName").Width(120);
            columns.ForeignKey(a => a.CostCenterId, (System.Collections.IEnumerable)ViewData["costcenters"], "CostCenterId", "CostCenterName").Width(120);
            columns.ForeignKey(a => a.CountryId, (System.Collections.IEnumerable)ViewData["countries"], "CountryId", "CountryName").Width(120);
            columns.ForeignKey(a => a.UserId, (System.Collections.IEnumerable)ViewData["users"], "UserId", "Username").Width(120);
            columns.ForeignKey(a => a.DepartmentId, (System.Collections.IEnumerable)ViewData["departments"], "DepartmentId", "DepartmentName").Width(120);
            columns.Bound(a => a.Remark).Width(120);
            columns.Bound(a => a.Barcode).Width(250).ClientTemplate("<span class=\"barcode\"/>");

            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(190);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
          .Events(events => events.DataBound("dataBound"))
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(a => a.AssetId))
            .Create(update => update.Action("Item_Create", "Asset"))
            .Read(read => read.Action("Item_Read", "Asset"))
            .Update(update => update.Action("Item_Update", "Asset"))
            .Destroy(update => update.Action("Item_Destroy", "Asset"))
        )
                    )
                    <script type="text/javascript">
                        function error_handler(e) {
                            if (e.errors) {
                                var message = "Errors:\n";
                                $.each(e.errors, function (key, value) {
                                    if ('errors' in value) {
                                        $.each(value.errors, function () {
                                            message += this + "\n";
                                        });
                                    }
                                });
                                alert(message);
                            }
                        }
                    </script>
                    <script>
                        function dataBound() {
                            var grid = this;

                            this.items().each(function (idx, item) {
                                $(item).find(".barcode").kendoBarcode({
                                    value: grid.dataItem(item).Barcode,
                                    width: 250,
                                    height: 80,
                                    type: "ean13"
                                });
                            });
                        }
                    </script>

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1786 posts

    Posted 08 Aug Link to this post

    Hi Wenjun,

    The EAN-13 encoding requires the value to contain 12 digits. If the length of the Barcode field is different or it contains other than numeric characters there will be an error.

    If the length of the Barcode field is various you can prepend zeroes to the value. The relevant code would look similar to the following.

    function dataBound(e) {
            var grid = this;
             
            grid.items().each(function (idx, item) {
                $(item).find(".barcode").kendoBarcode({
                    value: kendo.toString(grid.dataItem(item).Barcode, "000000000000"),
                    width: 250,
                    height: 80,
                    type: "ean13"
                });
            });
        }


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top