Perfomance ejgrid touch mobile

18 Replies
6 Participants

Created by
CS Carmelo Scarpello

Platform
jQuery

Platform
jQuery

Control
ejGrid

Created On
May 24, 2018 08:37 AM UTC

Last Activity On
Jun 12, 2018 04:28 PM UTC

Want to subscribe?
SIGN IN

Good morning I'm testing the grid and I'm trying on a mobile device, but I do not have good performances during the scroll I can not figure out what to enable keeping properties FrozenColumns = "1" AllowSearching = "true" IsResponsive = "true" AllowSorting = " true "AllowScrolling =" true "AllowTextWrap =" true " under the code used

<div class="col-md-8">

<!--<h4 runat="server" id="H_TitleAvvisi" style='font-weight:bold;font-size:20px;' >Avvisi</h4>

<div id="charts"><div id="chartAgentiAvvisi" class="chart"></div></div>-->

<div class="col-md-12" runat="server" id="div2">

<h4 runat="server" id="H5" style='font-weight:bold;font-size:20px;' >OBIETTIVO</h4>

<%--<ToolbarSettings ShowToolbar="True" ToolbarItems="pdfExport"></ToolbarSettings>--%>

<ej:Grid ID="gr_Obiettivi" MinWidth="110" runat="server" AllowPaging="true" AllowSearching="true" AllowFiltering="false" AllowGrouping="false" IsResponsive="true" AllowSorting="true" AllowScrolling="true" AllowTextWrap="true"

CssClass="gridfont" Locale="it-IT" EnableTouch ="true" >

<ScrollSettings Height="100%" Width ="100%" EnableTouchScroll="true" FrozenColumns="1"></ScrollSettings>

<ToolbarSettings ShowToolbar="true" ToolbarItems="search"></ToolbarSettings>

<Columns>

<ej:Column Field="RagSoc" HeaderText="AGENTE" IsPrimaryKey="true" Width="120"></ej:Column>

<ej:Column Field="Obiettivo" HeaderText="OBIETTIVO" Width="70" DataType="Decimal" Format="{0:n2}"></ej:Column>

<ej:Column Field="NettoProgressivo" HeaderText="RAGGIUNTO" Width="70" DataType="Decimal" Format="{0:n2}" ></ej:Column>

<ej:Column Field="NettoProgressivoCoord" HeaderText="RAGGIUNTO (coord.)" Width="70" DataType="Decimal" Format="{0:n2}" ></ej:Column>

<ej:Column Field="Delta" HeaderText="%" Width="70" DataType="Decimal" Format="{0:n2}" ></ej:Column>

</Columns>

</ej:Grid>

</div>

Thanks in advance

18 Replies

CS Carmelo Scarpello May 25, 2018 03:35 PM UTC

Good afternoon doing other tests I set the following properties AllowPaging = "true" AllowSearching = "true" AllowFiltering = "false" AllowGrouping = "false" IsResponsive = "false" AllowSorting = "true" AllowScrolling = "false" AllowTextWrap = "false" CssClass = "gridfont" Locale = "it-IT" EnableTouch = "true" removing the property FrozenColumns = "1" because it seems that it can not exist only IsResponsive = "true" but I have to use AllowScrolling = "true". It seems more stable. But scrolling horizontally the column description moves before the selected row scrolls. Another anomaly that I noticed is that in responsive on mobile if the device is in vertical appears the scrool of 'height. Graazie for the help.

SE Sathyanarayanamoorthy Eswararao Syncfusion Team May 25, 2018 04:14 PM UTC

Hi Scarpello,

Thanks for contacting Syncfusion support.

Before we proceed with your query please confirm the following details.

1. Frozen columns are not supported when isResponsive is set as true.

2. Also if you are using the mobile device we suggest you to try enableResponsiveRow property which is used to render the grid in mobile view.

3. You have mentioned that scrolling horizontally the column description moves before the selected row scrolls. For this query please share the screenshot or video demo of the issue.

4. Please share the Essential studio versions.

Please refer the following documentation for more details of responsive grid.

https://help.syncfusion.com/aspnet/grid/responsive

https://help.syncfusion.com/aspnet/grid/responsive#responsive-row

Regards,

Sathyanarayanamoorthy

