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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Problems with the property is-responsive

Thread ID:

Created:

Updated:

Platform:

Replies:

141441 Dec 11,2018 10:57 PM UTC Jan 18,2019 10:22 AM UTC ASP.NET Core 8
loading
Tags: Grid
Eduardo
Asked On December 11, 2018 10:57 PM UTC

When I enable the property is-responsive and resize the window to a small size, the different dialogs (Excel Filter) have very bad appeareance.

I have attached images.

Attachment: Gridresponsive_17d4ab70.zip

Manivannan Padmanaban [Syncfusion]
Replied On December 12, 2018 08:18 AM UTC

Hi Eduardo, 

Thanks for contacting sycnfusion support. We are happy to assist you. 

Before we proceed we would like to confirm the following details. 

  1. Share the complete grid code example.
  2. Share the Essential studio version are you using.
  3. Confirm whether are you receiving any script error. If yes, please share the details.

 Regards, 

Manivannan Padmanaban. 



Eduardo
Replied On December 13, 2018 05:31 AM UTC

Essential Studio Version:
Syncfusion.EJ.AspNet.Core Version="16.3.0.36"

<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">Creditos</h4>
</div>
<ej-grid id="OriginacionCreditos" column-layout="Auto" show-column-chooser="true"
               allow-scrolling="true" allow-resizing="true" allow-paging="true"
               allow-resize-to-fit="true" is-responsive="true" allow-filtering="true" allow-sorting="true">
<e-datamanager url="@Url.Action("GetCreditos", "Default")" adaptor="UrlAdaptor"></e-datamanager>
<e-filter-settings filter-type="Excel" />
<e-columns>
<e-column field="CarteraCredito" header-text="Cartera" width="150"></e-column>
<e-column field="ProgramaCartera" header-text="Programa" width="150"></e-column>
<e-column field="Acreditado" header-text="Acreditado"></e-column>
<e-column field="Nuc" header-text="NUC o Contrato" show-in-column-chooser="false"></e-column>
<e-column field="Administrador" header-text="Administrador"></e-column>
</e-columns>
</ej-grid>
</div>
</div>

I have not receiving any script errors.

I have attached a video that shows this behavoir.

Attachment: gridresponsiveerrors_4b2bceb7.zip

Vignesh Natarajan [Syncfusion]
Replied On December 13, 2018 12:03 PM UTC

Hi Eduardo, 

Thanks for the update. 

We have checked your video and we suspect that the reported issue may occurs when the Responsive css files related to responsive property may not been referred properly which causes alignment issue. So please ensure that you have referred the script Files required for Responsive. Also you need to mention min-width property along with responsive. 

You need to refer these files for responsive:- 




After ensuring this, still facing any issue please share us the following details:- 

1. Complete Grid code example(both in client and server side). 
2. Layout page that you have referred the script files. 

Requested detail will be helpful for us to validate the reported issue at our end. 

Regards, 
Vignesh Natarajan 
 


Eduardo
Replied On December 14, 2018 06:54 PM UTC

// View:
@{
ViewData["Title"] = "Bienes";
}
<div class="page-header">
<h2>Lista de Bienes</h2>
</div>
<div class="row form-group">
<div class="col-md-3">
<a id="carga" asp-action="Index" asp-controller="Carga" asp-area="Bienes" class="btn btn-primary">
<i class="glyphicon glyphicon-cloud-upload"></i> Carga Masiva
</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<ej-grid id="OriginacionCreditos" column-layout="Auto" show-column-chooser="true"
allow-scrolling="true" allow-resizing="true" locale="es-MX"
allow-paging="true" allow-resize-to-fit="true" is-responsive="true" allow-filtering="true" allow-sorting="true"
allow-multi-sorting="true" min-width="800">
<e-datamanager url="@Url.Action("GetBienes", "Default")" adaptor="UrlAdaptor"></e-datamanager>
<e-filter-settings filter-type="Excel" />
<e-columns>
<e-column field="Cartera" header-text="Cartera" width="150" type="string"></e-column>
<e-column field="Programa" header-text="Programa" width="150" type="string"></e-column>
<e-column field="Nuc" header-text="NUC o Contrato - Clave"></e-column>
<e-column field="FechaDacion" header-text="Fecha Dación/Adjudicación" format="{0:dd/MM/yyyy}"></e-column>
<e-column field="ValorDacion" header-text="Valor Dación/Adjudicación" format="{0:C2}" type="number"></e-column>
</e-columns>
</ej-grid>
</div>
</div>
</div>

// Controller:
public ActionResult GetBienes([FromBody]DataManager dataManager)
        {
            IEnumerable model = _bienesServicio.BienesEnAdmisionAsync()
.Select(q => new BienesListaVM
            {
Id = q.Id,
                Cartera = q.SHFCredito.CarteraCredito.Nombre,
                Programa = q.SHFCredito.ProgramaCartera.Nombre,
                Nuc = q.SHFCredito.Nuc ?? $"{q.SHFCredito.NumeroContrato} - {q.SHFCredito.ClaveIndividual}",
                FechaDacion = q.AntecedenteDacion.FechaDacion,
                ValorDacion = q.AntecedenteDacion.ValorDacion
            });
DataOperations operation = new DataOperations();
if (dataManager.Where != null)
model = operation.PerformWhereFilter(model, dataManager.Where, dataManager.Where[0].Condition);
if (dataManager.Sorted != null)
model = operation.PerformSorting(model, dataManager.Sorted);
if (dataManager.Search != null)
model = operation.PerformSearching(model, dataManager.Search);
int count = model.Cast<BienesListaVM>().Count();
if (dataManager.Select != null)
{
model = operation.PerformSelect(model, dataManager.Select);
model = model.Cast<dynamic>().Distinct();
}
if (dataManager.Skip >= 0)
model = operation.PerformSkip(model, dataManager.Skip);
if (dataManager.Take > 0)
model = operation.PerformTake(model, dataManager.Take);
return dataManager.RequiresCounts ? Json(new { result = model, count }) : Json(model);
        }

//Layout Page:


Eduardo
Replied On December 14, 2018 06:56 PM UTC

//Layout Page:
<!DOCTYPE html>
<html lang="es-mx">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>@ViewData["Title"] - Shf.Creditos.Web</title>

<environment include="Development">
<link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.web.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css" rel="stylesheet" />
<link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/responsive-css/ejgrid.responsive.css" rel="stylesheet" />
<link rel="stylesheet" rel='nofollow' href="~/css/site.css" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/syncfusion-javascript/Scripts/ej/common/ej.core.min.js"></script>
<script src="~/lib/syncfusion-javascript/Scripts/ej/common/ej.data.min.js"></script>
<script src="~/lib/syncfusion-javascript/Scripts/ej/common/ej.globalize.min.js"></script>
@RenderSection("adhoc_Scripts_Top", required: false)
</environment>
<environment exclude="Development">
<link rel="stylesheet" rel='nofollow' href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.web.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css" rel="stylesheet" />
<link rel="stylesheet" rel='nofollow' href="~/css/site.min.css" asp-append-version="true" />
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="~/lib/syncfusion-javascript/Scripts/ej/common/ej.core.min.js"></script>
<script src="~/lib/syncfusion-javascript/Scripts/ej/common/ej.data.min.js"></script>
<script src="~/lib/syncfusion-javascript/Scripts/ej/common/ej.globalize.min.js"></script>
@RenderSection("adhoc_Scripts_Top", required: false)
</environment>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Shf.Creditos.Web</a>
</div>
<div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Inicio</a></li>
                    <li><a asp-area="Creditos" asp-controller="Default" asp-action="Index">Créditos</a></li>
                    <li><a asp-area="Bienes" asp-controller="Default" asp-action="Index">Dación</a></li>
                    <li><a asp-area="Reportes" asp-controller="Dacion" asp-action="Index">Reportes</a></li>
                    <li><a asp-area="Catalogos" asp-controller="Editar" asp-action="Editar">Catálogos</a></li>
                </ul>
@await Html.PartialAsync("_LoginPartial")
</div>
</div>
</nav>

<partial name="_CookieConsentPartial" />

<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; 2018 - Shf.Creditos.Web</p>
</footer>
</div>

<environment include="Development">
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/jsrender/jsrender.min.js"></script>
<script src="~/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"></script>
<script src="~/lib/syncfusion-ej-global/l10n/ej.localetexts.es-MX.min.js"></script>
<script src="~/lib/syncfusion-ej-global/i18n/ej.culture.es-MX.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/lib/jsrender/jsrender.min.js"></script>
<script src="https://cdn.syncfusion.com/16.2.0.50/js/web/ej.web.all.min.js"></script>
<script type="text/javascript">
if (typeof ej === "undefined") { // If CDN fails, ej returns undefined.
document.write(decodeURIComponent('%3Cscript src="Scripts/ej/web/ej.web.all.min.js" %3E%3C/script%3E'));
}
</script>
<script src="~/lib/syncfusion-ej-global/l10n/ej.localetexts.es-MX.min.js"></script>
<script src="~/lib/syncfusion-ej-global/i18n/ej.culture.es-MX.min.js"></script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

@RenderSection("Scripts", required: false)
<ej-script-manager></ej-script-manager>
</body>
</html>

Vignesh Natarajan [Syncfusion]
Replied On December 18, 2018 02:13 AM UTC

Hi Eduardo, 
 
Thanks for the update. 
 
Query: “ the different dialogs (Excel Filter) have very bad appeareance.” 
 
We have analyzed the reported issue and when responsive is enabled, Grid will be considered as responsive Grid and excel filter dialog will be changed as mentioned in the video. It is the default behavior. But in your scenario position of the dialog is not proper. We have confirmed it is bug and logged defect report (“Excel dialog position is not proper in responsive mode”). The fix for the issue will be included in our next release 2018 Volume 4 Service pack 1 which is scheduled to rolled out by the month of January 2019. 
 
Regards, 
Vignesh Natarajan 
 


Eduardo
Replied On January 17, 2019 05:55 PM UTC

Any updates???

My actual version is: 16.4.0.47

and the error continues....

Vignesh Natarajan [Syncfusion]
Replied On January 18, 2019 10:22 AM UTC

Hi Eduardo, 
 
Sorry for the inconvenience caused.  
 
We have promised to fix that the issue “Excel dialog position is not proper in responsive mode” will be included in 2018 Volume 4 Service pack 1 release which is expected to rolled out by the month of January 2019. But due to some complexity we have postponed it to February 2019.     
 
Till then we appreciate your patience. 
 
Regards, 
Vignesh Natarajan   


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon