Products

[Yavor Dashev]

Hi TurricanDE,

When you set GridColumn newColumn = new GridColumn(){ Label = columnsList[i], DataField = columnsList[i], SortOrder = GridColumnSortOrder.Desc }; it only sorts the cells intially when they are loaded, however if you want to have the Sorting and Filtering functionalities I have modified the code example from my previous reply:

    <Grid DataSourceSettings="DataSettings" @ref="grid" DataSource="dataRecords" Columns="@columns"  Sorting="@sorting" Filtering="@filtering"></Grid>

        <div class="options">
            <div class="caption">Settings</div>
            <div class="option">
                <Button Disabled="@addColumnBtnDisabled" OnClick="AddColumn">Add Column</Button>
            </div>
            <div class="option">
                <Button Disabled="@removeLastColumnBtnDisabled" OnClick="RemoveLastColumn">Remove Last Column</Button>
            </div>
            <div class="option">
                <Button Disabled="@removeFirstColumnBtnDisabled" OnClick="RemoveFirstColumn">Remove First Column</Button>
            </div>
            <div class="option">
                <Button Disabled="@updateFirstColumnBtnDisabled" OnClick="UpdateFirstColumn">Update First Column Header</Button>
            </div>
        </div>
    }
</Example>

@code {
    Grid grid;
    GridSorting sorting = new GridSorting()
    {
        Enabled = true,
        Mode = GridSortingMode.Many
    };
    GridFiltering filtering = new GridFiltering()
    {
        Enabled = true,
    };
    GridDataSourceSettings DataSettings = new GridDataSourceSettings()
    {   
        DataFields = new List<GridDataSourceSettingsDataField>()
            {
            new GridDataSourceSettingsDataField()
            {
                Name = "Id",
                DataType = GridDataSourceSettingsDataFieldDataType.Number
            },
              new GridDataSourceSettingsDataField()
            {
                Name = "Area",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
                new GridDataSourceSettingsDataField()
            {
                Name = "Population_Urban",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
                new GridDataSourceSettingsDataField()
            {
                Name = "Population_Rural",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
                new GridDataSourceSettingsDataField()
            {
                Name = "Population_Total",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
                new GridDataSourceSettingsDataField()
            {
                Name = "GDP_Agriculture",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
            new GridDataSourceSettingsDataField()
            {
                Name = "GDP_Industry",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
             new GridDataSourceSettingsDataField()
            {
                Name = "GDP_Services",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            }, 
            new GridDataSourceSettingsDataField()
            {
                Name = "GDP_Total",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            }

        }
    }; 
    bool addColumnBtnDisabled;
    bool removeLastColumnBtnDisabled;
    bool removeFirstColumnBtnDisabled;
    bool updateFirstColumnBtnDisabled;

    List<GridColumn> columns = new List<GridColumn>()
{
        new GridColumn()
        {
            DataField = "Country",
            Label = "Country",

        },
        new GridColumn()
        {
            DataField = "Area",
            Label = "Area"
        },
        new GridColumn()
        {
            DataField = "Population_Rural",
            Label = "Population_Rural"
        },
        new GridColumn()
        {
            DataField = "Population_Total",
            Label = "Population_Total"
        },
        new GridColumn()
        {
            DataField = "GDP_Total",
            Label = "GDP_Total"
        }
    };

    private List<CountryRecord> dataRecords;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        dataRecords = dataService.GenerateCountriesData();
    }

    private string[] columnsList = new string[]
    {
            "Id",
            "Country",
            "Area",
            "Population_Urban",
            "Population_Rural",
            "Population_Total",
            "GDP_Agriculture",
            "GDP_Industry",
            "GDP_Services",
            "GDP_Total"
    };

For your other question I will further investigate this behavior.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi tullio0106@live.it,

For this scenario when you have a large number of characters in your tooltip as a solution it will be best to set a width to the tooltip which when I tested the tooltip seems like the most viable solution.
You can set the width of the tooltip using CSS: 
 

smart-tooltip{        
    width: 50%;    
}

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi TurricanDE,

I have found the source of the issue and also modified the code example so that it shows the cells populated with data.
In your razor file:

<Example Name="Grid">
    <p>
        Grid Column CRUD example.Grid Columns can be added, updated or deleted the same way you work with basic Javascript Arrays.
        Here, we demonstrate how to use the Smart Grid API to update, remove the first or last column and add a new column,
    </p>

    @if (dataRecords == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <Grid DataSourceSettings="DataSettings" @ref="grid" DataSource="dataRecords" Columns="@columns"></Grid>

        <div class="options">
            <div class="caption">Settings</div>
            <div class="option">
                <Button Disabled="@addColumnBtnDisabled" OnClick="AddColumn">Add Column</Button>
            </div>
            <div class="option">
                <Button Disabled="@removeLastColumnBtnDisabled" OnClick="RemoveLastColumn">Remove Last Column</Button>
            </div>
            <div class="option">
                <Button Disabled="@removeFirstColumnBtnDisabled" OnClick="RemoveFirstColumn">Remove First Column</Button>
            </div>
            <div class="option">
                <Button Disabled="@updateFirstColumnBtnDisabled" OnClick="UpdateFirstColumn">Update First Column Header</Button>
            </div>
        </div>
    }
</Example>

@code {
    Grid grid;

    GridDataSourceSettings DataSettings = new GridDataSourceSettings()
    {   
        DataFields = new List<GridDataSourceSettingsDataField>()
            {
            new GridDataSourceSettingsDataField()
            {
                Name = "Id",
                DataType = GridDataSourceSettingsDataFieldDataType.Number
            },
              new GridDataSourceSettingsDataField()
            {
                Name = "Area",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
                new GridDataSourceSettingsDataField()
            {
                Name = "Population_Urban",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
                new GridDataSourceSettingsDataField()
            {
                Name = "Population_Rural",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
                new GridDataSourceSettingsDataField()
            {
                Name = "Population_Total",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
                new GridDataSourceSettingsDataField()
            {
                Name = "GDP_Agriculture",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
            new GridDataSourceSettingsDataField()
            {
                Name = "GDP_Industry",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            },
             new GridDataSourceSettingsDataField()
            {
                Name = "GDP_Services",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            }, 
            new GridDataSourceSettingsDataField()
            {
                Name = "GDP_Total",
                DataType = GridDataSourceSettingsDataFieldDataType.String
            }

        }
    }; 
    bool addColumnBtnDisabled;
    bool removeLastColumnBtnDisabled;
    bool removeFirstColumnBtnDisabled;
    bool updateFirstColumnBtnDisabled;

    List<GridColumn> columns = new List<GridColumn>()
{
        new GridColumn()
        {
            DataField = "Country",
            Label = "Country",

        },
        new GridColumn()
        {
            DataField = "Area",
            Label = "Area"
        },
        new GridColumn()
        {
            DataField = "Population_Rural",
            Label = "Population_Rural"
        },
        new GridColumn()
        {
            DataField = "Population_Total",
            Label = "Population_Total"
        },
        new GridColumn()
        {
            DataField = "GDP_Total",
            Label = "GDP_Total"
        }
    };

    private List<CountryRecord> dataRecords;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        dataRecords = dataService.GenerateCountriesData();
    }

    private string[] columnsList = new string[]
    {
            "Id",
            "Country",
            "Area",
            "Population_Urban",
            "Population_Rural",
            "Population_Total",
            "GDP_Agriculture",
            "GDP_Industry",
            "GDP_Services",
            "GDP_Total"
    };

    private void AddColumn()
    {
        for (int i = 3; i < columnsList.Length; i++)
        {
            bool alreadyAdded = false;

            for (int j = 0; j < columns.Count; j++)
            {
                if (columns[j].Label == columnsList[i])
                {
                    alreadyAdded = true;
                    break;
                }
            }

            if (alreadyAdded)
            {
                continue;
            }

            GridColumn newColumn = new GridColumn(){ Label = columnsList[i], DataField = "GDP_Services" };
         

            columns.Add(newColumn);
            grid.Columns = new List<GridColumn>() { }; //TODO: remove
         
            grid.Refresh();
            break;
        }

        UpdateButtonsDisabledState();
    }

The issue was caused because when you don’t set the DataFields for the Grid by default the DataFields are set by the Grid itself and are loaded only the DataFields which are initially loaded.That is why you need to define all the DataFields which are going to be add in order the cells to be populated with the corresponding data.

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi edwardsmarkff,

Unfortunately by the default this functionality is not supported by the MultiInput component, but there are two options that may be suitable for you.

Option #1:
Set the DropDownHeight proprety of the component to ‘auto’. This will result in a drop down menu with height calculated by the number of items in it and it doesn’t have a scrollbar.

Option #2:
I have prepared a code snippet for this option and is similar to the functionality that you need:

    input.dropDownWidth = '700';
    input.dropDownHeight= 'auto'
    
    input.addEventListener('click', ( )=> {
        let dropdownMenu = document.querySelector('.smart-input-drop-down-menu');

        if (dropdownMenu != null) {
            let allDropdownItems = dropdownMenu.querySelectorAll('li');
            for (let i = 0; i < allDropdownItems.length; i ++) {
                if (i % 2 == 0) {
                    allDropdownItems[i].style.float = 'left';
                }
                else {
                    allDropdownItems[i].style.float = 'right';
                }
            }
        }
    });

Let me know if this works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Yavor Dashev]

Hi TurricanDe,

I have tested the exact same demo and I confirm the reported behavior from you.

Also I will add a work item for this scenario and we will work to fix this issue as soon as possible.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Yavor Dashev]

Hi VAISHANVIP,

I would like to ask you to create a more detailed code example in order to be able to give you a proper solution for your use case.

In the mean time I strongly suggest you having a look at the following demos:
https://www.htmlelements.com/demos/cardview/virtual-scroll/
https://www.htmlelements.com/demos/cardview/server-side-crud/
https://www.htmlelements.com/demos/cardview/server-side-sorting-filtering-mysql-php/

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi horacio camacho,

I have modified you code snippet so that it may suit your needs and the cause of this behavior is because you are redefine the whole layout for the Docking layout in the InjectBlazorComponent method. You only need to set the items in order to add multiple tabs in the docking layout.

Modified code:

<style>
    smart-docking-layout {
        width: 100%;
        height: 500px;
        max-width: 1000px;
        background-color: #EEEDF3;
    }
 
        smart-docking-layout .smart-items-container smart-splitter-item.smart-element,
        smart-docking-layout .smart-items-container > .smart-container > smart-splitter-item.smart-element {
            width: 50%;
            height: 50%;
        }
 
        smart-docking-layout smart-tabs-window smart-slider.smart-element,
        smart-docking-layout smart-tabs-window smart-multiline-text-box.smart-element {
            height: 100%;
            width: 100%;
        }
 
        smart-docking-layout smart-tabs-window smart-multiline-text-box.smart-element {
            display: block;
        }
</style>
<DockingLayout @red="dockingLayout" OnReady="OnReady" Layout=@layoutStructure>
</DockingLayout>
@foreach (var label in _labels)
{
    <div id="@label">
        "@label"
    </div>
}
<Button @onclick="InjectBlazorComponent">Inject Component</Button>
@code {
    DockingLayout dockingLayout;
    private List<object> layoutStructureTmp = new List<object>();
    private List<object> layoutStructure = new List<object> {
        new {
            type = "LayoutGroup",
            orientation = "horizontal",
            items = new object[0]
        }
    };
    private bool doRender;
 
    private RenderFragment DynamicRender { get; set; }
    private void OnReady(DockingLayout dockingLayout)
    {
    }
 
    private RenderFragment CreateDynamicComponent() => builder =>
    {
        builder.OpenComponent(0, typeof(SurveyPrompt));
        builder.AddAttribute(1, "Title", "Some title");
        builder.CloseComponent();
    };
 
    protected override void OnAfterRender(bool firstRender)
    {
        if (doRender)
        {
            layoutStructure = layoutStructureTmp.ToList();
            InvokeAsync(StateHasChanged).Wait();
        }
        doRender = false;
    }
 
    int labelCounter = 0;
    List<string> _labels = new List<string>();
    
  

    private void InjectBlazorComponent(MouseEventArgs e)
    {
        List<object>  NewItems = new List<object> ();

        for (int x=0;x<4;x++)
        {
            DynamicRender = CreateDynamicComponent();
            layoutStructureTmp = layoutStructure.ToList();
            labelCounter++;
    
            var label = "Custom" + labelCounter;
            if (!_labels.Contains(label))
            {
                _labels.Add(label);
            }
        
            
            NewItems.Add( new 
                            {
                            label = "Tab " + labelCounter,
                            content = "#" + label
                            }
                        );
           
        }
            doRender = true;

            layoutStructureTmp.Add(
                new
                {
                    id = "item" + labelCounter,
                    label = "Tabs" + labelCounter,
                    items = NewItems

                }
            );

    }
}

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi Lukac.Jozef,

With the additional information you have provided I was able to completely understand your scenario and I confirm that the SmartDockingLayout overrides the id that you are setting with generated with its own.

I will add a work item for this scenario to work on.

However as a workaround you can use the label of the tab element in the closing event.

I have made another quick code snippet on how to get the label of the tab:

     onClosing(event):void {
        let tabElement: HTMLElement = event.path[0],
            tabLabel: HTMLElement = tabElement.querySelector('.smart-tab-label-text-container');
   
        console.log(tabLabel.innerText)
	}

<smart-docking-layout 
    #docking 
    [layout]="layout"
    (close)="onClose($event)"
    (closing)="onClosing($event)"
></smart-docking-layout>

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi Lukac.Jozef,

This functionality is possible with the onClose event and to showcase it to you I have prepared a quick code snippet for this scenario.

//in your app.component.ts
	onClose(event):void {
		let tabId= event.path[0].id;
		console.log(tabId);
	}

Also in your app.component.html:

<smart-docking-layout 
    #docking 
    [layout]="layout"
    (close)="onClose($event)"
></smart-docking-layout>

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi TurricanDe,

Yes, there appears to be some unexpected behavior with the SmartGrid component and the filtering functionalities.

I have added a work item for this use case and we will work to fix it as soon as possible.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Yavor Dashev]

Hi TurricanDE,

This behavior is a bug and I will add a work item for this scenario and we will work to fix it as soon as possible.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Yavor Dashev]

Hi TurricanDE,

We have a demo on how to set the ColumnMenu property for the Grid in Blazor and as far as I tested it I didn’t encounter any issues.

Code example:

@using Smart.Blazor.Demos.Data
@inject RandomDataService dataService

<style>
    body,
    html,
    app {
        height: 100%;
    }
    app {
        overflow: auto;
    }
    .content {
        height: calc(100% - 70px);
    }
    /* This is the CSS used in the demo */
    smart-grid {
        width: 100%;
        height: auto;
    }
</style>
<Example Name="Grid">
    <h1>DataGrid Column menu</h1>
    <p>
        Move the cursor over a column header and click the "hamburger" menu button to open the Datagrid column menu. With that menu, you can sort, filter, edit column description and name, customize column cells alignment, group by the column. The Column menu can be customized
        to fit to your web application's needs.
    </p>

    @if (dataRecords == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <Grid DataSource="dataRecords" Header="@header" ColumnMenu="@columnMenu" Selection="@selection" Grouping="@grouping" 
              Sorting="@sorting" Filtering="@filtering" Editing="@editing" Behavior="@behavior" Layout="@gridLayout">
            <Columns>
                <Column DataField="Id" Label="Id" AllowSort="false" AllowHide="false" ShowDescriptionButton="true" DataType="number" Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right"></Column>
                <Column DataField="FirstName" Label="First Name" ShowDescriptionButton="true"></Column>
                <Column DataField="LastName" Label="Last Name" ShowDescriptionButton="true"></Column>
                <Column DataField="ProductName" Label="Product" ShowDescriptionButton="true"></Column>
                <Column DataField="TimeOfPurchase" Label="Purchase Date" DataType="date" Align="HorizontalAlignment.Right" 
                        CellsAlign="HorizontalAlignment.Right" CellsFormat="d" ShowDescriptionButton="true">
                </Column>
                <Column DataField="Quantity" Label="Quantity" DataType="number" Align="HorizontalAlignment.Right" 
                        CellsAlign="HorizontalAlignment.Right" ShowDescriptionButton="true">
                </Column>
                <Column DataField="Price" Label="Unit Price" DataType="number" Align="HorizontalAlignment.Right"
                        CellsAlign="HorizontalAlignment.Right" CellsFormat="c2" ShowDescriptionButton="true">
                </Column>
                <Column DataField="Total" Label="Total" DataType="number" Align="HorizontalAlignment.Right"
                        CellsAlign="HorizontalAlignment.Right" CellsFormat="c2" ShowDescriptionButton="true">
                </Column>
            </Columns>
        </Grid>
    }
</Example>

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

    GridColumnMenu columnMenu = new GridColumnMenu()
    {
        DataSource = new GridColumnMenuDataSource()
        {
            ColumnMenuItemRename = new GridCommand() { Visible = true },
            ColumnMenuItemEditDescription = new GridCommand() { Visible = true },
            ColumnMenuItemHide = new GridCommand() { Visible = true },
            ColumnMenuItemDelete = new GridCommand() { Visible = true }
        }
    };

    GridSelection selection = new GridSelection()
    {
        Enabled = true,
        AllowCellSelection = true,
        Mode = GridSelectionMode.Extended
    };

    GridGrouping grouping = new GridGrouping() { Enabled = true };
     
    GridFiltering filtering = new GridFiltering() { Enabled = true };

    GridSorting sorting = new GridSorting()
    {
        Enabled = true,
        Mode = GridSortingMode.Many
    };

    GridEditing editing = new GridEditing() { Enabled = true };

    GridBehavior behavior = new GridBehavior() { ColumnResizeMode = GridResizeMode.GrowAndShrink };

    GridLayout gridLayout = new GridLayout() { RowHeight = 50 };

    private List<DataRecord> dataRecords;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        dataRecords = dataService.GenerateData(10);
    }
}

If this doesn’t help you in resolving your issue it will be best to share a complete code example of your use case.

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Yavor Dashev]

Hi Matias,

I have found an issue related with the appearance property of the SmartGrid and when you have set the alternationStart and alternationCount property the allowHover property doesn’t work as intended. If you remove those two properties it will function as intended.

Also I will add a work item for this use case and we will work to fix it as soon as we are able to.

Apologies for the cause inconvenience!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Yavor Dashev]

Hi Matias Galante,

I have prepared a code snippet which showcases how to have the functionalities that you need, however the ‘allowHover’ property should work even when you don’t select a row.
In your JS file:

window.Smart('#grid', class {
get properties() {
return {
dataSource: new window.Smart.DataAdapter({
dataSource: window.Data,
dataFields: [
'id: number',
'firstName: string',
'lastName: string',
'productName: string',
'available: bool',
'quantity: number',
'price: number',
'total: number'
]
}),
appearance: {
allowHover: true
},
columns: [
{
label: 'First Name', dataField: 'firstName'
},
{ label: 'Last Name', dataField: 'lastName' },
{ label: 'Product', dataField: 'productName' },
{ label: 'Available', dataField: 'available', template: 'checkBox' },
{ label: 'Quantity', dataField: 'quantity' },
{ label: 'Unit Price', dataField: 'price', cellsFormat: 'c2' }
]
};
}
});

And if you want to have another cursor style when you hover the row:

smart-grid-cell:hover {
cursor: pointer!important;
}

If this doesn’t work for you it will be best to share a code example of your use case in order to be able to give you proper solution.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Yavor Dashev]

Hi Javi Navarrete,

I did tested the Scheduler component with the ‘ng build’ command and everything works as intended and I don’t get any errors.

It will be best to share a complete code example which reproduces the issue so that we could be able to give you a viable solution for it.

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts