1. Home
  2. Forum
  3. Blazor
  4. How to scroll programatically to a specific Grid row & how to disable rows based on row value

How to scroll programatically to a specific Grid row & how to disable rows based on row value

Dear Syncfusion Team,

I have to goals that I would like to achieve with your Grid:
  1. I would like to select programatically a grid row based on it's index OR based on an item reference. For example I have a programatically selected item, and I have to scroll programatically to this selected item.
  2. I would like to disable specific Grid rows based on one of the row item's value. For example row is disabled if the creation date of the row item (CreationDate property) is smaller than the current year. What do I mean by disable row: user can't select the specific row, the specific row has disabled style (gray appearance, etc.)
Could you help me to achieve my goals?

Thanks in advance!

Regards,
Istvan

10 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team July 10, 2020 01:09 PM UTC

Hi Istvan, 

Greetings from Syncfusion support. 

Query 1 : I have a programatically selected item, and I have to scroll programatically to this selected item. 
We suggest you to use the SelectRow method of Grid, with this method you can programmatically select a row in Grid. And to scroll to the corresponding position, we have used the Microsoft.Jsinterop to achieve this. In the JS file, we have set the scrollTop for Grid’s content. 

<Syncfusion.Blazor.Buttons.SfButton OnClick="OnClick">Select Row of index 15</Syncfusion.Blazor.Buttons.SfButton> 
 
<SfGrid @ref="Grid" DataSource="@Orders" EnableHover=false AllowSelection=true Height="280" Toolbar="@(new List<string>() { "Add"})"> 
    ... 
</SfGrid> 
  
@code { 
    SfGrid<Order> Grid; 
    public async Task OnClick() 
    { 
        await Grid.SelectRow(15); 
        JSRuntime.InvokeAsync<object>("scroll", 15);    //here 15 is the row index to be selected 
    } 
    ... 
} 

[scroll.js] 
function scroll(index) {    var grid = document.getElementsByClassName("e-grid")[0].blazor__instance;    var rowHeight = grid.getRows()[index].scrollHeight;    grid.getContent().scrollTop = rowHeight * index;                //do the calculations to set the scrollTop value for grid content }

 
Query 2 : I would like to disable specific Grid rows based on one of the row item's value. 
We suggest you to use the RowDataBound event of Grid, and apply disabled styles for the row based on your requirement. We have already documented a topic based on this scenario. Please refer the documentation from the link below, 

Please refer the code below, 

<Syncfusion.Blazor.Buttons.SfButton OnClick="OnClick">Select Row of index 15</Syncfusion.Blazor.Buttons.SfButton> 
 
<SfGrid @ref="Grid" DataSource="@Orders" EnableHover=false AllowSelection=true Height="280" Toolbar="@(new List<string>() { "Add"})"> 
    <GridEvents TValue="Order" RowDataBound="RowBound"></GridEvents> 
    ... 
</SfGrid> 
 
<style> 
    .disablerow { 
        opacity: .5; 
        pointer-events: none; 
        -ms-touch-action: none; 
        touch-action: none; 
        cursor: no-drop; 
    } 
</style> 
 
@code { 
    ...  
    public void RowBound(RowDataBoundEventArgs<Order> args) 
    { 
        if (args.Data.Freight < 5) 
        { 
            args.Row.AddClass(new string[] { "disablerow" }); 
        } 
    } 
} 
 
 
We have also prepared a sample consolidating the above two queries for your convenience, please download the sample from the link below 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Marked as answer
SI Szöke Istvan July 21, 2020 02:38 PM UTC

Hello Renjith,

The disabled style works and I can't select the disabled rows with click on it, but I can select it if I select first an enabled row, then I navigate to the disabled row with the up and down key on my keyboard.

Is there any way to prevent keyboard interaction selection for disabled rows?

Regards,
Istvan

RS Renjith Singh Rajendran Syncfusion Team July 22, 2020 02:03 PM UTC

Hi Istvan, 

Greetings from Syncfusion support. 

We suggest you to cancel the Selection action based on your scenario by using the RowSelecting event of Grid. Please use as like the below codes to achieve this requirement, 

<GridEvents TValue="Order" RowSelecting="RowSelecting" RowDataBound="RowBound"></GridEvents>
 
 
public void RowBound(RowDataBoundEventArgs<Order> args) 
{ 
    if (args.Data.Freight < 5) 
    { 
        args.Row.AddClass(new string[] { "disablerow" }); 
    } 
} 
public void RowSelecting(RowSelectingEventArgs<Order> args) 
{ 
    if (args.Data.Freight < 5)     //based on the condition cancel the row selection
    { 
        args.Cancel = true; 
    } 
} 


We are also attaching the modified sample for your convenience, please download the sample from the link below, 
 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


SI Szöke Istvan September 18, 2020 01:18 PM UTC

Hello Renjith,

Unfortunately, the scroll feature you provided me stopped working, since I enabled virtualization (EnableVirtualization = "true") for the grid. I tested it in your demo project as well that you sent me earlier.

Do you have another idea how should I scroll to the selected item with virtualization?

Also, can you consider to implement a "ScrollTo" method into your Grid component? If it's necessary, I can create a feature request for this. I think it's a really important and basic function to have in your Grid. 

Regards,
Istvan

RS Renjith Singh Rajendran Syncfusion Team September 21, 2020 12:46 PM UTC

Hi Istvan, 

Thanks for your update. 

The problem occurred because of calling the SelectRow method to programmatically select a row in Grid with EnableVirtualization. We would like to inform you that, currently we don’t have support to programmatically select a row in Grid when enable virtual scrolling in Grid. But, we have considered this as a usability feature improvement and logged an usability feature improvement task for the same “Need to provide support for programmatically select a row in virtual scrolling”. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts.   
   
You can now track the current status of this feature request here.   
   
At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision and technological feasibility. It will be implemented in any of our upcoming releases.   
 
And also, we would like to inform you that, when use EnableVirtualization in Grid, we will follow load on demand concept, and render the rows in Grid at the time of scrolling for performance. So in our shared sample from previous update, as the row in 15th row index is not available when call the SelectRow method, this affected the scrolling also. In our previously attached sample if you set the row index as 11(row is available) instead of 15, then the scroll works properly. 
 
You can communicate with us regarding the open features any time using our above feedback report page. 
 
Regards, 
Renjith Singh Rajendran 


SI Szöke Istvan September 22, 2020 07:00 AM UTC

Hi Renjith,

Thanks for the update. I'm glad to hear that you considered this request as a useful function. I will waiting for this feature.

Best regards,
Istvan

RS Renjith Singh Rajendran Syncfusion Team September 23, 2020 09:28 AM UTC

Hi Istvan, 

Thanks for your update. 

Please follow up on the feedback link provided from our previous update for future updates regarding the feature. You can track the current status of the request and contact us through the feedback link. 

Regards, 
Renjith R 


SI Szöke Istvan October 21, 2020 09:32 AM UTC

Hi Renjith,

Are there any news or expected release date for this feature request?

Regards,
Istvan

SI Szöke Istvan November 12, 2020 10:17 AM UTC

Hi Renjith,

Are there any news or expected release date for this feature request?

Regards,
Istvan

RN Rahul Narayanasamy Syncfusion Team November 13, 2020 12:47 PM UTC

Hi Stephanie, 
 
Currently, we don’t have any immediate plan to include this feature and the requested features will be implemented based on customers interest(number of counts for the particular feature). The feature will be included in any of our upcoming release. Till then we appreciate your patience. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 
 

Regards, 
Rahul 


Loader.
Up arrow icon