Row propery of RowSelectEventArgs<T> Object always null

[Simon Ahammer]

 Hi,

I want to access the DOM Row element in the DataGrid after selecting a row in the OnRowSelected event handler to add a css class.

But in the event handler the Row property is always NULL. Interestingly, the RowIndex value is set correctly.

Also in the OnRowSelecting event handler, the value for Row is always NULL.

Thanks for your support.

[Monisha Saravanan]

Hi Simon,

Greetings from Syncfusion support.

Query: “I want to access the DOM Row element in the DataGrid after selecting a row in the OnRowSelected event handler to add a css class.”

We suspect that your requirement is to add an class to the row element inside selected event handler. If so we have achieved your requirement using JavaScript solution. Here we have added an class to the existing class list by accessing the row element using the selected row index. Similarly we have handled the same for the RowDeselecetd event to remove the class list. Kindly check the attached code snippet and sample for your reference.

 

<SfGrid  DataSource="@Orders"  Height="400">

     <GridEvents TValue="Order" RowSelected="RowSelected" RowDeselecting="RowDeselect"></GridEvents>

...

</SfGrid>

 

 

@code{

   

 

    public async Task RowSelected(RowSelectEventArgs<Order> args)

    {

     

        await JSInterop.InvokeVoidAsync("select", args.RowIndex);

    }

 

    public async Task RowDeselect(RowDeselectEventArgs<Order> args)

    {

        await JSInterop.InvokeVoidAsync("remove", args.RowIndex);

    }

 

   

select = function (index) {

    var rows = document.querySelectorAll('.e-row')[index];

    rows.classList.add('e-setusermarkup');

  

}

 

remove = function (index) {

    var rows = document.querySelectorAll('.e-row')[index];

    rows.classList.remove('e-setusermarkup');

}

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid_Server-451768629.zip

Please let us know if you have any concerns or if you faced any difficulties in achieving your requirement.

Regards,

Monisha

[Simon Ahammer]

 Hi Monisha,

Thank you very much for your feedback. The way you pointed out using JS Interop works. Unfortunately, the attached class doesn't seem to be effective on the selected line. I would like to set the color of the border of the selected row to red. The class I created does not produce this result.

What am I doing wrong?

Thanks a lot for your support.

Best,

Simon

[Monisha Saravanan]

Hi Simon,

We suggest you to achieve your requirement by applying CSS using JavaScript. Also we have included the modified sample. Kindly check the below attached sample and code snippet for your reference.

 

select = function (index) {

    setTimeout(function () {

    var rows = document.querySelectorAll('.e-row')[index];

    rows.classList.add('e-setusermarkup');

        var a = document.getElementsByClassName("e-setusermarkup")[0].getElementsByClassName("e-rowcell");

 

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

 

            a[i].style.borderBottomStyle = "solid";

            a[i].style.borderBottomColor = "red";

            a[i].style.borderBottomWidth = "thick";

 

        }

    },100)

 

  

}

 

remove = function (index) {

    var rows = document.querySelectorAll('.e-row')[index];

    var a = document.getElementsByClassName("e-setusermarkup")[0].getElementsByClassName("e-rowcell");

 

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

 

        a[i].style.borderBottomStyle = "none";

        a[i].style.borderBottomColor = "none";

        a[i].style.borderBottomWidth = "default";

    }

    rows.classList.remove('e-setusermarkup');

   

}

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid_Server1351321013.zip

Please let us know if you have any concerns.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.