How to set cursor style in a selectable row

[Chau]

I have a grid with grouping enabled. I'd like to know how to set the cursor style on the grid row (that is not a group header) to indicate it is selectable.  

Attached is a screenshot showing the rows with red arrow where I would need to show a hand cursor on row hover event.

Thanks.

 

[Dimiter Topalov]

Hello Chau,

You can target the respective Grid cells and overwrite the built-in CSS, e.g.:

styles: [`
      >>> .k-grid-content tr:not(.k-grouping-row) td:not(.k-group-cell) {
        cursor: pointer;
      }
    `]

https://plnkr.co/edit/jJ9S7diIyNQir6JVrnrg?p=preview

... or:

styles: [`
      >>> .k-grid-content td[role="gridcell"] {
        cursor: pointer;
      }
    `]

https://plnkr.co/edit/KRNRGkcw9MeCUnGk25Qb?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Chau]

Thanks Dimiter! That works.

[Medhanie]

How can I implement this in Kendo UI Grid for MVC. 

I have a grid which selectable, but I need to change the cursour to hand coursor 

blow is my code for .Events(e => e.DataBound("onDataBound"))

<script>

function onDataBound(e)
        {
            var that = this;
            $(that.tbody).on("click", "tr", function (e)
            {
                var rowData = that.dataItem(this);
                var url = "http://google.com";

                window.location.href = url;
            });
        }

</script>

[Dimiter Topalov]

Hi Medhanie,

This forum thread is about the Kendo UI for Angular Grid. If you need assistance with achieving some custom behavior and/or layout with the UI for MVC Grid, please open a separate support thread choosing the respective product. This will ensure the inquiry will be handled by the team responsible for developing and supporting the respective product, and you will receive the most comprehensive answer.

Also, this will help keeping more concise Forum (and support) threads and general.

Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik