New to Kendo UI for jQuery? Download free 30-day trial

Show Grid Column Width while Resizing

Environment

Product Progress Kendo UI Grid
Created with Version 2018.2.620

Description

I need a excel specification in our grid. When I am dragging the column it should show the scaling option of the grid column width - what is the current width of the dragged column.

Solution

  1. Add a handler to the grid dataBound event only once with the one() method to avoid performance issues
  2. Set the grid to autoBind false
  3. Get the resizable widget instance and hook a handler function to the resize event and the resizeend event
  4. In the function, show some styled HTML element, dynamically updating its position based on the width of the column
  5. Make the data source read to force its data bound event

        function notifyWidth(e){
          var th = $(e.currentTarget).data("th");
          var width = th.width();
          var left = $("#" + th.attr("id")).offset().left + width + 20;
          var top = $("#" + th.attr("id")).offset().top - 30;
          $("#notification").css({
            left: left,
            top:top
          }).text("Width: " + width + "px").show();
        } 
    
        grid.one("dataBound",function(e){
          this.resizable.bind("resize", function(e){
            notifyWidth(e);
          });
          this.resizable.bind("resizeend", function(e){
            $("#notification").fadeOut(700);
          });
        });
    
        grid.dataSource.read();
    
    <h1>Resize any column to see column width</h1>
    <br /><br /><br />
    <div id="grid"></div>
    <div id="notification"></div>
    <style>
      #notification {
        position:absolute;
        border-radius: 5px;
        border-color:#d4e0f4;
        background-color: #d9e5f9;
        padding:5px;
        display:none;
      }
    </style>
    <script>
      function notifyWidth(e){
        var th = $(e.currentTarget).data("th");
        var width = th.width();
        var left = $("#" + th.attr("id")).offset().left + width + 20;
        var top = $("#" + th.attr("id")).offset().top - 30;
        $("#notification").css({
          left: left,
          top:top
        }).text("Width: " + width + "px").show();
      }

      var grid = $("#grid").kendoGrid({
        autoBind:false,
        columns: [ "id",
                  { field: "name" },
                  { field: "age" }
                 ],
        selectable:true,
        dataSource: [
          { id:1,name: "Jane Doe", age: 30 },
          { id:2, name: "John Doe", age: 33 }
        ],
        resizable: true,
        sortable:true
      }).data("kendoGrid");

      grid.one("dataBound",function(e){
        this.resizable.bind("resize", function(e){
          notifyWidth(e);
        });
        this.resizable.bind("resizeend", function(e){
          $("#notification").fadeOut(700);
        });
      });

      grid.dataSource.read();

    </script>
In this article
Not finding the help you need? Improve this article