display Barcode in mvc grid

[cwk]

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

[Rosen]

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

 

 

[Wenjun]

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>

[Viktor Tachev]

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