Refresh grid on demand | Infragistics Forums

175

Refresh grid on demand

Andrew Wigglesworth posted 4 months ago

Hi There,

We are using a sidebar layout from bootstrap 5 in our asp.net core web app. What i'm trying to do is that when the sidebar closes, if a igGrid is present i would like it to redraw the grid, to adjust the columns sizes to match the new container width. Right now when we collapse the sidebar it leaves an empty space at the end of the last column.

Here is a sample of 1 of my grids: :

@(
Html.Infragistics()
.Grid(Model.ClientList)
.ID("grid")
.Width("100%")
.Height("800px")
.PrimaryKey("ClientId")
.Caption("Clients")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.Columns(column =>
{
column.For(x => x.ClientId).HeaderText("Client Id").Width("*");
column.For(x => x.Name).HeaderText("Client Name").Width("*");
column.For(x => x.City).HeaderText("City").Width("*");
column.For(x => x.State).HeaderText("State").Width("*");
column.For(x => x.EntryPoint).HeaderText("Entry Point").Width("*");
column.Unbound("PortalUrl").Template("<a href='new.nexbillpay.net/${EntryPoint}' target='_blank'>Preview</a>").HeaderText("Preview").Width("*");
column.Unbound("Details").Template("<a href='/Clients/Details?clientId=${ClientId}'>Details</a>").HeaderText("Details").Width("*");
column.Unbound("CustomerLookup").Template("<a href='/UtilityAdmin/ClientCustomerLookup?clientId=${ClientId}&clientName=${Name}'>Customers</a>").HeaderText("Customers").Width("*");
column.Unbound("Import").Template("<a href='/Clients/Import?clientId=${ClientId}'>Import</a>").HeaderText("Import").Width("*");
column.Unbound("Messages").Template("<a href='/Clients/Messages?clientId=${ClientId}'>Messages</a>").HeaderText("Messages").Width("*");
column.Unbound("Reports").Template("<a href='/Reports/AdminReports?clientId=${ClientId}'>Reports</a>").HeaderText("Reports").Width("*");
column.Unbound("Users").Template("<a href='/Users/Index?clientId=${ClientId}&clientName=${Name}'>Users</a>").HeaderText("Users").Width("*");
})
.Features(features =>
{
features.Sorting().Type(OpType.Local).ColumnSettings(setting =>
{
setting.ColumnSetting().ColumnKey("Details").AllowSorting(false);
setting.ColumnSetting().ColumnKey("CustomerLookup").AllowSorting(false);
setting.ColumnSetting().ColumnKey("Import").AllowSorting(false);
setting.ColumnSetting().ColumnKey("Messages").AllowSorting(false);
setting.ColumnSetting().ColumnKey("Reports").AllowSorting(false);
setting.ColumnSetting().ColumnKey("Users").AllowSorting(false);
setting.ColumnSetting().ColumnKey("PortalUrl").AllowSorting(false);
}
);
features.Paging().Type(OpType.Local);
features.Filtering().Type(OpType.Local).ColumnSettings(setting =>
{
setting.ColumnSetting().ColumnKey("Details").AllowFiltering(false);
setting.ColumnSetting().ColumnKey("CustomerLookup").AllowFiltering(false);
setting.ColumnSetting().ColumnKey("Import").AllowFiltering(false);
setting.ColumnSetting().ColumnKey("Messages").AllowFiltering(false);
setting.ColumnSetting().ColumnKey("Reports").AllowFiltering(false);
setting.ColumnSetting().ColumnKey("Users").AllowFiltering(false);
setting.ColumnSetting().ColumnKey("PortalUrl").AllowFiltering(false);
}
);
})
.DataBind()
.Render()
)

This is how it renders with the sidebar menu open: (looks good)

and when we close the sidebar: (large empty space at the end)

My question is, is there a client side event i can fire via javascript to get it to redraw the grid? I've tried firing dataBind but it doesn't redraw the grid.

140

Offline Arkan Ahmedov posted 4 months ago

Hello Andrew,

After reviewing your requirements for dynamically adjusting the Grid’s column widths when the sidebar is toggled, I have a solution that should meet your needs effectively.

To ensure that the grid recalculates its width and adjusts the columns based on the available space, I recommend calling the autoSizeColumns method. This method automatically resizes columns that have their width property set to "*", ensuring that the content is auto-fitted appropriately without being shrunk or cut off. Auto-resizing is applied only to visible columns, ensuring an optimal layout based on the current viewport.

<script>
    $(document).ready(function () { 
        // Sidebar toggle event (example)
        $("#sidebarToggle").on('click', function () {
            $("#wrapper").toggleClass("toggled");
            resizeGrid();
        });
        // Window resize event (example)
        $(window).on('resize', function () {
            resizeGrid();
        });

        function resizeGrid() {
            $("#grid").igGrid("autoSizeColumns");
        }
    })
</script>

I have implemented this solution and am attaching the index.cshtml file for your review and testing. Below is a brief explanation:

Sidebar Toggle Event: Added an event listener for the sidebar toggle button to trigger the grid resizing.
Window Resize Event: Added an event listener for window resize events to ensure the grid adjusts dynamically.
Resize Function: The resizeGrid function calls the autoSizeColumns method to recalculate and adjust the grid columns.

Please find the attached index.cshtml file. Feel free to test it and let me know if there are any additional questions or further adjustments needed.

Thank you for your time, and I look forward to your feedback.

Best Regards,

Arkan Ahmedov,

Infragistics

index.txt

