Trouble with Blazor Grid - Sizing and Searching with Template Columns

[Scott Kirkman]

I am relatively new to SyncFusion so apologies if this is a basic issue.  I got most things going but have three problems.

The first problem is with AutoFit. I have used AutoFit for three columns, fixed width for three others and the remaining columns have no width specified and share the remaining space available.  This works fairly well but I thought it would be nice to give users the option to change the width, so I set AllowResizing on the Grid. When I do this, the AutoFit setting seems to be ignored and those three columns seem to go back to a fixed width (which I did not specify). Is this expected?  Is there any way to AllowResizing when using AutoFit on some columns?

The second problem may be related. When I try to use AutoFit on template columns it does not seem to work the same way. My guess is it using the length of the expression rather than the length of what is displayed in the cell. Should AutoFit work on template columns?

The third problem relates to template columns.  I have used a combination of GridColumns (using both simple data binding and complex data binding) and several template columns. I have enabled searching by adding Toolbar to the Grid element as shown below:  

<EjsGrid DataSource=@Orders AllowPaging="true" AllowSorting="true" Toolbar="@Toolbar">

with the following defined in the @Code section

List<string> Toolbar = new List<string>() { "Search" };

With this set, I can search but do not find anything.  However, the paging indicates that it have not refined the search.  It still shows the total number and all the page navigation.  But when I add the following to ensure that it does not search in the template columns, it works as expected.  

<GridSearchSettings Fields=@Columns></GridSearchSettings>

with the following defined in the @Code section

string[] Columns = (new string[] { "OrderID", "NdisOrder.FullName", "NdisOrder.NdisNr", "NdisOrder.YourEmail", "Total" });

Is it possible to allow search in template columns?  None of the examples in the docs include template columns.

Thanks

Scott

[Vignesh Natarajan]

Hi Scott,  

 

Greetings from Syncfusion support.  

 

Query1: “Is this expected?  Is there any way to AllowResizing when using AutoFit on some columns?” 

 

We understand that you are facing issue with AllowResizing and AutoFit columns in Grid. To replicate the reported issue at our end, we have prepared a sample as per your suggestion (3 - AutoFit Column, 3- Columns with Specified width, 3 – without width property). We are not able to reproduce the reported behavior at our end.  

 

(i.e) By default Columns width will be determined in below way. 1. First Columns with AutoFit property width’s will be determined based on the content of that particular which has maximum width. Next to it, columns whose width are specified will be determined. At last the remaining width will be distributed equally among the remaining column. This is default behavior at our end also we are able to reproduce the similar behavior only.  

 

Kindly download the sample from below  

 

Sample:  https://www.syncfusion.com/downloads/support/directtrac/259622/ze/BlazorApp1578959349  

 

Refer our UG documentation for your reference 

 

https://ej2.syncfusion.com/blazor/documentation/grid/columns/#autofit-columns-by-method  

 

Kindly ensure that you referred same version of Nuget (17.4.0.40) and script files (17.4.40). If you are still facing the issue, kindly get back to us with more details about your issue. 

 

Query2: “Should AutoFit work on template columns?” 

 

Be default for AutoFit column, we will validate the length of the strings to determine the column width. But it will not be possible for template column where we render the custom component with custom height and width. Its width will be based on the its template component value.  

 

Query3: “Is it possible to allow search in template columns?  None of the examples in the docs include template columns” 

 

To perform searching in Grid, Field property must be enabled in that particular template GridColumn. Based on the Field property value data operations like filtering, sorting, CRUD actions will be performed.  

So kindly define the Field property to template column if you want to perform searching in that column  

 

Regards, 

Vignesh Natarajan. 

[Scott Kirkman]

Hi Vignesh

Thanks for the responses. Query 2 was as I suspected and the response to Query 3 helped a lot. However, I am still having the same problem with Query 1.  I took your example Grid exactly as you had it and put it on Index.razor.  With the example you provided, the grid does not take up the full width of the container element.  I also added another copy of your example Grid with the same data and removed the AllowResizing="true" attribute. Without this attribute the column sizing works as I would have expected.  Here is a screenshot of what I am seeing. The first grid is your example and the second one is the one I modified.

And just to confirm, I am using the 17.4.0.40 NuGet package and 17.4.40 script files for Bootstrap 4.

    https://cdn.syncfusion.com/ej2/17.4.40/bootstrap4.css

    https://cdn.syncfusion.com/ej2/17.4.40/dist/ej2.min.js

    https://cdn.syncfusion.com/ej2/17.4.40/dist/ejs.interop.min.js

Thanks

Scott

[Vignesh Natarajan]

Hi Scott,  

 

Thanks for sharing the details. 

 

By default when AllowResizing is enabled in Grid, Columns whose width is unspecified will be defined as 200px. It is default behavior of the Grid. The reported issue (white space at right corner) might occur when trying to resize all the column whose width are unspecified. This behavior can be overcome by defining AllowResizing property as false any of the column whose width unspecified. If this solution does not resolve your query, kindly share the following details. 

 

1. Share the video demonstration of the reported behavior.
2. Share your browser details and desktop/ laptop resolution.

                                        

Regards, 

Vignesh Natarajan. 

[Scott Kirkman]

Thanks for your response. 

By default when AllowResizing is enabled in Grid, Columns whose width is unspecified will be defined as 200px. It is default behavior of the Grid. The reported issue (white space at right corner) might occur when trying to resize all the column whose width are unspecified. This behavior can be overcome by defining AllowResizing property as false any of the column whose width unspecified. If this solution does not resolve your query, kindly share the following details.

What I don't understand is why specifying AllowResizing="true" on the Grid, would make columns of unspecified width be set to 200px.  Why not let the remaining space by shared by columns of unspecified width, as explained in the original response on 2nd Jan.  I understand this is probably how the underlying Javascript control is written (rather than being a Blazor specific issue), but it doesn't seem to make sense (to me at least) why 200px width would be used in this scenario.

Thanks

Scott

[Vignesh Natarajan]

Hi Scott,  

   

Thanks for contacting Syncfusion support.  

 

As mentioned before while resizing the column with unspecified Width, will take 200px as default value when resizing in enabled in Grid. Based on this architecture only we will calculate the column size while resizing. if you do not want to set Width as 200px, then kindly define Width as auto for any one of unspecified column width. 

 

Regards,  

Vignesh Natarajan. 

[Spyros]

Hi,

I'm interested in Q3 above. I use a templated GridColumn but it has more than one field in it (something like a guest name and some profile notes under the name in the same column using the context property to get the values of the two fields). The search function works only with the data of the column which is in the Field property. So if I set Field="GuestName" it searches the guest name but not the notes and the other way around. Is there a solution to this?

If not, is there a way I could simulate the browser's Ctrl+F (Find) which works with everything on the page? (Not an issue as in this case the Grid takes up all the page).

Thank you.

Spyros Botsis

[Vignesh Natarajan]

Hi Spyros,

Thanks for the update.

Query: “ The search function works only with the data of the column which is in the Field property.”

As explained earlier, search function or other DataOperations will execute based on the datasource value bound to particular column’s Field property value only. It will not be possible for Grid component to display two fields value in single column without using ColumnTemplate and perform searching operations. This is the default behavior of Grid component.

Query: “is there a way I could simulate the browser's Ctrl+F (Find) which works with everything on the page? ”

Yes, you can simulate the browser global search (Ctrl + F) which will possible only for currently visible page. It will not be possible for other page records in Grid.

Regards,

Vignesh Natarajan