CS Carmelo Scarpello May 27, 2018 09:13 AM UTC

Good morning, ok for the Frozen columns property. For the rest I would like to use the grid as in the attached video also for tables with many columns I prefer the scroll. But on mobile the behavior is not fluid and does not flow well, both for the horizontal and vertical scroll, highlighting the problem of the previous message. Attached the sample video.

Attachment: WhatsApp_Video_20180527_at_10.55.02.mp4_8bed4b41.zip

TS Thavasianand Sankaranarayanan Syncfusion Team May 28, 2018 12:58 PM UTC

Hi Scarpello,

We have analyzed your query and we are able to reproduce the reported issue “Scrolling flow is not well while scroll through touch” from our end. In Essential JavaScript 1 we have using the individual scrollbar component for the scrolling in Grid and also we have done it through the jQuery events. Due to this some delay will occur. We have overcome the above issues in Essential JavaScript 2 and we have the native scrollbar for the Grid component. The scrollbar performances is more efficient than the Essential JavaScript 1. So, we suggest you to switch to Essential JavaScript 2.

Please refer the following documentation and online samples for ej 2 Grid component.

Doc link: https://ej2.syncfusion.com/16.1.37/documentation/grid/scrolling.html

Online sample: https://ej2.syncfusion.com/16.1.37/demos/#/material/grid/scrolling.html

Regards,

Thavasianand S.

CS Carmelo Scarpello May 29, 2018 09:17 AM UTC

Good morning, thanks for the solution I had not installed js2 yet I added the following code to be able to use the new libraries

</namespaces>

</assemblies>

</compilation>

but the visual studio compilation gives the following error

Severity Code Description Project File Line Suppression State

Error Could not load file or assembly 'Syncfusion.EJ2 Version \ = 16.1460.0.37 \, Culture \ = neutral \, PublicKeyToken \ = 3d67ed1f87d44c89' or one of its dependencies. The given assembly name or codebase was invalid. (Exception from HRESULT: 0x80131047) C: \ SPEPRG \ VISUAL STUDIO Community 2015 \ SpeeD_Web \ Web.config 64

Thanks for your help

TS Thavasianand Sankaranarayanan Syncfusion Team May 30, 2018 10:22 AM UTC

Hi Scarpello,

In this when you created this forum you have selected the ASP.NET Core platform. So, in our previous update we suggest you to use Essential JavaScript 2 Grid component.

But in last update you have referred the Syncfusion.EJ.WEB DLL in your sample. Essential JavaScript 2 is not supported in ASP.NET webforms.

Essential JavaScript 2 is support for ASP.NET MVC, ASP.NET Core, TypeScript or Javascript etc.

So, we suggest you to use the typescript or Javascript for the Essential JavaScript 2 Grid component and please find the below documentation link for further more information.

Link: https://ej2.syncfusion.com/16.1.37/documentation/grid/getting-started.html?lang=typescript

If you want to use ASP.NET Core then we suggest you to follow the below documentation link for Essential JavaScript 2.

Link: https://ej2.syncfusion.com/16.1.37/aspnet/documentation/grid/getting-started-core.html?syntax=tag

Regards,

Thavasianand S.

CS Carmelo Scarpello May 30, 2018 01:19 PM UTC

Good morning use aspx and cs pages with c # language.

From previous communications I was advised to use to solve the problem ej 2 grid component for that I was trying to use ej 2, otherwise I did not understand what to do.

Thanks in advance.

CS Carmelo Scarpello May 30, 2018 01:30 PM UTC

Good morning and to give more details I'm writing a website. I do not know the correct syntax to add jevascript 2 that I have installed anyway.

Thanks for your help, best regards.

CS Carmelo Scarpello May 30, 2018 01:37 PM UTC

Good morning, if I understood correctly I was wrong in my website to use:

Do I have to change web.config? thank you.

CS Carmelo Scarpello May 30, 2018 01:53 PM UTC

Goodmorning below the detail of the web.config file:

<! - <add namespace = "Syncfusion.EJ2" /> ->

</ Namespaces>

<add tagPrefix = "asp" namespace = "System.Web.UI.DataVisualization.Charting"

assembly = "System.Web.DataVisualization, Version = 4.0.0.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35" />

</ Controls>

