1. Home
  2. Forum
  3. ASP.NET MVC
  4. Loading Grid is very slow

Loading Grid is very slow

i have a partial view that contain the plugin of the grid when i try to load it, it takes many secondes to be showed.

this is how i configured my grid:

@(Html.EJ().Grid<object>("FlatGrid")
                    .Datasource((System.Data.DataTable)ViewBag.dataSource)
                    .AllowScrolling()
                    .AllowPaging()
                    .PageSettings(p => { p.PageSize(ViewBag.pageSize); p.PageSizeList(new List<int>() { 10, 20, 50, 100 }); })
                    .EnableAltRow(false)
                    .ScrollSettings(col => { col.Width("100%").Height("auto"); })
                    .ShowColumnChooser()
                    //.AllowGrouping() // Grouping désactivé à cause des colonnes fixées et du paginate.
                    .AllowMultiSorting()
                    .AllowSorting()
                    .AllowReordering()
                    .AllowFiltering()
                    .AllowResizing()
                    .IsResponsive()
                    .MinWidth(1)
                    .AllowSelection()
                    .SelectionType(SelectionType.Multiple)
                    .ClientSideEvents(evt => evt.QueryCellInfo("queryCellInfo"))
                    .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
                    .ToolbarSettings(toolbar =>
                    {
                        toolbar.ShowToolbar(true)
                        .CustomToolbarItems(new List<object>()
                        {
//"Expand",
//"Collapse",
//new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#buttonRefresh" },
new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#buttonAjout" },
new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#buttonDetail" },
new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#buttonDelete" },
                        })
                        .ToolbarItems(items =>
                        {
                            items.AddTool(ToolBarItems.Search);
                        });
                    })
                    .ClientSideEvents(evt => evt.DataBound("databound").ActionComplete("actioncomplete").ToolbarClick("onToolbarClick"))
                    .Columns(ViewBag.cols)


3 Replies
VN Vignesh Natarajan Syncfusion Team May 23, 2018 12:06 PM UTC

Hi Bassem, 

Thanks for using Syncfusion products. 

According to your query you are facing issue (“It takes time to load the grid”) while rendering the grid in the partial view. We have prepared a sample using your code snippet and Grid is rendered within two seconds. We are not able to reproduce the reported issue at our end.  

Kindly download the sample from below link 


Refer the below screenshot for the output 

 

So kindly share the following details to reproduce the reported issue at our end.  

  1. You have used dataBound event and rendered using partial views . so kindly share the code snippet how you have rendered the Grid using partial view?
  2. You have bounded the columns from server side. Share how many columns you are trying to bound to grid from the server side if possible share the server side code for rendering the grid columns..
  3. Kindly share the detail how many seconds does it take to load the Grid and how many records you are trying to bound to grid at once?
  4. If possible try to reproduce the reported issue in provided sample or try to provide issue reproducible sample.

Regards, 
Vignesh Natarajan   
 


BB Bassem Ben ALI May 23, 2018 01:25 PM UTC

The colum's number change because my grid is generic.In all the application, i use the same grid.
i invoke the load of the grid by clicking on the menu with this javascript function:

function OnNodeSelect(args) {
    var treeview = $("#treeViewMenu").data("ejTreeView");
    var selectedNode = treeview.getSelectedNode();
    var idSelected = args.id;
    var isTable = true;

    treeview && treeview.unselectNode(selectedNode);
    if (args.parentId === undefined) {
        if ($("#treeViewMenu").ejTreeView("isExpanded", selectedNode)) {
            treeview && treeview.collapseNode(selectedNode);
        } else {
            treeview && treeview.expandNode(selectedNode);
        }
    } else {
        isTable = this.getTreeData(idSelected)[0].IsTable;

        $('#partial').html('<div id="loaderModalConnection" class="loader-centerd-screen mx-auto text-center"></div>');

        $.ajax({
            url: urlGrid,
            data: {
                'tableOrFamillyId': idSelected,
                'tableOrFamillyName': args.value,
                'isTable': isTable
            }
        }).done(function (result) {
            if (result)
                $("#partial").html(result);
            else
                window.location.replace("/");
        }).fail(function (result) {
            console.log("fail");
        });
    }
}

.My server side code is:

        public async Task<ActionResult> Grid(int tableOrFamillyId, string tableOrFamillyName, bool isTable)
        {
            if (!SessionHelper.IsExisting())
            {
                HomeController.SessionExpired = true;
                return null;//RedirectToAction("index", "Home");
            }
            int idLang = SessionHelper.IdLangSession();
            DataTable table = new DataTable("table");
            List<Column> cols = new List<Column>();
            DataSet setTable = new DataSet();

            using (var client = new HttpClient())
            {
                ViewBag.Title = tableOrFamillyName;
                SessionHelper.Set("tableOrFamillyName", tableOrFamillyName);
                ViewBag.tableOrFamillyId = tableOrFamillyId;
                ViewBag.isTable = isTable;
                ViewBag.UserInfoContentList = SessionHelper.Get<string>("nameUser");
                ViewBag.UserProjectNameContentList = SessionHelper.Get<string>("nameProject");
                ViewBag.MenuContentList = SessionHelper.Get<List<MenuModel>>("menu");
                ViewBag.VersionBuild = Constants.versionBuild;

                client.BaseAddress = new Uri(ConfigurationManager.AppSettings["BaseUrl"]);

                // récupération des colonnes
                var resColConf = await client.GetAsync(String.Format("{0}?tableId={1}&isTable={2}&login={3}&idLang={4}&projectId={5}", Constants.RouteApiColumnsConf, tableOrFamillyId, isTable, SessionHelper.Get<string>("userLogin"), idLang, SessionHelper.Get<int>("idProject")));
                if (resColConf.IsSuccessStatusCode)
                {
                    GridOperation gridOperation = new GridOperation();
                    dynamic resultAnonyme = await gridOperation.ConstuctColumnGrid(resColConf, tableOrFamillyId);
                    table = resultAnonyme.table;
                    cols = resultAnonyme.cols;
                }
                else
                {
                    ViewBag.MessageError = JsonConvert.DeserializeObject<Dictionary<string, string>>(resColConf.Content.ReadAsStringAsync().Result)["Message"];
                }

                // récupération des éléments
                JObject json = new JObject
                {
                    ["tableId"] = tableOrFamillyId,
                    ["isTable"] = isTable,
                    ["idLang"] = idLang,
                    ["login"] = SessionHelper.Get<string>("userLogin"),
                    ["projectID"] = SessionHelper.Get<int>("idProject")
                };
                var resElem = await client.PostAsJsonAsync(Constants.RouteApiGetElem, json);
                if (resElem.IsSuccessStatusCode)
                {
                    setTable = JsonConvert.DeserializeObject<DataSet>(resElem.Content.ReadAsStringAsync().Result);
                    table = setTable.Tables[0];
                }
                else
                {
                    ViewBag.MessageError = JsonConvert.DeserializeObject<Dictionary<string, string>>(resElem.Content.ReadAsStringAsync().Result)["Message"];
                }

                ViewBag.cols = cols;
                ViewBag.DataSource = table;
                
                if (Request.Cookies[Constants.CoockiesNamePageSize + "-" + SessionHelper.Get<string>("nameSchema")] == null)
                {
                    // Initialisation du pageSize de la grid et stockage dans les coockies
                    ViewBag.pageSize = 10;
                    Response.Cookies[Constants.CoockiesNamePageSize + "-" + SessionHelper.Get<string>("nameSchema")].Value = "10";
                    Response.Cookies[Constants.CoockiesNamePageSize + "-" + SessionHelper.Get<string>("nameSchema")].Expires = DateTime.Now.AddDays(365);
                }
                else
                {
                    // Récupération dans les coockies du pageSize de la grid 
                    ViewBag.pageSize = Convert.ToInt32(Server.HtmlEncode(Request.Cookies[Constants.CoockiesNamePageSize + "-" + SessionHelper.Get<string>("nameSchema")].Value));
                }
                TableSource = table;
                SessionHelper.Set("table", table);

                // récupération du nombre d'utilisateur connectés
                var resOnlineUsers = await client.GetAsync(String.Format("{0}?project={1}", Constants.RouteApiGetOnlineUsers, SessionHelper.Get<string>("nameSchema")));
                if (resOnlineUsers.IsSuccessStatusCode)
                {
                    var nbrUser = JsonConvert.DeserializeObject<int>(resOnlineUsers.Content.ReadAsStringAsync().Result);
                    ViewBag.OnlineUsers = String.Format(Resources.Resources.allUsersOnlineString, nbrUser);
                }

                UserController userController = new UserController();
                Object jsonPermissions = await userController.GetPermissions(0);
                ViewBag.Permissions = jsonPermissions;
            }

            return PartialView("grid");
        }













 



Attachment: view_c013142.7z

TS Thavasianand Sankaranarayanan Syncfusion Team May 24, 2018 12:27 PM UTC

Hi Bassem, 

We have checked your given code example and we are unable to reproduce the reported issue “Grid takes more time to render” from our end. 

We have prepared a video demonstration of not reproduction of the issue. 


We have prepared a sample based on your given code example and it can be downloadable from the below location. 


Please provide the following details for better assistance. 

  1. Share a video demonstration of the issue.
  2. In your Grid code example you have mention queryCellInfo event, if you are using many columns with some actions performed in querycellinfo then it will took time.
  3. Share what action that you have perform in querycellinfo event of ejGrid control.  
  4. Share Essential Studio version and browser version details.
  5. If possible share issue reproducible sample or reproduce the issue in the attached sample.

Regards, 
Thavasianand S. 


Loader.
Up arrow icon