No update of remote column when data is "big"

Hello,

I have the following Grid:

<SfGrid @ref="Grid" TValue="Stores" Query="@GridQuery" AllowPaging="true" AllowSorting="true" AllowReordering="false"
AllowResizing="true" AllowFiltering="true" AllowGrouping="false" ShowColumnChooser="false" Toolbar="@Tool">
<GridEvents OnActionBegin="ActionBeginHandler" OnActionFailure="ActionFailureHandler" TValue="Stores"></GridEvents>
<SfDataManager Url=@($"{apiURL}/stores") Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true"></SfDataManager>
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ShowDeleteConfirmDialog="true" Mode="EditMode.Dialog"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(Stores.Id) HeaderText="Id" IsPrimaryKey="true" IsIdentity="true" AllowEditing="false" Visible="false" ShowInColumnChooser="false"></GridColumn>
<GridColumn Field=@nameof(Stores.StoreId) HeaderText="Identificación" AutoFit="true" FilterSettings="@ContainsFilter"></GridColumn>
<GridColumn Field=@nameof(Stores.StoreFullName) HeaderText="Nombre" AutoFit="true" FilterSettings="@ContainsFilter"></GridColumn>
<GridColumn Field=@nameof(Stores.DivsId) HeaderText="División" AutoFit="true" AllowFiltering="false">
<Template>
@{
var storeContext = (context as Stores);
if (storeContext.Divs != null)
{
<span>@storeContext.Divs.DivName</span>
}
}
</Template>
<EditTemplate>
<span>División</span>
<SfDropDownList ID="DivsId" @bind-Value="@((context as Stores).DivsId)" TItem="Divs" TValue="int" Placeholder="División">
<SfDataManager Url=@($"{apiURL}/divs") Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true" Offline="true"></SfDataManager>
<DropDownListFieldSettings Value="Id" Text="DivName"></DropDownListFieldSettings>
</SfDropDownList>
</EditTemplate>
</GridColumn>
@* <GridForeignColumn Field=@nameof(Stores.DivsId) HeaderText="División" TValue="Divs" ForeignKeyField="Id" ForeignKeyValue="DivName"
EditorSettings="@StoresEditParams" AutoFit="true">
<SfDataManager Url=@($"{apiURL}/divs") Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true"></SfDataManager>
</GridForeignColumn> *@
<GridColumn Field=@nameof(Stores.StoreGroupsId) HeaderText="Grupo" AutoFit="true" AllowFiltering="false">
<Template>
@{
var storeContext = (context as Stores);
if (storeContext.StoreGroups != null)
{
<span>@storeContext.StoreGroups.GroupName</span>
}
}
</Template>
<EditTemplate>
<span>Grupo</span>
<SfDropDownList ID="StoreGroupsId" @bind-Value="@((context as Stores).StoreGroupsId)" TItem="StoreGroups" TValue="int?" Placeholder="Grupo">
<SfDataManager Url=@($"{apiURL}/storegroups") Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true" Offline="true"></SfDataManager>
<DropDownListFieldSettings Value="Id" Text="GroupName"></DropDownListFieldSettings>
</SfDropDownList>
</EditTemplate>
</GridColumn>
</GridColumns>
</SfGrid>

The table has two remote references: Divs (Divisions) and StoreGroups. Both tables have a field to store an image (logo). The Grids retrieves and updates the info for those remote tables. However, when the remote tables have image logos of around 25kbytes, changing values of DivsId and StoreGroupsId does not longer work in the Grid. If the images are around 5kbytes, it works ok. I have tested with a couple of records in each table (i.e., getting around 50k of image data). The app does not throw any exception. Is this an identified problem?

In order to do a quick fix, how can I make a Grid Query that only retrieves specific fields (leaving out the image data)? The current Query is:

public Query GridQuery { get; set; } = new Query().Expand(new List<string>() { "Divs", "StoreGroups" });

Thanks,

Erick




5 Replies 1 reply marked as answer

VN Vignesh Natarajan Syncfusion Team August 20, 2020 10:39 AM UTC

Hi Erick,  
 
