Column Visible does not work

[Marcelo]

Hello,

I am using net core 5 + blazor wsam

In version 19.1.69 I am having problems to hide columns, please follow the steps that I indicate

1)Normal grid:

2)Hide column name 'Producto':

3)Grid after hiding the column 'Producto':

Could you help me detect what is happening?

[Vignesh Natarajan]

Hi Marcelo,  

 

Thanks for contacting Syncfusion support. 

 

Query: “In version 19.1.69 I am having problems to hide columns, please follow the steps that I indicate” 

 

We have analyzed the reported issue by preparing a sample as per your suggestion (Blazor wasm + 5.0 + 19.1.0.69) and we are not able to reproduce the reported issue at our end. Please find the sample from below which we have used for evaluation.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/167593/ze/DataGrid_Client-2146499884.zip 

 

After referring the sample if you are still facing the reported issue. Kindly get back to with following details.  

 

1.  Share your Grid code example.
2. Are you facing any script error in browser console while hiding a column?. if yes share the screenshot of the issue.
3. Kindly ensure the reported issue by clearing the browser and NuGet cache.
4. If possible share the simple issue reproducible sample or try to reproduce the reported issue in provided sample.

 

Above requested details will be very helpful for us to validate the reported issue at our end and provide a solution as early as possible.  

 

Regards, 

Vignesh Natarajan  

  

[Marcelo]

Hello,

We have enabled the EnablePersistence option, then we disabled it to manage the status of the grids, and apparently this is what is causing us problems. We still don't know how to solve it.

[Vignesh Natarajan]

Hi Marcelo,  

 

Thanks for the update.  

 

Query: “hen we disabled it to manage the status of the grids, and apparently this is what is causing us problems” 

 

As per your suggestion, we have enabled the Persistence in the previous provided sample and still we are unable to reproduce the reported issue at our end. Please find the modified sample from below  

Sample: https://www.syncfusion.com/downloads/support/forum/167593/ze/DataGrid_Client635103932.zip 

 

Kindly ensure the reported issue by clearing the browser cache and browser incognito mode.  If you are still facing the reported issue, kindly get back to us with the details requested in previous update along with video demonstration of the issue.  

 

It will be very helpful in analyzing the reported issue at our end and provide solution as early as possible.  

 

Regards, 

Vignesh Natarajan 

[Marcelo]

Hello,

I am attaching a video where I show that I clear the browser cache and the problem continues.

Please helpme.

Attachment: GridPersistence_d6b3f898.rar

[Vignesh Natarajan]

Hi Marcelo,  

 

Thanks for sharing the video demonstration.  

 

We have tried to reproduce the reported issue by replicating the Grid defined in the video demo (like GridLine, RowHeight etc). But we are still unable to reproduce the reported issue. Kindly refer the below sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167593/ze/DataGrid_Client776436875.zip 

 

So we need some more details about the issue you are facing. Kindly share the following details.  

 

1. Share your Grid code example along with column definition.
2. Are you facing any script error in browser console while hiding a column?. if yes share the screenshot of the issue.
3. If possible share the simple issue reproducible sample or try to reproduce the reported issue in provided sample.

 

Above details will be very helpful in validating the reported query at our end and provide solution as early as possible.  

 

Regards, 

Vignesh Natarajan  

[Marcelo]

Hello Vignesh,

This is the part of the razor code:

