Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #108682
    FerrisChamp
    Participant

    I am trying to re-render my grid. I used both grid.Refresh(); and grid.Render();  but neither seem to be working. Is there something else I am supposed to do to re-render the grid?

     

    #108683
    FerrisChamp
    Participant

    Alternatively is there a way to freeze/unfreeze columns dynamically without refreshing the grid?

    #108686

    Hi,

    What are you trying to achieve and face problems with the re-rendering?
    To freeze and unfreeze a column, you can use the setColumnProperty.

    Example:
    const grid = document.querySelector(‘smart-grid’);
    grid.setColumnProperty(“firstName”,”freeze”,true);

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #108706
    FerrisChamp
    Participant

    Hi,

    I am trying to freeze/unfreeze columns dynamically. My issue is that all my columns are in groups from what I test you can’t seem to freeze a column in a group unless you freeze the entire group.  My idea was to temporary create a “Frozen” group for all the items need to be frozen. However, the html doesn’t seem to be running again when I call grid.Render() thus I can’t refresh the grid to show the updated frozen columns. I put a break point in the html but it doesn’t hit it even when grid.Render() or grid.Refresh() is called.

    <Columns>

    @foreach (var column in Document.DocumentFields)
    {
    if(frozenColumns.Contains(column.FieldName))
    {
    <Column DataField=”@column.FieldName” Label=”@column.AliasName” ColumnGroup=”Frozen” Freeze=”near”
    ValidationRules=”@column.DataType.ValidationRules” DataType=”@column.DataType.GetSmartType()” Width=”100″>
    </Column>
    }
    else
    {
    <Column DataField=”@column.FieldName” Label=”@column.AliasName” ColumnGroup=”@column.GroupName”
    ValidationRules=”@column.DataType.ValidationRules” DataType=”@column.DataType.GetSmartType()” Width=”100″>
    </Column>
    }
    }
    </Columns>

    #108709

    Hi,

    Could you try setting the columns via the Columns property, not with the HTML?
    Please, see this example to see how:
    https://www.htmlelements.com/blazor/blazor-ui/demos/blazor-grid?id=dynamic-columns

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #108711
    FerrisChamp
    Participant

    Hi,

    Thanks to that I was able to solve my problem mostly. However now, when I try to unfreeze a column, the header unfreezes but the cells remain frozen until I freeze a new column.

    Thank you,
    Ferris

    #108713

    Hi,

    May you share your component?
    The following function correctly freezes and unfreezes the column:
    private void handleClick()
    {
    gridColumns[0].Freeze = gridColumns[0].Freeze == “near” ? “false” : “near”;
    }

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #108717
    FerrisChamp
    Participant

    This is how I am freezing and unfreezing the columns. I also tried to attach an image of my issue, but I am not sure it attached properly.

    GridColumn column = columns.SingleOrDefault(x => x.DataField.Equals(columnName));
    column.ColumnGroup = “Frozen”;
    column.Freeze = “near”;

     

    GridColumn column = columns.SingleOrDefault(x => x.DataField.Equals(frozenColumn));
    column.ColumnGroup = fieldToGroup[frozenColumn];
    column.Freeze = “false”;

    https://drive.google.com/file/d/15STQmJUqb2pj89Qd1hBnXODfEm28IYA-/view?usp=sharing

    Frozen Cells

    #108725
    ivanpeevski
    Participant

    Hi Ferris,

    Can you please make sure you are using the latest version of Smart.Blazor? If yes, please also share all properties you have set to the Grid.

    In the example below you can see that the code you shared should be working correctly:

    @page “/”

    <Grid @ref=”grid” DataSource=”@Clients” ColumnGroups=”@columnGroups”>
    <Columns>
    <Column DataField=”Name” Label=”Client Name” ColumnGroup=”Details”></Column>
    <Column DataField=”Balance” Label=”Acccount Balance” DataType=”number”
    ColumnGroup=”Details”></Column>
    <Column @ref=”cityColumn” DataField=”City” Label=”City” ColumnGroup=”Address”></Column>
    <Column DataField=”Country” Label=”Country”
    ColumnGroup=”Address”></Column>
    <Column DataField=”LastOrder” Label=”Last Order” DataType=”date” CellsFormat=”dd/MM/yyyy”
    Align=”HorizontalAlignment.Center”></Column>
    </Columns>
    </Grid>

    <Button OnClick=”FreezeColumn”>Freeze City</Button>
    <Button OnClick=”UnfreezeColumn”>Unfreeze City</Button>

    @code{
    Grid grid;
    Column cityColumn;

    private void FreezeColumn()
    {
    cityColumn.ColumnGroup = “Frozen”;
    cityColumn.Freeze = “near”;
    }

    private void UnfreezeColumn()
    {
    cityColumn.ColumnGroup = “Address”;
    cityColumn.Freeze = “false”;
    }

    class Client
    {
    public string Name { get; set; }
    public double Balance { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public DateTime LastOrder { get; set; }

    public Client(string name, double balance, string city, string country, DateTime lastOrder)
    {
    Name = name;
    Balance = balance;
    City = city;
    Country = country;
    LastOrder = lastOrder;
    }
    }
    Client[] Clients = new Client[]
    {
    new Client(“Maria Anders”,130.00,”Berlin”, “Germany”, DateTime.Now),
    new Client(“Ana Trujillo”,230,”Mxico D.F.”, “Mexico”, DateTime.Now),
    new Client(“Antonio Moreno”,-3500,”Mxico D.F.”, “Mexico”, DateTime.Now),
    new Client(“Thomas Hardy”,55,”London”, “UK”, DateTime.Now),
    };

    List<GridColumnGroup> columnGroups = new List<GridColumnGroup>()
    {
    new GridColumnGroup()
    {
    Label = “Customer Details”,
    Align = HorizontalAlignment.Center,
    Name = “Details”
    },
    new GridColumnGroup()
    {
    Label = “Customer Address”,
    Align = HorizontalAlignment.Center,
    Name = “Address”
    },
    new GridColumnGroup()
    {
    Label = “Frozen”,
    Align = HorizontalAlignment.Center,
    Name = “Frozen”
    }
    };
    }

     

     

    Best Regards,
    Ivan Peevski

    Smart UI Team
    https://www.htmlelements.com/

    #108737
    FerrisChamp
    Participant

    Hi,

    I updated to the latest version, but it still wasn’t working. However, I ended up getting it to work by calling

    grid.StateHasChanged();
    await Task.Delay(1);
    grid.Render();

     

    These are my grid properties just in case.  Thank you so much for your help!

    <Grid @ref=”grid” id=”io-page-grid” DataSource=”@expandoAssets” Appearance=”@appearance” Selection=”@selection” Header=”@header”
    Grouping=”@grouping” ColumnGroups=”@columnGroups” Behavior=”@behavior” OnCommand=”@OnCommand” Columns=”columns” Layout=”@gridLayout”
    Editing=”@editing” OnEndEdit=”@EditRow” OnRowRemoved=”@RemoveRow” ColumnMenu=”@columnMenu” Messages=”@columnMenuMessages”>
    </Grid>

     

    GridAppearance appearance = new GridAppearance() { ShowColumnGroupsInColumnPanel = true, ShowRowHeaderNumber = true, ShowColumnIcon = true };
    GridSelection selection = new GridSelection() { Enabled = false };
    GridBehavior behavior = new GridBehavior() { AllowColumnReorder = true, AllowColumnFreeze = true };
    GridGrouping grouping = new GridGrouping() { Enabled = true, GroupIndent = 0, SummaryRow = new GridGroupingSummaryRow() { Visible = false } };
    GridHeader header = new GridHeader() { Visible = true, Buttons = new string[] { “search”, “format” } };
    GridLayout gridLayout = new GridLayout() { ColumnWidth = “auto”, RowHeight = “auto” };

    GridEditing editing = new GridEditing()
    {
    Enabled = true,
    Mode = GridEditingMode.Cell,
    CommandColumn = new GridEditingCommandColumn()
    {
    Visible = true,
    DataSource = new GridEditingCommandColumnDataSource()
    {
    CommandColumnCustom = new GridCommand()
    {
    Icon = “smart-icon-star”,
    Command = “notify”,
    Visible = true,
    Label = “Notify Me”
    }
    }
    }
    };

    GridColumnMenu columnMenu = new GridColumnMenu()
    {
    Enabled = true,
    DataSource = new GridColumnMenuDataSource()
    {
    ColumnMenuCustomizeType = new GridCommand() { Visible = true },
    ColumnMenuItemHide = new GridCommand() { Visible = true },
    ColumnMenuItemDelete = new GridCommand() { Visible = true },
    ColumnMenuItemGroupBy = new GridCommand() { Visible = false }
    }
    };

    Dictionary<string, object> columnMenuMessages = new()
    {
    {
    “en”, new Dictionary<string, object>()
    {
    {“columnMenuCustomizeType”, “Edit Column” },
    {“columnMenuItemHide”, “Option B” },
    {“columnMenuItemDelete”, “Option C” }
    }
    }
    };

    #108739

    Hi,

    Thank you for the update, if you have any additional questions, do not hesitate to contact us!

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.