Tooltip on row hover - VB not c#

[Ross Woodward]

Hi there,

I'm using the grid control to display some orders, which have 2 layers of grouping

Currently, I've got links for 2 reports attached to the ROW level, and I'd prefer them attached to the GROUPHEADER level instead  if possible.

I'd also like a tooltip to pop up if the user hovers over the group header with the notes from the order.

my grid is built from 

                                    @Html.EJS().Grid(Of CustomerHistory)("CurrentOrdersGrid").DataSource(ViewBag.mycustomerCurrentOrders).AllowTextWrap(True).Columns(

Sub(col)

    col.Field("GroupHeader").AllowSorting(False).HeaderText("GroupHeader").Width(10).Visible(False).Add()

    col.Field("detSerialNo").Template("#tester").HeaderText("Serial No").Width(25).Add()

    col.Field("detID").HeaderText("ID").Width(10).Visible(False).Add()

    col.Field("catName").HeaderText("Product").Template("#catname").Width(10).Visible(False).Add()

    col.Field("detDescription").HeaderText("Product Name").Template("#Item2").Width(50).Add()

    col.Field("PurchaseDate").HeaderText("Purchased").Width(40).Add()

    col.Field("DeliveryDate").HeaderText("Delivered").Width(40).Add()

    col.Field("Warranty").Format("dd/MM/yyyy").Type("Date").HeaderText("Warranty").Width(30).Add()

    col.Field("patTest").Format("dd/MM/yyyy").Type("Date").HeaderText("PAT Due").Width(30).Add()

    col.Field("detOrdID").HeaderText("ordID").Width(10).Visible(False).Add()

    col.Field("Points").HeaderText("Items").Width(20).Visible(False).Add()

    col.Field("qty").HeaderText("Qty").Width(20).Add()

    col.Field("POD").HeaderText("").Template("#POD").Width(10).Add()

    col.Field("Photo").HeaderText("").Template("#Photo").Width(10).Add()

End Sub).AllowGrouping().AllowSorting().SelectionSettings(

Sub(s) s.Type(SelectionType.Multiple)

).AllowSelection().GroupSettings(

Sub(g) g.Columns({"GroupHeader", "catName"}).CaptionTemplate("#template")

).Aggregates(summarylist).DataBound("CheckHeaders").Render()

with relevant templates

<script type="text/x-template" id="POD">

    ${if(isOrder=="1")}

    <a rel='nofollow' href="/printing/ProofOfDelivery?ordID=${detOrdID}" target="_blank"><i class="fa-solid fa-signature"></i></a>

    ${else}

    ${/if}

</script>

<script type="text/x-template" id="Photo">

    ${if(isOrder=="1")}

    <a rel='nofollow' href="/printing/PhotosFromOrder?ordID=${detOrdID}&[email protected]" target="_blank"><i class="fa-solid fa-image"></i></a>

    ${else}

    ${/if}

</script>

<script type="text/x-template" id="template">

    ${key}

</script>

Any ideas appreciated! 

thanks

Ross 

[Vasanthakumar K]

Hi Ross Woodward,

Greetings from Syncusion support.

We have validated your query and understand that you need to display tooltips for group caption cells. By using the grid's dataBound event, you can customize the grid’s group caption cells and achieve your requirement. Based on your requirement, we have prepared a sample in VB. In that sample, we used the grid's dataBound event to customize the group caption cell and add a tooltip. You can refer to the code example, screenshot, and sample for more details.

[code example]

<script>

    function CheckHeaders() { // your shared grid code dataBound event bounded method.

        var captionRows = this.getContentTable().querySelectorAll('.e-groupcaptionrow'); // get grid’s group caption row element collections.

        if (captionRows.length) {

            for (var i = 0; i < captionRows.length; i++) {

                var captionCell = captionRows[i].querySelector('.e-groupcaption'); // get grid’s individual caption row’s caption cell for apply tooltip target.

                if (captionCell && !captionCell.classList.contains('e-tooltip')) {

                    //Initialize Tooltip component

                    var tooltip = new ej.popups.Tooltip({

                        content: captionCell.innerText //Set tooltip content

                    });

                    //Render initialized Tooltip component

                    tooltip.appendTo(captionCell);

                }

            }

        }

    }

</script>

Screenshot:

Sample: please find the attachment.

Regards,

Vasanthakumar K

Attachment: VBSample_112a36e2.zip