<div class="col-lg-12 control-section">

            <div class="content-wrapper">

                <div class="row" id="gridPrevisiones">

                    <SfGrid AllowReordering="true" ShowColumnChooser="true" ShowColumnMenu="true" AllowResizing="true"

                            @ref="Grid" DataSource="@previsiones" AllowExcelExport="true" AllowGrouping="true" ID="Prevision"

                            RowHeight="20"

                            AllowSorting="true" AllowPaging="true" AllowFiltering="true"

                            Toolbar="@Toolbaritems" GridLines="GridLine.Both">

                        <GridPageSettings PageCount="20" PageSizes="true" PageSize="20"></GridPageSettings>

                        <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>

                        <GridEvents OnToolbarClick="@ClickHandler" QueryCellInfo="QueryCellInfoHandler" OnActionBegin="ActionBegin"

                                    TValue="PresAnual"></GridEvents>

                        <GridFilterSettings Type="@Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>

                        <GridGroupSettings ShowGroupedColumn="true"></GridGroupSettings>

                        <GridEditSettings AllowDeleting="true" AllowEditing="true" Mode="@EditMode.Dialog" Dialog="DialogParams">

                            <Template>

                                @{

                                    var prev = (context as PresAnual);

                                    <div>

                                        <div class="form-row">

                                            <div class="form-group col-md-6">

                                                <label class="e-float-text e-label-top">Producto:</label>

                                                <br />

                                                <SfTextBox ID="CG_ART" @bind-Value="@(prev.CG_ART)" Enabled="false"></SfTextBox>

                                            </div>

                                            <div class="form-group col-md-6">

                                                <label class="e-float-text e-label-top">Descripcion del Producto:</label>

                                                <br />

                                                <SfTextBox ID="DES_ART" @bind-Value="@(prev.DES_ART)" Enabled="false"></SfTextBox>

                                            </div>

                                        </div>

                                        <div class="form-row">

                                            <div class="form-group col-md-6">

                                                <label class="e-float-text e-label-top">Unidad:</label>

                                                <br />

                                                <SfTextBox ID="CG_ART" @bind-Value="@(prev.UNID)" Enabled="false"></SfTextBox>

                                            </div>

                                            <div class="form-group col-md-6">

                                                <label class="e-float-text e-label-top">Cantidad Pedida:</label>

                                                <br />

                                                <SfNumericTextBox ID="Codigo" Format="N" @bind-Value="@(prev.CANTPED)" Enabled="true"></SfNumericTextBox>

                                            </div>

                                        </div>

                                        <div class="form-row">

                                            <div class="form-group col-md-6">

                                                <label>Fecha Prevista:</label>

                                                <br />

                                                <SfDatePicker ID="FE_PED" @bind-Value="@(prev.FE_PED)" Enabled="true" Placeholder="Fecha Prevista"></SfDatePicker>

                                            </div>

                                        </div>

                                    </div>

                                }

                            </Template>

                        </GridEditSettings>

                        <GridColumns>

                            <GridColumn Field=@nameof(PresAnual.CG_ART) HeaderText="Producto" TextAlign="TextAlign.Left" Width="30px"></GridColumn>

                            <GridColumn Field=@nameof(PresAnual.DES_ART) HeaderText="Descripcion del Producto" TextAlign="TextAlign.Left" Width="30px"></GridColumn>

                            <GridColumn Field=@nameof(PresAnual.UNID) HeaderText="Unidad" TextAlign="TextAlign.Left" Width="30px"></GridColumn>

                            <GridColumn Field=@nameof(PresAnual.CANTPED) Format="N" HeaderText="Cantidad Pedida" TextAlign="TextAlign.Left" Width="30px"></GridColumn>

                            <GridColumn Field=@nameof(PresAnual.FE_PED) HeaderText="Fecha Prevista" Format="dd/MM/yyyy" TextAlign="TextAlign.Left" Width="30px"></GridColumn>

                        </GridColumns>

                    </SfGrid>

                </div>

            </div>

        </div>

This happens to me in all the grids of the application

Thanks.

[Marcelo]

I just realized that this is solved

if (args.RequestType == Syncfusion.Blazor.Grids.Action.ColumnState)

             {

                 await Grid.AutoFitColumnsAsync ();

                 

             }

[Marcelo]

Excuse me, it still doesn't work.

[Vignesh Natarajan]

Hi Marcelo,  

 

Thanks for the sharing the requested details.  

 

Kindly refer the below sample which we have prepared using your code example. We have validated the reported issue in below sample and we are not able to reproduce the reported issue at our end.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/167593/ze/DataGrid_Client-1903532012.zip 

 

In the shared code example, we could not find any code related to State maintenance. Are you facing this issue with enable persistence alone or in normal Grid definition itself. Kindly share more details about the issue. A simple issue reproducible sample will very helpful for us to validate the reported query at our end provide a better solution as early as possible.  

 

