"No records to display" displayed on the frozen right column

[Leo]

The "No records to display" is always displayed in the right frozen column. I would like to display it on the left.

[Keerthana Ganesan]

Hi Leo,

Welcome from Syncfusion support.

Currently, we are validating your query at our end. Further details will be updated within two business days.

Until then we appreciate your patience.

Regards,

Keerthana.

[Leo]

No Solution yet?

[Naveen Palanivel]

Hi Leo,

 

Sorry for the inconvenience.

 

We are currently Validating the reported query with high importance  at our end and we will update the further details within two days. Until then we appreciate your patience.

 

Regards,

Naveen palanivel

[Monisha Saravanan]

Hi Leo,

Sorry for the delay in getting back to you.

We have achieved your requirement using JavaScript solution. Here we have used databound event and we have changed the inner text of the movable and frozen content. Kindly check the attached code snippet and sample for your reference.

 

<SfGrid DataSource="@Orders" @ref="Grid" Height="364"  EnableHover="false" AllowSelection="false" AllowSorting="true">

     <GridEvents TValue="Order"  DataBound="DataBound" ></GridEvents>

</SfGrid>

 

@code {

 

          public async Task DataBound()

    {

        if (Grid.CurrentViewData.Count()==0  && Grid.Columns.Where(e => e.IsFrozen).Count()>0)

        {

            await JSInterop.InvokeVoidAsync("search");

           

        }

    }

   

}

 

function search() {

 

    setTimeout(function () {

        var frozencontent = document.getElementsByClassName('e-frozencontent')[0].innerText;

 

        var movablecontent = document.getElementsByClassName('e-movablecontent')[0].innerText;

 

        // change the innertext

 

        document.getElementsByClassName('e-frozencontent')[0].innerText = "";

        document.querySelectorAll('.e-gridcontent .e-content .e-movablecontent td')[0].innerText = frozencontent;

       

   

    }, 500);

 

   

 

 

   

 

}

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

Please let us know if you have any concerns.

Regards,

Monisha

[Adnan Ali]

In my case The frozen column is being displayed but on the initial load the frozen column is not inline with the other columns It takes around 1 minute for it in proper grid lines, till that time the grid doesn't show all data and I'm unable to scroll

Height="580px" AllowPaging="true" AllowExcelExport="true" AllowTextWrap="true" AllowSorting="false" >

I do need to load 1000 records but it is showing this behaviour with only 100 records. Please suggest some solutioin for this

[Naveen Palanivel]

Hi Ali,

From your query, We suspect that frozen column not aligned with the other columns in the grid and it does not show all data . We also prepared simple sample attached in this ticket. Unfortunately, we were unable to reproduce the issue on our end. Please find the attached sample for your reference.

If the reported issue still reproduced then kindly share the below details to validate further at our end.

1. Share us the entire Grid code snippet along with model class
2. Share us the video demonstration of the issue with elaborately , it will more useful to us.
3. Please share if we missed any replication procedure in attached sample
4. If possible share us an simple issue reproduceable sample or try to modify the above mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Naveen Palanivel

Attachment: Blazor_Frozen_f2de68e5.zip

[Adnan Ali]

I have attached a modified sample it's showing the exact same behavior that I'm facing, the frozen column is of different height on the initial load and the grid takes a lot of time on the initial load, even Virtualization is not loading all the records 

Attachment: Blazor_Frozen_f2de68e5_a7991af9.rar

I'm facing a deadline, can I get a quick help on this, please

[Monisha Saravanan]

Hi Adnan,

We checked your shared sample and identified the cause of the delay in rendering the data. It appears that you have loaded all the 1000 records on a single page, which is leading to performance issues due to the presence of numerous customized templated columns.

To address this concern and improve the performance of your application, we recommend implementing either paging or virtualization with a reduced page size. By implementing paging, you can load a specific set of data upon page navigation(if we load all the records (1000) on initial loading then it will take some time to load and refresh the Grid), while virtualization allows you to load data dynamically as the user scrolls through the page. Both approaches can significantly enhance the responsiveness of your application.

In order to assist you further, we have made modifications to your shared sample.

We have implemented virtualization in the index page and incorporated paging in the counter page. This will provide you with a practical demonstration of how to implement these features effectively. Please refer to the attached modified sample for detailed information and guidance.

 

<SfGrid DataSource="@Orders" FrozenColumns="1" AllowPaging="false" AllowExcelExport="true" EnableVirtualization="true" AllowSorting="false" Width="1280px" Height="400">

    <GridPageSettings PageSize="50"></GridPageSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsFrozen="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee ID" ></GridColumn>

        <GridColumn Field=@nameof(Order.ShipAddress) HeaderText="Shiping Details">

            <GridColumns>

Note : AllowTextWrap should not be used with virtualization. Please refer the below limitations.

https://blazor.syncfusion.com/documentation/datagrid/virtualization#limitations-for-virtualization

• The height of the datagrid content is calculated using the row height and total number of records in the data source and hence features which changes row height such as text wrapping are not supported. If you want to increase the row height to accommodate the content then you can specify the row height using RowHeight property to ensure all the table rows are in same height.

 

Please let us know if you have any concerns.

Regards,

Monisha

Attachment: Blazor_24_3_2023_43a4d4af.zip

[Adnan Ali]

It's taking a lot of time to load and fix the Height of the frozen column with Enable Virtualization 

I have set the height of the grid row like this

Can you please suggest any solution for this so that the frozen column is of the same height when the data is loaded into the grid

[Naveen Palanivel]

Hi Adnan,

Regarding your update with the code snippet, there is a default RowHeight property available that can be used to set the row height. Additionally, we noticed that the textwrap property is set to true. However, it's important to note that in previous updates, we mentioned that textwrap is not supported in virtualization. Unfortunately, we were unable to reproduce the issue on our end. Please see the limitation of virtualization and sample for your reference.

Reference : https://blazor.syncfusion.com/documentation/datagrid/virtualization#limitations-for-virtualization

<SfGrid DataSource="@Orders" FrozenColumns="1" AllowPaging="false" RowHeight="56" AllowExcelExport="true" AllowTextWrap="false " EnableVirtualization="true" AllowSorting="false" Width="1280px" Height="400">

    <GridPageSettings PageSize="50"></GridPageSettings>

    <GridColumns>

Note : Text wrapping are not supported in virtualization

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

Attachment: Blazor_Frozen_8b99a37e.zip