Thanks for contacting Syncfusion support.  
 
Query: “However, when the remote tables have image logos of around 25kbytes, changing values of DivsId and StoreGroupsId does not longer work in the Grid. If the images are around 5kbytes, it works ok. Is this an identified problem? 
 
We have analyzed your query along with provided code example and found that you have tried to render the Column with ForeignKey behavior. So you have used Column Template to display the corresponding name in DivsId and StorGroupsId column. Also used EditTemplate to render the DropDownList with text and value pair. Now, we need to update the other complex property like Div and Grid on selecting a value from dropdownlist in OnActionBegin event of the Grid. 
 
Reported issue might occur when updating the value in OnActionBegin events. So overcome this, we suggest you to achieve your requirement using GridForeignColumn. But we are facing some issues with Editor control of ForeignKey Column. Hence we have achieved your requirement using GridForeignColumn and EditTemplate.  
 
Refer the below code example.        
 
<GridForeignColumn Field=@nameof(CustomerViewModel.DivsId) HeaderText="División" TValue="Divs" ForeignKeyField="Id" ForeignKeyValue="DivName" AutoFit="true"> 
           <ChildContent> 
               <SfDataManager Url="http://localhost:64956/odata/divs" Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true"></SfDataManager> 
           </ChildContent> 
           <EditTemplate> 
               <span>División</span> 
               <SfDropDownList ID="DivsId" @bind-Value="@((context as CustomerViewModel).DivsId)" TItem="Divs" TValue="int" Placeholder="División"> 
                   <SfDataManager Url="http://localhost:64956/odata/divs" Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true" Offline="true"></SfDataManager> 
                   <DropDownListFieldSettings Value="Id" Text="DivName"></DropDownListFieldSettings> 
               </SfDropDownList> 
           </EditTemplate> 
       </GridForeignColumn> 
  
  
       <GridForeignColumn Field=@nameof(CustomerViewModel.StoreGroupsId) HeaderText="Grupo" TValue="StoreGroups" ForeignKeyField="Id" ForeignKeyValue="GroupName" AutoFit="true"> 
           <ChildContent> 
               <SfDataManager Url="http://localhost:64956/odata/groups" Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true"></SfDataManager> 
           </ChildContent> 
           <EditTemplate> 
               <span>Grupo</span> 
               <SfDropDownList ID="StoreGroupsId" @bind-Value="@((context as CustomerViewModel).StoreGroupsId)" TItem="StoreGroups" TValue="int?" Placeholder="Grupo"> 
                   <SfDataManager Url="http://localhost:64956/odata/groups" Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true" Offline="true"></SfDataManager> 
                   <DropDownListFieldSettings Value="Id" Text="GroupName"></DropDownListFieldSettings> 
               </SfDropDownList> 
           </EditTemplate> 
       </GridForeignColumn> 
 
 
Using the above code example, we are able to update the values without any error regardless of the Image size. We have also ensure the issue by uploading the image size of 50kb and above.  
 
Kindly download the sample from below  
 
 
Note: Sample has two parts. Run the OdataV4Service first and then run BlazorApp to bind the data correct to Grid.  
 
 If you are still facing the issue, kindly get  back to us with below requested details.  
 
  1. Share full Grid code example.
  2. Share the details about the OnActionBegin event where you have updated the details od Div and Groups complex object.
  3. If possible try to reproduce the reported issue in provided sample and revert back to us.
 
Above requested details will be helpful for us to validate the reported issue at our end and provide solution as early as possible.   
 
Query: “ how can I make a Grid Query that only retrieves specific fields (leaving out the image data)? 
 
If you want to define specific column to fetched from OdataV4 service, then we suggest you to achieve your requirement using Select query. Refer the below code example  
 
public Query GridQuery { getset; } = new Query().Expand(new List<string>() { "Div""Group" }).Select(new List<string>() { "Id""Name" });
 
 
Above highlighted will fetch only the Id and Name column values. Please get back to us if you have further queries.  
  
Regards, 
Vignesh Natarajan 



ER Erick September 3, 2020 04:03 AM UTC

Hello Vignesh,

