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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Responsive , but not appear Scrollbar when opening by a mobile device

Thread ID:

Created:

Updated:

Platform:

Replies:

128441 Jan 22,2017 10:46 AM UTC Jan 24,2017 12:26 PM UTC ASP.NET MVC 4
loading
Tags: Grid
Dushmantha
Asked On January 22, 2017 10:46 AM UTC

Hi, 
I have created a Grid which has foreign Key columns . It's responsive but when opening in a Mobile device, Scrollbar is not appearing and can't scroll vertically. 
I have attached my code below. please, anyone, can me advise on this?

<section class="content">
 
        <div class="row">
            <div class="box no-border">
                <div class="box-body">
                    @(Html.EJ().Grid<JobCardRelatedPartViewModel>("partWarehouseGrid")
                          .Datasource(ds => ds.URL(@Url.Action("GetActive""PartIssueManagement")).Adaptor(AdaptorType.UrlAdaptor))
                          .AllowPaging()
                          .AllowSorting()
                          .AllowFiltering()
                          .IsResponsive(true)
                          //.MinWidth(600)
                          .AllowScrolling(true)
                          .ScrollSettings(scroll => { scroll.EnableTouchScroll(true); })
                          .ToolbarSettings(toolbar =>
                          {
                              if (User.IsInRole("Admin"|| User.IsInRole("WarehouseManager"))
                              {
                                  toolbar.ShowToolbar().CustomToolbarItems(new List<object>
                                  {
                                      new CustomToolbarItem {TemplateID = "#EditTemplate" , Text = "Issue Part"},
                                      new CustomToolbarItem {TemplateID = "#UpdateTemplate" ,Text = "Update Issue"},
                                      new CustomToolbarItem() {TemplateID = "#refreshTemplate", Text = "Refresh"}
                                     // new CustomToolbarItem() {TemplateID = "#PdfGenerateTemplate"}
                                  });
                              }
                          })
                          .EditSettings(edit =>
                               {
                                   edit.AllowEditOnDblClick(false);
                               })
                          .ClientSideEvents(evt =>
                          {
                              evt.ActionFailure("toolbarClickEvent.failureMessage");
                              evt.ToolbarClick("toolbarClickEvent.onClickToolbar");
                              evt.ActionBegin("gridActionEvent.onBegin");
                              evt.ActionComplete("gridActionEvent.onComplete");
                          })
                          .Columns(col =>
                          {
                              col.Field(p => p.Id).Visible(false).IsPrimaryKey(true).Add();
                              col.Field(p => p.JobCardNo).HeaderText("Job Card No").Add();
                              col.Field(p => p.PartId).DataSource(x => x.URL(Url.Action("GetAllPartForDropDown""Part"))).ForeignKeyField("Id").ForeignKeyValue("PartCode").HeaderText("Part Code").AllowSorting(true).AllowFiltering(true).Add();
                              col.Field(p => p.NoOfUnit).HeaderText("Quantity").AllowFiltering(false).Add();
                              col.Field(p => p.UpdatedBy).DataSource(x => x.URL(Url.Action("GetAllUser""UserManagement"))).ForeignKeyField("Id").ForeignKeyValue("FullName").HeaderText("Requested by").TextAlign(TextAlign.Left).Add();
                              col.Field(p => p.UpdatedDateDisplay).HeaderText("Requested date").TextAlign(TextAlign.Left).Add();
                              col.Field(p => p.Part.PartName).HeaderText("Part Name").TextAlign(TextAlign.Left).AllowFiltering(false).Add();
                              col.Field(p => p.IssuedBy).DataSource(x => x.URL(Url.Action("GetAllUser""UserManagement"))).ForeignKeyField("Id").ForeignKeyValue("FullName").HeaderText("Issued by").Add();
                              col.Field(p => p.IssuedDateDisplay).Format("{0:dd/MM/yyyy}").HeaderText("Issued Date").Add();
                              col.Field(p => p.WarehouseStatus).HeaderText("Status").Template("#statusTemplate").Add();
                          }))
                </div>
                <div class="overlay hidden">
                    <i class="fa  fa-spinner fa-spin"></i>
                </div>
            </div>
        </div>
        
    </section>


Thanks
Dushmantha


Ragavee U S [Syncfusion]
Replied On January 23, 2017 07:44 AM UTC

Hi Dushmantha, 

Thanks for contacting Syncfusion support. 

When you want to enable the responsive feature in grid, it is necessary to set the minWidth property in grid. In your code, we could see that you have commented out the minWidth property. So, we suggest you to set the minWidth property of grid so that height will maintain according to it when grid is in responsive. Also, from v14.3.0.49, we have done some changes for the responsive behavior of the Grid in terms of Height. These changes will recommend to set the scrollSettings.height as “100%”. If and only if Grid’s height is enabled with the “100%”, responsive will work for the Grid in terms of height. Refer to the following release notes. 


Please refer the documentation link. 

Regards, 
Ragavee U S. 


Dushmantha
Replied On January 23, 2017 03:59 PM UTC

Thanks for your reply. But when I uncommented the minWidth also, Grid responding is not working properly in the browser. When I set a minWidth and open in a Mobile device (Chrome simulator) it's working fine. But when opening in the browser, Grid is getting ugly. 

Dushmantha
Replied On January 23, 2017 04:27 PM UTC

Hi,

My syncfusion version is 14.1.46 v and when set the minWidth also it's not working.  Can you please send me the code sample which missed at my code?

I added  some codes as you mentioned in above comment and check but still not woking in both (mobile and browser)

Please kindly advise me 

@(Html.EJ().Grid<JobCardViewModel>("jobCardGrid")
                         .Datasource(ds => ds.URL(@Url.Action("GetActive""JobCard")).Adaptor(AdaptorType.UrlAdaptor))
                         .AllowPaging()
                         .AllowSorting()
                         .AllowFiltering()
                         .IsResponsive(true)
                         .MinWidth(600)
                         .ScrollSettings(sc => sc.Height("100%").Width("100%"))
                         .AllowScrolling(true)
                         .ToolbarSettings(toolbar =>
                         {
                             toolbar.ShowToolbar().CustomToolbarItems(new List<object>
                             {
                                 new CustomToolbarItem {TemplateID = "#AddTemplate", Text = "Create Jjob card "},
                                 new CustomToolbarItem {TemplateID = "#EditTemplate", Text = "Update job card"},
                                 new CustomToolbarItem {TemplateID = "#PdfGenerateTemplate", Text = "Generate PDF"},
                                 new CustomToolbarItem {TemplateID = "#refreshTemplate", Text = "Refresh"}
                             });
                         })
                         .EditSettings(edit =>
                         {
                             if (User.IsInRole("Admin"|| User.IsInRole("TechnicianManager"))
                             {
                                 edit.AllowDeleting().AllowEditing().AllowEditOnDblClick(false).EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#editerTemplate");
                             }
                         })
                         .ClientSideEvents(evt =>
                         {
                             evt.ActionFailure("crudManagementEvent.failureMessage");
                             evt.ActionBegin("gridActionEvent.onBegin");
                             evt.ActionComplete("gridActionEvent.onComplete");
                             evt.ToolbarClick("crudManagementEvent.onClickToolbar");
                         })
                         .Columns(col =>
                         {
                             col.Field(p => p.Id).Visible(false).IsPrimaryKey(true).Add();
                             col.Field(p => p.JobCardNo).HeaderText("Job Card No").TextAlign(TextAlign.Left).AllowSorting(true).Add();
                             col.Field(p => p.DisplaySriNo).HeaderText("SRI No").TextAlign(TextAlign.Left).AllowSorting(true).AllowFiltering(true).Add();
                             col.Field(p => p.CustomerFullName).HeaderText("Customer Name").TextAlign(TextAlign.Left).Add();
                             col.Field(p => p.FullAmount).HeaderText("Repair Chargers").Format("{0:c2}").TextAlign(TextAlign.Left).AllowFiltering(false).Add();
                             col.Field(p => p.TechnicianAssignedObj.FirstName).HeaderText("Technician Assigned").TextAlign(TextAlign.Left).Add();
                             col.Field(p => p.Status).HeaderText("Status").Template("#statusTemplate").Add();
                         }))

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On January 24, 2017 12:26 PM UTC

Hi Dushmantha, 
 
We are unable to reproduce any problem at our end with the given information. We have prepared a sample that can be downloaded from the following location. 
 
 
Refer to the following screenshot.  
 
Desktop browser mode: 
 
 
 
Chrome emulator mode: 
 
 
 
If you are still facing any problem, please share the following details to analyze the problem and provide you solution as early as possible.  
 
1)      Screenshot with replication procedure for the issue or Video demo for the issue. 
2)      If possible, modify the attached sample and replicate the issue 
3)      Mention the device name from the emulator 
 
We also suggest to clear your browser cache and re-run your sample or else run your sample in incognito mode to avoid older references of scripts/CSS. 
 
Regards, 
Seeni Sakthi Kumar S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;