</ Pages>

</ Assemblies>

</ Compilation>

Do I have to change web.config? thank you.

TS Thavasianand Sankaranarayanan Syncfusion Team May 31, 2018 12:54 PM UTC

Hi Scarpello,

Sorry for the inconvenience caused.

In Essential JavaScript 1 Grid the content and header has different tables. We have bind refresh scrolling event to the Grid header based on the Grid content. When we scroll the grid content the event get call for Grid header and header will move corresponding to the scrollbar presents. This will give some delay with Grid header to scroll and the same issue will occur in Essential JavaScript 2 Grid component also.

So, we are sorry for wrongly routing with the wrong updates about to use Essential JavaScript 2 to overcome this issue.

If you want to switch to Essential JavaScript 2 then we suggest you to follow the below links.

We suggest you look into our following product page for more details.

https://www.syncfusion.com/products/essential-js2

Demo page for ej2 Grid

http://ej2.syncfusion.com/15.4.17/demos/#/material/grid/default.html

Regards,

Thavasianand S.

CS Carmelo Scarpello June 1, 2018 11:19 AM UTC

Good morning I wanted to make a premise seeing the guides for JS 2 to then switch to use JS2 and solve the problem reported.

In the JS2 guide I see the use of TS files, but I'm writing a web site with ASPX and CS files (C # CODE), I would not implement the TS file but I'd just like to add the <script> and <link> tags. code that I used to use your grid that works with js1 is as follows:

WEB.CONFIG file

</namespaces>

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"

assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

</controls>

</pages>

</assemblies>

ASPX FILE

commented because slow in the first phase of loading

It all looks the same as before I can not figure out if just putting

I'm using the JS2 grid.

Please be able to send me an example of code that I can try that does not use TS files but only aspx cs file with masterpage and web.config that simulates the project I'm making.

Thanks as always for your professionalism

Greetings.

PS Pavithra Subramaniyam Syncfusion Team June 4, 2018 12:14 PM UTC

Hi Carmelo,

Currently, we don’t have wrapper support for ASP.NET WebForms for Essential JavaScript 2 components. However, you can achieve your requirement by using EJ2 Grid with the JavaScript framework in your WebForms application. We have prepared a simple sample based on your requirement. Please refer to the below code example, Documentation link and sample link.

[WebForm1.aspx]

<!DOCTYPE html>

</head>

<body>

var grid = new ej.grids.Grid({

dataSource: data,

height:350,

columns: [

. . .

]

});

grid.appendTo('#Grid');

</script>

</body>

</html>

Note: You need not to add any dll reference to use EJ2 JavaScript Grid component.

Documentation: https://ej2.syncfusion.com/16.1.37/documentation/grid/scrolling.html?lang=es5

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/TestGrid-274814606

Regards,

Pavithra S.

CS Carmelo Scarpello June 5, 2018 08:39 AM UTC

Hello, the example works correctly but I would like to continue using the namespace names assemble and the runat = "server" in order to use the c # and pass the data with the C # in this way:

ASPX FILE

<ej:Grid ID="gr_TotaliAgenti" runat="server" AllowPaging="true" AllowFiltering="true" AllowGrouping="true" IsResponsive="false">

</ej:Grid>

CS FILE

SqlConnection _SqlConnection = new SqlConnection(Public_Variable.Current.Public_sConnectionString);

string sSelect = "select top 2000 Anno,CodMedia,Ragsoc,Cod_Agente,Nome,DescTestata,DataPubb,DescSuccursale,DescAgenzia,NumDoc from MYTABLE ";//"select * from ##tmp";// ;

SqlCommand objsQLCommand = new SqlCommand(sSelect, _SqlConnection);

DataTable dt = new DataTable("Agenti");

objsQLCommand.CommandTimeout = 0;

objsQLCommand.CommandText = sSelect;

objsQLCommand.CommandType = CommandType.Text;

SqlDataAdapter da = new SqlDataAdapter();

da.SelectCommand = objsQLCommand;

_SqlConnection.Open();

da.Fill(dt);

Session["SqlDataSource"] = dt;

gr_TotaliAgenti.DataSource =dt ;

gr_TotaliAgenti.DataBind();

_SqlConnection.Close();