@using Infragistics.Web.Mvc
@using GridReRender.Models
@model IQueryable<Client>
@{
    ViewData["Title"] = "Home Page";
}
<html>
<head>
    <link href="~/css/themes/infragistics/infragistics.theme.css"
          rel="stylesheet"
          id="theme" />
    <link href="~/css/structure/infragistics.css"
          rel="stylesheet" />

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="~/js/infragistics.core.js"></script>
    <script src="~/js/infragistics.dv.js"></script>
    <script src="~/js/infragistics.lob.js"></script>
    @* <script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js" asp-append-version="true"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" asp-append-version="true"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" asp-append-version="true"></script>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!--CSS file specific for chart styling -->
    <link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script> *@

    <style>
        #wrapper.toggled #sidebar-wrapper {
            margin-left: -250px;
        }

        #page-content-wrapper {
            width: 100%;
        }

        #wrapper.toggled #page-content-wrapper {
            margin-left: 0;
        }
    </style>
</head>
<body id="body-pd">
    <div class="d-flex" id="wrapper">
        <!-- Sidebar -->
        <div class="border-end bg-light" id="sidebar-wrapper">
            <div class="sidebar-heading border-bottom bg-light">Start Bootstrap</div>
            <div class="list-group list-group-flush">
                <a href="#" class="list-group-item list-group-item-action list-group-item-light p-3">Dashboard</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light p-3">Shortcuts</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light p-3">Overview</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light p-3">Events</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light p-3">Profile</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light p-3">Status</a>
            </div>
        </div>
        <!-- /#sidebar-wrapper -->
        <!-- Page Content -->
        <div id="page-content-wrapper">
            <button class="btn btn-primary" id="sidebarToggle">Toggle Sidebar</button>
            <div class="container-fluid">
                <h1 class="mt-4">Simple Sidebar</h1>
                <div>
                    @(Html.Infragistics()
                        .Grid(Model)
                        .ID("grid")
                        .Width("100%")
                        .Height("800px")
                        .PrimaryKey("ClientId")
                        .Caption("Clients")
                        .AutoGenerateColumns(false)
                        .AutoGenerateLayouts(false)
                        .Columns(column =>
                        {
                            column.For(x => x.ClientId).HeaderText("Client Id").Width("*");
                            column.For(x => x.Name).HeaderText("Client Name").Width("*");
                            column.For(x => x.City).HeaderText("City").Width("*");
                            column.For(x => x.State).HeaderText("State").Width("*");
                            column.For(x => x.EntryPoint).HeaderText("Entry Point").Width("*");
                            column.Unbound("PortalUrl").Template("<a href='new.nexbillpay.net/${EntryPoint}' target='_blank'>Preview</a>").HeaderText("Preview").Width("*");
                            column.Unbound("Details").Template("<a href='/Clients/Details?clientId=${ClientId}'>Details</a>").HeaderText("Details").Width("*");
                            column.Unbound("CustomerLookup").Template("<a href='/UtilityAdmin/ClientCustomerLookup?clientId=${ClientId}&clientName=${Name}'>Customers</a>").HeaderText("Customers").Width("*");
                            column.Unbound("Import").Template("<a href='/Clients/Import?clientId={ClientId}'>Import</a>").HeaderText("Import").Width("*");
                            column.Unbound("Messages").Template("<a href='/Clients/Messages?clientId=${ClientId}'>Messages</a>").HeaderText("Messages").Width("*");
                            column.Unbound("Reports").Template("<a href='/Reports/AdminReports?clientId=${ClientId}'>Reports</a>").HeaderText("Reports").Width("*");
                            column.Unbound("Users").Template("<a href='/Users/Index?clientId=${ClientId}&clientName=${Name}'>Users</a>").HeaderText("Users").Width("*");
                        })
                        .Features(features =>
                        {
                            features.Sorting().Type(OpType.Local).ColumnSettings(setting =>
                            {
                                setting.ColumnSetting().ColumnKey("Details").AllowSorting(false);
                                setting.ColumnSetting().ColumnKey("CustomerLookup").AllowSorting(false);
                                setting.ColumnSetting().ColumnKey("Import").AllowSorting(false);
                                setting.ColumnSetting().ColumnKey("Messages").AllowSorting(false);
                                setting.ColumnSetting().ColumnKey("Reports").AllowSorting(false);
                                setting.ColumnSetting().ColumnKey("Users").AllowSorting(false);
                                setting.ColumnSetting().ColumnKey("PortalUrl").AllowSorting(false);
                            });
                            features.Paging().Type(OpType.Local);
                            features.Filtering().Type(OpType.Local).ColumnSettings(setting =>
                            {
                                setting.ColumnSetting().ColumnKey("Details").AllowFiltering(false);
                                setting.ColumnSetting().ColumnKey("CustomerLookup").AllowFiltering(false);
                                setting.ColumnSetting().ColumnKey("Import").AllowFiltering(false);
                                setting.ColumnSetting().ColumnKey("Messages").AllowFiltering(false);
                                setting.ColumnSetting().ColumnKey("Reports").AllowFiltering(false);
                                setting.ColumnSetting().ColumnKey("Users").AllowFiltering(false);
                                setting.ColumnSetting().ColumnKey("PortalUrl").AllowFiltering(false);
                            });
                        })
                        .DataBind()
                        .AutofitLastColumn(true)
                        .Render()
                        )
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->
    </div>

    <script>
        $(document).ready(function () { 
            // Sidebar toggle event (example)
            $("#sidebarToggle").on('click', function () {
                $("#wrapper").toggleClass("toggled");
                resizeGrid();
            });
            // Window resize event (example)
            $(window).on('resize', function () {
                resizeGrid();
            });

            function resizeGrid() {
                $("#grid").igGrid("autoSizeColumns");
            }
        })
    </script>
</body>

</html>