We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Server side Paging & Sorting & Filtering / Crud / Localize "Add/Update/Delete" buttons & Decrease the size of ejs.min.js

Hi all,
Thanks for your support. I have four questions. I am developing a Sql server based blazor app, using EF and service layer on top of EF.
How can I perform the following in my Blazor app:
  1. Server side Paging(PageSize and PageIndex) & Sorting & Filtering for the grid , using my server-side service and without using DataManagerRequest or CustomAdaptor. I have a service class, attached , not Api , how to integrate these functions with the grid paging & sorting & filtering functions . I want to integrate all to my "CustomerFilter" class in Razor, if available.
  2. Server side Add/Update/Delete with integration with the grid Add/Update/Delete buttons
  3. Localize the Add/Update/Delete buttons
  4. The file "ejs.min.js" is a very large file for an app to work on mobile. How can I decrease its size. If it support "Tree Shaking", how can I do it?
A sample for my app is attached containing the sevice class and the Sql server db files. Kindly download the sample from below link

Attachment: BlazorAppEF_c687ea67.zip

6 Replies

RS Renjith Singh Rajendran Syncfusion Team September 23, 2019 11:14 AM UTC

Hi Mohamed, 

Thanks for contacting Syncfusion support. 

Query 1 & Query 2 : Server side Paging(PageSize and PageIndex) & Sorting & Filtering for the grid && Server side Add/Update/Delete 
We could see that you would like to handle these operations in a custom way. Using a “CustomAdaptor” is the preferable way to achieve this requirement. Please refer the documentation link below, 
 
If you don’t want to use CustomAdaptor, then you need to handle these by using the ActionEvents(“OnActionBegin” and “OnActionComplete”). These events will be triggered each time you perform these actions. So in these event handlers you can prevent the default Grid action, and generate your own custom query and process at the server. But this is not a recommendable way. As there will be time delays and Grid won’t wait for these delays, so if there is any time delay at your service then those will not be reflected in Grid 

So based on this requirement we recommend you to use the “CustomAdaptor” feature of Grid. Could you please provide us details regarding why you don’t want to use the CustomAdaptor. If you face difficulties in using custom adaptor then kindly let us know, we will assist you regarding this. 
 
Query 3 : Localize the Add/Update/Delete buttons 
We have Localization support in Syncfusion Blazor Grid. We suggest you to load the corresponding culture json files in your application to achieve this requirement. Please refer the documentation link below, 

Please refer the code below, 

 
@using Microsoft.JSInterop 
@using Syncfusion.EJ2.Blazor.Grids 
 
<EjsGrid DataSource="@Orders" AllowSorting="true" AllowPaging="true" AllowGrouping="true" Toolbar="@(new List<string>() { "Add","Update", “Delete”})"> 
    ... 
</EjsGrid> 
 
@code{ 
    [Inject] 
    IJSRuntime JsRuntime { get; set; } 
    ... 
    protected override void OnAfterRender(bool firstRender) 
    { 
        this.JsRuntime.Ejs().LoadLocaleData("wwwroot/de.json").SetCulture("de"); 
    } 
 
} 

 
We have uploaded the locale culture files in the below GitHub link. Please refer the link below, 
 
And the CLDR data files for the corresponding culture files is available as npm package. So, you can install it through the below command to our package. 


npm install cldr-data 


Query 4 : The file "ejs.min.js" is a very large file for an app to work on mobile. 
We suggest you to use the Custom Resource Generator (CRG) utility. This helps to generate the minified and unminfied versions of Syncfusion EJ2 scripts and styles. You can select the required components and then generate and download the unminified script file from CRG. Please find the CRG online link below, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



MO Mohamed September 24, 2019 07:30 AM UTC

Dear Renjith , 
Many thanks for your answers.

For Query 1  , I think my question was not clear enough
Basically I can not use your CustomAdaptor the way described in your docs here:
https://ej2.syncfusion.com/blazor/documentation/grid/custom-binding/?_ga=2.187571880.1250830029.1569307338-605520220.1569307338

because I have more than 200 services classes and all of them have custom logic for paging & sorting and other crud operations
For Query 1,just I want -for example - to bind the changed page size of Syncfusion Grid to the variable(CustomerFilter.PageSize) 
and the current syncfusion grid to CustomerFilter.PageIndex and I want to set the total no pages in your Syncfusion so as the pager works well
I am asking if I can use the function "public override object Read(DataManagerRequest dm, string key = null)" in this CustomAdaptor without creating a class "public class CustomAdaptor" in the razor view , in a similar way for the Telerik grid, described  here:
     https://docs.telerik.com/blazor-ui/components/grid/manual-operations

For Query 2,
I want to use the grid in a similar way described here :
https://docs.telerik.com/blazor-ui/components/grid/editing/overview

For Query 3 : (Localize the Add/Update/Delete buttons )
I have a centralized -server side - resource files for text localization, How can I use it with Syncfusion grid buttons?

For Query 4, 
Thanks for the answer and It is OK ,I just see the last version of the file "ejs.min.js" there is not the lastest version of the file



