Blazor Grid - Tooltips

Grid - Tooltips

Smart.Grid allows you to set tooltips with unique value for each cell using the "template" Column property.

Set up the Grid

Initialize the Grid with a list of client orders. The DataSource contains a Price field, which will be displayed as a tooltip.

<Grid DataSource="@Clients" DataSourceSettings="@dataSourceSettings">
  <Columns>
      <Column DataField="Name" Label="Client Name"></Column>
      <Column DataField="Product" Label="Product Name"></Column>
      <Column DataField="Country" Label="Country"></Column>
      <Column DataField="City" Label="City"></Column>
  </Columns>
</Grid>


@code {
  class Client
  {
      public string Name { get; set; }
      public string Product { get; set; }
      public string Country { get; set; }
      public string City { get; set; }
      public double Price {get; set; }

      public Client(string name, string product, string country, string city, double price)
      {
          Name = name;
          Product = product;
          Country = country;
          City = city;
          Price = price;
      }
  }
  Client[] Clients = new Client[]
    {
          new Client("Maria Anders", "Black Tea", "Germany", "Berlin", 20.55),
          new Client("Ana Trujillo", "Coffee", "Mexico", "Mexico City", 10.55),
          new Client("Antonio Moreno", "Chai", "Mexico", "Mexico City", 18.55),
          new Client("Thomas Hardy", "Chai", "UK", "London", 12.55),
          new Client("Christina Berglund", "Chai", "Sweden", "Lula", 20.55),
          new Client("Hanna Moos", "Chai", "Germany", "Berlin", 30.00),
          new Client("Frederique Citeaux", "Chai", "France", "Lille", 45.30),
          new Client("Martin Sommer", "Chai", "Spain", "Madrid", 55.65),
          new Client("Laurence Lebihan", "Chai", "France", "Marseille", 80.20),
          new Client("Elizabeth Lincoln", "Chai", "Canada", "Tsawassen", 15.65),
  };

  GridDataSourceSettings dataSourceSettings = new GridDataSourceSettings()
  {
      DataFields = new List<IGridDataSourceSettingsDataField>()
      {
          new GridDataSourceSettingsDataField() { Name = "Name", DataType = GridDataSourceSettingsDataFieldDataType.String },
          new GridDataSourceSettingsDataField() { Name = "Product", DataType = GridDataSourceSettingsDataFieldDataType.String },
          new GridDataSourceSettingsDataField() { Name = "Country", DataType = GridDataSourceSettingsDataFieldDataType.String },
          new GridDataSourceSettingsDataField() { Name = "City", DataType = GridDataSourceSettingsDataFieldDataType.String },
          new GridDataSourceSettingsDataField() { Name = "Price", DataType = GridDataSourceSettingsDataFieldDataType.Number },
      }
  };

}
Grid

Set Grid Tooltips

As setting the tooltips requires working with the HTML elements of the cells, we will require using JSInterop.

When the Grid initializes, call the "setGridTooltips" JavaScript function using JSInterop. Then define the function in the App.razor(.NET 8) / _Host.cshtml file

@inject IJSRuntime JS

<Grid DataSource="@Clients" DataSourceSettings="@dataSourceSettings" OnReady="GridReady">
...
</Grid>

@code{
  private void GridReady(object grid)
  {
      JS.InvokeVoidAsync("setGridTooltips");
  }
}
window.setGridTooltips = function(){
  const grid = document.querySelector("smart-grid");
  grid.setColumnProperty('Product', 'template', function (settings) {
      settings.cell.element.querySelector('div').title = '$'+settings.row.data.Price;
  })
}
Grid Tooltips