JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid allowHover only works on selected rows

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #102450
    Matias Galante
    Participant
    Up
    0
    Down

    On the grid I’ve been wanting to add an effect where hovering over a row gives a highlight effect. I found the allowHover property for appearance which says it does it but I noticed it only applies the effect if the rows are selected. Was that the intended way or is it supposed to highlight any row regardless of selection?

    My other question is if there’s a way to change the cursor icon to pointer to show that a row can be clickable or if we should override the cursor: default rule in css for smart-grid-row instead?

    Thanks!

    #102451
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

    #102452
    Matias Galante
    Participant
    Up
    0
    Down

    Thanks for the reply. Sorry I forgot to mention I’m using Angular 2+. Here is my code below of what I currently have for the allowHover problem:

    component.ts

    
    GridConfig = {
    appearance: { alternationStart: 0, alternationCount: 2, placeholder: 'No ROI
    Records', allowHover: true },
    dataSource: [],
    filtering: { enabled: true },
    columnMenu: { enabled: false },
    selection: { enabled: true, mode: 'one' },
    sorting: { enabled: true },
    columns: [
    { label: 'Organization', dataField: 'organization', sortOrder: 'asc' },
    { label: 'Created By', dataField: 'createdBy' },
    { label: 'Start Date', dataField: 'startDate', width: 100 },
    { label: 'End Date', dataField: 'endDate', width: 100 },
    { label: 'Status', dataField: 'status', width: 120 }
    ]
    }
    
    #102453
    Matias Galante
    Participant
    Up
    0
    Down

    when my mouse is over a row, nothing happens

    my html looks like:

    
    smart-grid
    #grid
    id="grid"
    fxFlex
    [appearance]="GridConfig.appearance"
    [columns]="GridConfig.columns"
    [columnMenu] = "GridConfig.columnMenu"
    [dataSource]="GridConfig.dataSource"
    [filtering]="GridConfig.filtering"
    [selection]="GridConfig.selection"
    [sorting]="GridConfig.sorting"
    <div id="grid-spacer"></div>
    smart-grid
    
    #102456
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

    #102463
    Matias Galante
    Participant
    Up
    0
    Down

    That helped, thank you!

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