How to resize Barcode in script

4 posts, 0 answers
  1. Steve
    Steve avatar
    10 posts
    Member since:
    Nov 2012

    Posted 05 Jun 2017 Link to this post

    I have a Barcode that is within a partial view.  If I do not include a width and height at the beginning I get an error when rendering.

    @Html.Kendo().Barcode().Name("barcode-" + Guid.NewGuid().ToString()).Value(@Model.WidgetTagValue).Encoding(Model.barcode_symbology).Width(150).Height(150)

    I have a resize event that tries to change it to fit the size of the parent div on page init and on window resize.

    function setBarcodeSize() {
            if ($('.k-barcode').length > 0) {
                $('.k-barcode').each(function () {
                    var parentDivWidth = $(this).closest(".andon-widget-container").width() - 50;
                    var parentDivHeight = $(this).closest(".andon-widget-container").height() - $(this).closest(".andon-widget-container").find(".andon-widget-title").height();
                    $(this).css("width", $(this).width(parentDivWidth) + "px").css("height", $(this).height(parentDivHeight) + "px");
                    $(this).data("kendoBarcode").redraw();
                });
            }
        }

    The width and height of the k-barcode <div> are set appropriately but the size of the child <div> with the data-role="surface" remains at 150x150

     

    Advice?

  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    196 posts

    Posted 07 Jun 2017 Link to this post

    Hello Steve,

    You need to change the width option of the Barcode during the resizing in order to set the correct dimensions to the inner surface element as shown in the following Dojo example:

    http://dojo.telerik.com/@stamo/oCoXA

    Regards,
    Stamo Gochev
    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.
  3. Steve
    Steve avatar
    10 posts
    Member since:
    Nov 2012

    Posted 07 Jun 2017 in reply to Stamo Gochev Link to this post

    Thanks Stamo.  Where is this in the documentation? When I "Google" the phrase "kendo barcode setoption" the closest thing to documentation for this is the use of setOption in the Barcode API demo.  When this all started I referenced the documentation for the Barcode Javascript API.  Not mentioned there.

  4. Stamo Gochev
    Admin
    Stamo Gochev avatar
    196 posts

    Posted 08 Jun 2017 Link to this post

    Hello Steve,

    Indeed the setOptions method is missing from the documentation (it is available for the QRCode). We will add information for it and also update the example for the resize method, which requires changes to width and height options, when they are also defined apart from the dimensions of the container.

    Regards,
    Stamo Gochev
    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