RS Renjith Singh Rajendran Syncfusion Team September 26, 2019 05:15 PM UTC

Hi Mohamed, 

Thanks for your update. 

Query 1 && Query 2 : Server side Paging(PageSize and PageIndex) & Sorting & Filtering for the grid && Server side Add/Update/Delete 
We have analyzed the provided documentations you have shared with us. We would like to inform you that, our way of custom binding behaves the same like what is provided in the shared documentations link. Its their way of architecture and we have our own way of architecture to perform the custom binding in Grid using custom adaptor. 

We would like to explain you the behavior of Syncfusion custom binding. We have Read/ReadAsync, Insert/InsertAsync, Remove/RemoveAsync, Update/UpdateAsync, BatchUpdate/BatchUpdateAsync methods to perform the Search, Filter, Sort, Paging, CRUD actions in a custom way(you can use your own custom queries to process the data). In our documentations, we have showed custom binding by performing these actions using our inbuilt methods(PerformSearching, PerformSorting, PerformFiltering, PerformSkip, PerformTake) of DataOperations class based on the query received from the DataManagerRequest. 

But you can use your own CustomFilter or methods or your own custom action codes to process your datasource instead of using our inbuilt methods and finally return the result to be bound to Grid.  

Please find the DataManagerRequest properties from the below screenshot.  

 

Please refer the code below, 

 
        public class CustomAdaptor : DataAdaptor 
        { 
            ... 
            public override object Read(DataManagerRequest dm, string key = null)         //Handle the sort, filter, search, paging actions here 
            { 
                IEnumerable<OrdersDetails> DataSource = order; 
                if (dm.Search != null && dm.Search.Count > 0) 
                { 
                    //You can handle your custom Search action codes instead of using PerformSearching 
                } 
                if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
                { 
                    //You can handle your custom Sort action codes instead of using PerformSorting 
               } 
                if (dm.Where != null && dm.Where.Count > 0) //Filtering 
                { 
                    //You can handle your custom filter action codes instead of using PerformFiltering 
               } 
                int count = DataSource.Cast<OrdersDetails>().Count(); 
                if (dm.Skip != 0) 
                { 
                    //You can handle your custom skip action codes for paging instead of using PerformSkip  
                } 
                if (dm.Take != 0) 
                { 
                   //You can handle your custom take action codes for paging instead of using PerformTake 
               } 
                return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;   //Finally return the result after your custom operations, as like Result and Count pair 
            } 
            public override object Insert(DataManager dm, object value, string key) 
            { 
                //Handle your custom insert operation and return the value 
                return value; 
            } 
            public override object Remove(DataManager dm, object value, string keyField, string key) 
            { 
                //Handle your custom delete operation and return the value 
                return value; 
            } 
            public override object Update(DataManager dm, object value, string keyField, string key) 
            { 
                //Handle your custom update operation and return the value 
                return value; 
            } 
              } 


Query 3 : (Localize the Add/Update/Delete buttons ) 
We are currently working on this query. We will update you more details on September 30, 2019. Until then we appreciate your patience. 

Query 4 : there is not the lastest version of the file 
We would like to inform you that the CRG website will not be refreshed for every patch releases. This will updated only on Essential studio volume and service pack releases. We have refreshed the CRG site to our latest version 17.3.9-beta. Please find the CRG link below, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 




RS Renjith Singh Rajendran Syncfusion Team September 30, 2019 11:14 AM UTC

Hi Mohamed, 

Thanks for your patience. 

Query 3 : (Localize the Add/Update/Delete buttons ) 
While using a centralized server for localization, you can use the WebClient to download the json file from the server and use it for applying localization. The downloaded file will be published in filepath. Then you can refer this path to apply localization. Please refer the below code snippet. 
 
protected override void OnAfterRender(bool firstRender)  
    {  
        string url = "http://cdn.syncfusion.com/content/json/de.json";  
        string filepath = @"D:ew.json";  
        using (WebClient json = new MyWebClient())  
        {  
            json.DownloadFile(url, filepath);  
        }  
        this.JsRuntime.Ejs().LoadLocaleData(filepath).SetCulture("de");  
    }  
 
In the above code, we have fetched the culture json file from an online cdn link and used the culture to be applied to the toolbar buttons in Grid. For your convenience, we have created the sample. Please download the sample form the below link. 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



AM Amar September 22, 2022 03:58 PM UTC

Hey, to avoid opening a different topic, I have a problem preventing automatic SfGrid sort.


I created a CustomAdaptor component where I have overriden all the methods to just return DataSource as is, but regardless, my Grid gets sorted automatically when clicking on the column.


How do I prevent automatic sorting but leave AllowSorting as true?



SP Sarveswaran Palani Syncfusion Team September 26, 2022 06:37 PM UTC

Hi Amar,


We're currently closed this ticket and create new forum query for the last update.


Kindly follow the following forum for more update - https://forumassist.syncfusion.com/177771


Regards,

Sarveswaran PK


Loader.
Live Chat Icon For mobile
Up arrow icon