Products

[FerrisChamp]

Thank you! This solved my problem!

[FerrisChamp]

I just figured out its an issue with all drag and drop header button options not just the grouping.

[FerrisChamp]

Hi, Yes my nuget package is up to date. The grid settings I have are below.

<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" OnBeginEdit="@OnBeginEdit" OnEndEdit="@OnEndEdit" ColumnMenu="@columnMenu" Messages="@columnMenuMessages" 
        ConditionalFormatting="@conditionalFormatting" Sorting="@sorting" Filtering="@filtering" OnColumnDragEnd="@OnColumnDragEnd" 
        OnFilter="@OnFilter" OnGroup="@OnGroup" Class="smartGrid">
    </Grid>

GridAppearance appearance = new GridAppearance() { ShowColumnGroupsInColumnPanel = true, ShowRowHeaderNumber = true, ShowColumnIcon = false, ShowColumnFilterButton = true };
        GridSelection selection = new GridSelection() { Enabled = false };
        GridBehavior behavior = new GridBehavior() { AllowColumnReorder = true, AllowColumnFreeze = true, ColumnResizeMode = GridResizeMode.GrowAndShrink };
        GridGrouping grouping = new GridGrouping() { Enabled = true, GroupIndent = 0, SummaryRow = new GridGroupingSummaryRow() { Visible = false } };
        GridLayout gridLayout = new GridLayout() { ColumnWidth = "auto", RowHeight = "auto" };
        GridSorting sorting = new GridSorting() { Enabled = true, Mode = GridSortingMode.Many };
        GridFiltering filtering = new GridFiltering() { Enabled = true };
        GridDataSourceSettings dataSourceSettings = new GridDataSourceSettings() { GroupBy = new string[] { } };
        IList<GridConditionalFormatting> conditionalFormatting = new List<GridConditionalFormatting>();

        GridHeader header = new GridHeader()
        {
            Visible = true
        };

        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 = false,
                        Label = "Notify Me"
                    },
                    CommandColumnDelete = new GridCommand()
                    {
                        //Icon = "smart-icon-star",
                        Command = "delete",
                        Visible = true,
                        Label = "Delete Asset"
                    },
                    CommandColumnEdit = new GridCommand()
                    {
                        Command = "edit",
                        Visible = false
                    }
                }
            }
        };

[FerrisChamp]

Hi, Thank you for the quick reply. Does that function work with a css border property? And can it be updated dynamically? I’m trying to show where a user is in a cell at a specific time so its constantly changing.
Thank you!

[FerrisChamp]

Hi.

Yes, I am trying to get the whole cell object. The code pen demo doesn’t seem to be working for me tho – on both the codepen website and my code.

Thank you,
Ferris

[FerrisChamp]

Nevermind, I seemed to found the solution by overriding the .smart-grid-header CSS class.

[FerrisChamp]

Hi,

Update by calling a JS function, I was able to see the updates with the conditional formatting property.

window.GetConditionalFormatting = () => {
const grid = document.getElementById(“io-page-grid”);
const format = grid.conditionalFormatting
console.log(format);
return format;

}

This is what I get:

column: “all”

condition: “equal”

firstValue: “0”

fontFamily: “Roboto, \\\”Helvetica Neue\\\”, sans-serif”

fontSize: “14px”
highlight: “#9FC5E8”

secondValue: 1

text: “#5A5A5A”

 

However, when trying to return the data to my C# code:

List<GridConditionalFormatting> formatting = await JS.InvokeAsync<List<GridConditionalFormatting>>(“GetConditionalFormatting”);

I get something different instead:

column: “all”

condition: “LessThan”

firstValue: “0”

fontFamily: “”

fontSize: “The default fontSize as set in CSS”
highlight: “The default backgroundColor as set in CSS”

secondValue: 1

text: “The default color as set in CSS”

The values of some of the properties seem to be different. Could you help me correct this issue?

Thank you,

Ferris

• This reply was modified 7 months, 1 week ago by FerrisChamp.
• This reply was modified 7 months, 1 week ago by FerrisChamp. Reason: formatting issues
• This reply was modified 7 months, 1 week ago by FerrisChamp.
• This reply was modified 7 months, 1 week ago by FerrisChamp.

[FerrisChamp]

Hi,

So I am starting off with no conditional formatting then trying to capture any conditional formatting on a button click.

var temp = grid.ConditionalFormatting;

However the grid.ConditionalFormatting property is empty (count = 0) even when I have conditional formatting applied. I am using the C# on the razor page and not JS, not sure if that makes a difference.

Thanks you,

Ferris

[FerrisChamp]

Hello,
I keep trying to send an email, but I am getting rejected by your spam filters. How can I get around that?

Thank you,

Ferris

[FerrisChamp]

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” }
}
}
};

[FerrisChamp]

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

• This reply was modified 7 months, 3 weeks ago by FerrisChamp.
• This reply was modified 7 months, 3 weeks ago by FerrisChamp.
• This reply was modified 7 months, 3 weeks ago by FerrisChamp.

[FerrisChamp]

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

[FerrisChamp]

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>

• This reply was modified 7 months, 3 weeks ago by FerrisChamp.

[FerrisChamp]

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

[Author]

Posts