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?

    @(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
    3234 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. UI for ASP.NET MVC is VS 2017 Ready
Back to Top