display Barcode in mvc grid

2 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?

    .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;" })
    .Pageable(pageable => pageable
    .DataSource(dataSource => dataSource
    .Read(read => read.Action("Products_Read", "Grid"))

  2. Rosen
    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:

        .Columns(columns => {
            columns.Bound(p => p.ProductID);
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.ProductName).ClientTemplate("<span class=\"barcode\"/>");
        .Events(events => events.DataBound("dataBound"))
        .DataSource(dataSource => dataSource.Ajax().Read("_Read", "Home"))
        function dataBound() {
            var grid = this;
            this.items().each(function (idx, item) {
                    value: grid.dataItem(item).ProductName,
                    width: 250,
                    height: 80,
                    type: "code128"


    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.

Back to Top