IN THE EXAMPLE YOU SET UP YOU WORK USING ONE OF WHICH THE CLASS EJ IS INSERTED: GRID

In your example, working, use a div on which the class ej: grid is then inserted.

I do not understand why to go through javascript and not use the tag ej: grid and why inserting the tags:

the grid inserted as follows:

<ej: Grid ID = "gr_TotalAgents" runat = "server" AllowPaging = "true" AllowFiltering = "true" AllowGrouping = "true" IsResponsive = "false">

</ Ej: Grid>

it does not work with javascript 2.

You can help me to use DataTable dt = new DataTable ("Agents"); and the tag <ej: Grid ID = "gr_TotaliAgenti"

thanks in advance, best regards.

PS Pavithra Subramaniyam Syncfusion Team June 7, 2018 01:10 PM UTC

Hi Carmelo,

Currently we don’t have ASPX wrapper support for Essential JavaScript 2 components. We don’t have any immediate plan for this support.

Regards,

Pavithra S.

CS Carmelo Scarpello June 7, 2018 01:38 PM UTC

Good morning, but you can not fix it by correcting JS 1 not forcing to switch to JS 2. Because this involves me changing all the logic of the project.
Thanks in advance

CS Carmelo Scarpello June 9, 2018 08:07 AM UTC

Good morning using the documentation and doing some tests I also like this solution using js 2 but I can not make it fade, surely I'm wrong. The test code I used is as follows:aspx file :

</div>

var data = new ej.data.DataManager({

//GetChartData5

url: "HomeAgentiTest.aspx/MyTableTest",

//adaptor: "UrlAdaptor",

//adaptor: new ej.data.UrlAdaptor(),

//crossDomain: false,

offline: false, adaptor:"UrlAdaptor"

//adaptor:"WebMethodAdaptor",

});

var grid = new ej.grids.Grid({

dataSource: data,

height: 350,

columns: [

{ field: 'MessageNumber', headerText: 'Agente', width: 130, textAlign: 'Right' },

{ field: 'Subject', headerText: 'DescRagg', width: 170 },

]

});

grid.appendTo('#Grid1');

</script>

</div>

FILE cs :

[System.Web.Script.Services.ScriptMethod()]

[System.Web.Services.WebMethod]

public DataTable MyTableTest()

{

int count = 10;

DataTable dtMessages = new DataTable(); // Creating datatable.

dtMessages.Columns.Add("MessageNumber");

dtMessages.Columns.Add("Subject");

dtMessages.Columns.Add("DateSent");

dtMessages.TableName = "dtMessages";

for (int i = count; i >= 1; i--)

{

dtMessages.Rows.Add();

dtMessages.Rows[dtMessages.Rows.Count - 1]["MessageNumber"] = i;

dtMessages.Rows[dtMessages.Rows.Count - 1]["Subject"] ="Ciccio";

dtMessages.Rows[dtMessages.Rows.Count - 1]["DateSent"] = "data";

}

return dtMessages;

If you help me it is the solution I prefer to use js2.

I await your precious help, thanks in advance, good morning }

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 12, 2018 04:28 PM UTC

Hi Carmelo,

Query #1: HeaderContent lags while scrolling Grid in mobile device. but you cannot fix it by correcting JS 1 not forcing to switch to JS 2.

We have prepared a sample with the native scroller and a Grid structured two separate HTML Table holding Content and Header. Refer to the following.

http://jsplayground.syncfusion.com/daqdyo4l

You could have notice the HeaderContent is moving slower than content element. This is the default behavior of the browser scroller. In the same way, problem is happening in the EJ controls. We cannot overcome this behavior of native scroller.

Query # 2:- Good morning using the documentation and doing some tests I also like this solution using js 2 but I can not make it fade

Currently we don’t have support for Data table binding support and we have considered this ‘Data table binding support’ as feature request list. This feature will be implemented in any of upcoming release.

Regards,

Farveen sulthana T

Need More Help?

Get personalized assistance from our support team.

Contact Support

18 Replies
6 Participants
Want to subscribe?
SIGN IN
Created by
CS Carmelo Scarpello
Platform
jQuery
Control
ejGrid
Created On
May 24, 2018 08:37 AM UTC
Last Activity On
Jun 12, 2018 04:28 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support