I have updated my code as you suggested, but still does not work when I have large images. My ActionBeginHandler is not really used right now:

public void ActionBeginHandler(ActionEventArgs<Stores> args)
{
@* if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)
{
Console.WriteLine(args.RequestType);
} *@
}

In order to get rid of the image data (not used at the moment) I tried to query only for needed fields in SfDropDownList as follows:

<SfDropDownList ID="DivsId" @bind-Value="@((context as Stores).DivsId)" TItem="Divs" TValue="int" Placeholder="División"
Query=@(new Query().Select(new List<string>() {"Id", "DivId", "DivName"}))>
<SfDataManager Headers=@HeaderData Url=@($"{apiURL}/divs") Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true" Offline="true"></SfDataManager>
<DropDownListFieldSettings Value="Id" Text="DivName"></DropDownListFieldSettings>
</SfDropDownList>

However, I see that the dropdown component is not using the Query defined and it's sending GET https://localhost:60000/api/odata/divs HTTP/1.1. Is there any other way to select only specific fields in SfDropDownList?

Thanks,

Erick





VN Vignesh Natarajan Syncfusion Team September 4, 2020 09:40 AM UTC

Hi Erick,  
 
Thanks for the update.  
 
Query: ” I see that the dropdown component is not using the Query defined and it's sending GET && Is there any other way to select only specific fields in SfDropDownList? 
 
In the previous update, we have suggested you to use Select Query to fetch specific fields from server. Query has to be defined for the Grid control, since the Image field is existed in Grid datasource. So kindly define the Select Query to Grid Compoennt to fetch the values of specific columns from its server.  
 
Refer the below code example. We have removed the Image column and used Select query for remaining Grid component columns.  
 
<SfGrid ID="Grid" @ref="Grid" AllowFiltering="true" TValue="CustomerViewModel" Toolbar="@ToolbarItems" Height="100%" Query="@GridQuery" AllowPaging="true" AllowSorting="true"> 
. . . . . . . . . 
</SfGrid> 
  
@code{ 
    public Query GridQuery { getset; } = new Query().Expand(new List<string>() { "Div""Group" }).Select(new List<string> { "Id""DivsId""StoreGroupsId""Gender""Name" }); 
    SfDataManager dm { getset; } 
 
      
Kindly download the modified (without Image column) sample from below  
 
 
If you are still facing the reported issue, kindly get back to us with following details.  
 
  1. Share the video demonstration of the reported issue along with replication procedure.
  2. Share the Model classes of the grid as well as DropDownList controls.
  3. Share the updated details about the column you have used in the Grid.
  4. Kindly bind the OnActionFailure event to Grid and share the details of the error while saving the record.
  1. If possible try to reproduce the reported issue in the provided sample and revert back to us
  2. Or share the issue reproducible sample.
 
Above requested details will be helpful for us to validate the reported issue at our end and provide solution as early as possible.  
 
Regards,
Vignesh Natarajan
 


Marked as answer

ER Erick September 14, 2020 05:13 PM UTC

Hello Vignesh,

I tested your app and indeed works ok. So I copied you Grid in my application (running your API as backend) and it had the same error. I found out that SignalR disconnects when using a dropdown list. In order to detect the specific problem, I enabled SignalR detailed error with this code in Startup:

            services.AddSignalR(o =>
            {
                o.EnableDetailedErrors = true;
            });

The detailed error is:  SignalR + The maximum message size of 32768B was exceeded. #15085

Seems that other components in my app make SignalR messages exceed the configured limit.

Finally, to solve the issue, I disabled Max Message Size with (also in Startup):

            services.Configure<HubOptions>(options =>
            {
                options.MaximumReceiveMessageSize = null;
            });

Now it works ok. Thanks a lot for your help.

Regards,

Erick






VN Vignesh Natarajan Syncfusion Team September 15, 2020 04:10 AM UTC

Hi Erick,  

Thanks for the update. 

We are glad to hear that you have resolved your query on your own using our sample.  

Kindly get back to us if you have further queries.  

Regards, 
Vignesh Natarajan  
  


Loader.
Up arrow icon