Call autoSizeColumn once flexgrid render complete

Posted by: 1728884346 on 30 October 2018, 9:56 pm EST

    • Post Options:
    • Link

    Posted 30 October 2018, 9:56 pm EST

    Hi,

    how to know the flexgrid is render complete?

    because i want to call autoSizeColumn function after flexgrid render complete.

    any idea how to add handle to individual grid, then once individual grid render complete, then immediate autoSizeColumn?

  • Posted 30 October 2018, 11:09 pm EST

    what i what to achieve is auto size column once data loaded (html render), and for individual FlexGrid, i can define whether auto size column or follow the column width attribute.

  • Posted 31 October 2018, 10:51 pm EST

    Hi,

    You may handle OnClientUpdatingLayout event. This event gets triggered as the view change for FlexGrid.

    Please refer to the following code snippet:

    <script>
        var isLoad = true;
        function updateView(s, e) {
            if (isLoad) { // avoid recurrsive calling
                isLoad = false;
                s.autoSizeColumns();
            }
        }
        function format(panel, r, c, cell) {
            if (panel.cellType == 1) {
                cell.innerHTML= "<p style='width:500px;'>"+cell.innerText+"</p>"
            }
        }
    </script>
    @(Html.C1().FlexGrid()
            .Id("gridB")
            .AllowSorting(false)
            .Filterable()
            .Bind(b => b.DisableServerRead(true).Bind(Model))
            .AutoGenerateColumns(false)
            .IsReadOnly(true)
            .Columns(bl =>
            {
                bl.Add(cb => cb.Binding("Hired").Format("u").Header("Universal Format"));
                bl.Add(cb => cb.Binding("Hired").Format("G").Header("General Format"));
                bl.Add(cb => cb.Binding("Hired").Format("F").Header("Full Date Time Format"));
                bl.Add(cb => cb.Binding("Hired").Format("d").Header("Full Date Time Format"));
            })
            .ItemFormatter("format")
            .OnClientUpdatedView("updateView")
    )
    

    Hope it helps!

    ~Manish

  • Posted 3 November 2018, 9:20 pm EST

    thanks Manish, may i check with you how about addHandler to updatedLayout function? is’t same approach? any different between OnClientUpdatedView and updatedLayout?

  • Posted 7 November 2018, 10:28 pm EST

    Hi,

    The updated view event occurs when the grid finishes creating/updating the elements that make up the current view.

    The grid updates the view in response to several actions, including:

    1.refreshing the grid or its data source,

    2.adding, removing, or changing rows or columns,

    3, resizing or scrolling the grid,

    4. changing the selection.

    use t

    The Updatedlayout gets called after grid has updated its internal layout . You can add the handler for Updated layout in the same way .

    <script>
        var isLoad = true;
        function updateLayout(s, e) {
            if (isLoad) { // avoid recurrsive calling
                isLoad = false;
                s.autoSizeColumns();
            }
        }
        function format(panel, r, c, cell) {
            if (panel.cellType == 1) {
                cell.innerHTML= "<p style='width:500px;'>"+cell.innerText+"</p>"
            }
        }
    </script>
    @(Html.C1().FlexGrid()
            .Id("gridB")
            .AllowSorting(false)
            .Filterable()
            .Bind(b => b.DisableServerRead(true).Bind(Model))
            .AutoGenerateColumns(false)
            .IsReadOnly(true)
            .Columns(bl =>
            {
                bl.Add(cb => cb.Binding("Hired").Format("u").Header("Universal Format"));
                bl.Add(cb => cb.Binding("Hired").Format("G").Header("General Format"));
                bl.Add(cb => cb.Binding("Hired").Format("F").Header("Full Date Time Format"));
                bl.Add(cb => cb.Binding("Hired").Format("d").Header("Full Date Time Format"));
            })
            .ItemFormatter("format")
            .OnClientUpdatedLayout("updateLayout")
    )
    
    
  • Posted 12 November 2018, 3:09 am EST

    thank you very much, i already implement to addHandler to updatedLayout.

  • Posted 12 November 2018, 4:43 pm EST

    sorry, for what i’m see, may i check with you, is autoSizeColumn will cause little performance issue if Flexgrid has lots record? any idea to avoid?

  • Posted 13 November 2018, 6:27 pm EST

    Hi,

    Yes, there will be performance issues if a large number of cells are present, This is because it will calculate every cell’s width/height.

    There are some performance improvements which you can make by avoiding some common pitfalls.

    1. Instead of calling autoSizeColumns(which auto size every column), use autoSizeColumn to resize only the columns which need resizing.

    Identify which are the columns that actually need resizing. Sometimes columns with types like ‘Date’, ‘Checkbox’… are used which rarely needs resizing. A formatted date column would have the same text width throughout the rows. So you can calculate the width once and apply it.

    1. Use deferUpdate method. The deferUpdate method ensures that FlexGrid will not refresh until all its included operations have been applied. So your new updateLayout method would look something like this:
    
        function updateLayout(s, e) {
            if (isLoad) {
                isLoad = false;
                s.deferUpdate(function(){
                            s.autoSizeColumn(1);
                            s.autoSizeColumn(3);
                            s.autoSizeColumn(4);
                });
            }
        }
    
    
    1. If you are using autoSizeXXXX methods on a grid with a large number of rows, try implementing Paging in your grid.

    https://demos.componentone.com/ASPNET/MVCExplorer/FlexGrid/Paging

    Let me know if you face more performance issues.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels