Need to make Nested grid position as Fixed in DetailTemplate, when parent grid is scrolled

[Nirmal Chandran]

Hi Syncfusion Team,
I am using grid inside DetailTemplate of the SFGrid, and the Parent grid having 50 columns so it is enabled with scroll option

for the Nested grid, it is having only less than 5 columns.

So when the parent is scrolled, i want to make the child grid position fixed to avoid showing blank space, but i am having issue on this. 

is there any way to achieve this via css, or let me know the other possibilities

Thank & Regards,

Nirmal C

Attachment: DetailTemp_ecebc86.PNG

[Prathap Senthil]

Hi Nirmal Chandran ,

Based on the requirements, we suggest setting the width to 100% for the detail template grid to achieve your requirements. Kindly refer to the code snippet and sample below for your reference.

<GridTemplates>

     <DetailTemplate>

         @{

             var order = (context as OrderData);

             var employee = (context as EmployeeData);

 

             <SfGrid @ref=Grid[(int)employee.EmployeeID] DataSource="@Orders" Toolbar="@Toolbaritems" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))"  Width="100%">

                 <GridEvents TValue="OrderData" OnToolbarClick="@((e)=>ToolbarClickHandler(e, employee.EmployeeID))"></GridEvents>

                 ----------------

             </SfGrid>

         }

     </DetailTemplate>

</GridTemplates>

Sample: https://blazorplayground.syncfusion.com/embed/VNrejmBiJpIysJey?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,
Prathap Senthil

[Nirmal Chandran]

Hi Prathap,

Thank you for your response,

But my expected result is different than the given example,
The Grid I have created also working the same as yours by default, but i want to show like the below attached screenshot.

 The detail template position should be fixed, even if the parent is scrolled

it should not show like this.

[Prathap Senthil]

Thank you for the update. As explained previously, when you set the detail grid width to 100%, the grid occupies the full available width, thereby eliminating the issue of white space. We have attached a screenshot for your reference to demonstrate that no problem arises when the width is set to 100%.

If the issue still persists, we would need additional clarification from your side to investigate further. Please provide the following details to assist us in proceeding:

• Could you provide a simple, reproducible sample that demonstrates the problem? This will allow us to identify the issue more effectively and offer a resolution.
• Could you please share the grid code snippet along with the model class?
• Could you please share your attempt to replicate the issue using the attached sample?

The information you provide will be very helpful in validating the reported query on our end and in providing a solution as quickly as possible. Thank you for your understanding and cooperation.

[Nirmal Chandran]

Hi Prathap,

In my Parent Grid i have 50 columns, and in the detail template i have only 5 columns, so I don't want to expand the 5 columns to the width of 50 columns, so what i have done is, i have set the detail template width to screen visible size like below.



I want to show like this, and not full width size of the parent grid, and want to make the detail template grid position as fixed, even when parent is scrolled

and I do not want to show like below

[Prathap Senthil]

Thank you for the update.

Based on your requirement, we regret to inform you that it is not possible to achieve a fixed position for the detail template grid when the parent grid is scrolled. Thank you for your understanding.