Regards, 

Vignesh Natarajan 

[Marcelo]

Hi Vignesh,

As I have not been able to find a solution I have prepared a sample similar to our project. This project is logged in and connected to a database. I decided to leave it as close to the original project as possible so you can tell me how to fix it.

On the index page you can find a grid connected to the MS SQL database.

Thanks.

Please, help me.

Attachment: SupplyChain__copia_cf5d1b92.rar

[Rahul Narayanasamy]

Hi Marcelo, 

Thanks for sharing the sample. 

We have checked your shared sample and try to run the sample. Whether did we need any credentials for logging into the application? If yes, can you share credentials or other details to login to the application. So we can check the problem further at our end. 

Regards, 

Rahul 

[Marcelo]

Hello, Just now I see your answer, I did not get the notification, excuse me. The credentials are user: USER and password Admin123

Please also try it without login

[Vignesh Natarajan]

Hi Marcelo,  

Thanks for sharing the credentials.  

But still we are facing trouble logging into your application. Kindly refer the below video demonstration for the issue we are facing.  

Video: https://www.syncfusion.com/downloads/support/forum/167593/ze/Login-2122710185.zip 

Kindly share a simple sample or sample without login to validate the reported query at our end.   

Regards, 

Vignesh Natarajan 

[Marcelo]

Hola Vignesh,

I share a new application: 

1) with css and sass 

2) No database 

3) check error when hiding columns.

Thanks.

Attachment: SupplyChain__copia_6a73ea20.rar

[Vignesh Natarajan]

Hi Marcelo,  

 

Thanks for sharing the issue reproducible sample.  

 

Query: “check error when hiding columns.” 

 

We are able to reproduce the reported issue in the provided sample and on further validation we found that issue occur due to theme file referred in the index.html file. We have ensured the issue by changing the theme file referred with our default (embedded in NuGet) fabric theme and we are able to resolve the reported issue.  

 

Kindly refer the below modified sample for your reference 

 

<link rel='nofollow' href="manifest.json" rel="manifest" /> 

    <link async rel='nofollow' href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" /> 

    <link rel="apple-touch-icon" sizes="512x512" rel='nofollow' href="logo_aerre.jpg" /> 

    <link async rel='nofollow' href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> 

    <script src="FuncionesJavaScript.js"></script> 

    <link defer rel='nofollow' href="css/font-awesome/font-awesome.css" rel="stylesheet" /> 

    <!--<link rel='nofollow' href="css/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" /> 

    <link rel='nofollow' href="css/themify-icons/themify-icons.css" rel="stylesheet" />--> 

    <link defer rel='nofollow' href="css/animate.css" rel="stylesheet" /> 

    <link defer rel='nofollow' href="css/style.css" rel="stylesheet" /> 

    <!--<link defer rel='nofollow' href="css/default-dark.css" id="theme" rel="stylesheet" />--> 

    <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/fabric.css" rel="stylesheet" /> 

    <link defer rel='nofollow' href="css/pages.css" rel="stylesheet" /> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167593/ze/SupplyChain_-_copia1956662067.zip 

 

Kindly share more details about the theme file you have referred in your application to validate the reported issue further at our end.   

 

Regards, 

Vignesh Natarajan 

[Marcelo]

Hi Vignesh, 

First thank you very much for the solution. 

We have purchased a template to add to our website, that theme file corresponds to a template. 

 We do not like to use fabric there is possibility to use material? 

Thanks.

[Vignesh Natarajan]

Hi Marcelo,  

 

Thanks for the update.  

 

Query: “We do not like to use fabric there is possibility to use material? ” 

 

Yes, you can use our material theme to achieve your requirement. We have configured our theme files as per Grid component. (i.e.) While hiding a column, “e-hide” class name will be added to td element and in our theme file based on e-hide class name it will be hidden using CSS styles.  

 

Please find the list of built in theme file support for Blazor Grid component from below  

 

https://blazor.syncfusion.com/documentation/appearance/themes  

 

https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference – CDN theme file 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan