Problems with the property is-responsive

[Eduardo]

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]

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]

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]

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:- 

"http://cdn.syncfusion.com/js/assets/css/web/responsive-css/ej.resonsive.css"> 

"http://cdn.syncfusion.com/js/assets/css/web/responsive-css/ej.grid.responsive.css" 

Documentation Link:- https://help.syncfusion.com/aspnet/grid/responsive#min-width 

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]

// 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]

//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]

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]

Any updates???

My actual version is: 16.4.0.47

and the error continues....

[Vignesh Natarajan]

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