Unable to get the mobile mode to display columns vertically (enableResponsiveRow)

[alex]

I have a template with a grid like below. 

The isResponsive and enableResponsiveRow are set to true but the grid does not display the columns vertically.

My app.html has the following references,

  <require from="syncfusion-javascript/Content/ej/web/ej.widgets.core.material.min.css"></require>

  <require from="syncfusion-javascript/Content/ej/web/material/ej.theme.min.css"></require>

  <require from="syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css"></require>

  <require from="syncfusion-javascript/Content/ej/web/responsive-css/ejgrid.responsive.css"></require>

Some of the responsive features are applied for it hides the search textbox and I can move pages by clicking the screen and moving the mouse left to right and vice versa.

However it does not stacks the columns vertically. It just shrinks the column width to fit the screen. That hides the words in some of the headers and it also is not displaying a couple buttons in the last column.

<template>

  <require from="../resources/dialogs/delete"></require>

  <require from="../resources/messages/status-message"></require>

  

  <status-message is-visible.bind="statusMessageActive"

                  is-success.bind="statusMessageSuccess"

                  message.bind="statusMessageValue"></status-message>

      <ej-grid e-data-source.bind="customerDtos"

               e-is-responsive="true"

               e-enable-responsive-row="true"

               e-allow-paging="true"

               e-page-settings.bind="pageSettings"

               e-toolbar-settings.bind="toolbarSettings"

               e-allow-sorting="true">

        

        <ej-column e-field="name"

                   e-header-text="Name"

                   e-width="16%"

                   e-text-align="center">

        </ej-column>

        <ej-column e-field="code"

                   e-header-text="Code"

                   e-width="10%"

                   e-text-align="center">

        </ej-column>

        <ej-column e-field="attention"

                   e-header-text="Attention"

                   e-width="16%"

                   e-text-align="center">

        </ej-column>

        <ej-column e-field="active"

                   e-header-text="Status"

                   e-width="7%"

                   e-text-align="center">

          <ej-template>

            ${active ? "Active" : "Inactive"}

          </ej-template>

        </ej-column>

        <ej-column e-field="classValue"

                   e-header-text="Class"

                   e-width="16%"

                   e-text-align="center">

        </ej-column>

        <ej-column e-field="notes"

                   e-header-text="Notes"

                   e-width="16%"

                   e-text-align="center">

        </ej-column>

        <ej-column e-text-align="center">

          <ej-template>

            <button id="${id}" ej-button="e-size.bind: miniBtnValue;

                    e-show-rounded-corner.bind: roundedCorner;

                    e-content-type: textandimage;

                    e-prefix-icon: e-icon e-uiLight e-edit;

                    e-text: Edit"

                    e-is-unbound="true"

                    e-on-click.delegate="editCustomer($event)"></button>

            

            

            <button id="${id}" ej-button="e-size.bind: miniBtnValue;

                    e-show-rounded-corner.bind: roundedCorner;

                    e-content-type: textandimage;

                    e-prefix-icon: e-icon e-uiLight e-delete;

                    e-text: Delete" e-on-click.trigger="deleteCustomer($event)"></button>

          </ej-template>

        </ej-column>

      </ej-grid>

  

  <div style="margin-top:5px">

    <button id="normalBtn"

            ej-button="e-size.bind: normalBtnValue;

                    e-show-rounded-corner.bind: roundedCorner;

                    

            e-content-type: textandimage;

                    e-prefix-icon: e-icon e-uiLight e-user;

            e-text: New Customer"

            e-on-click.trigger="createNewCustomer()"></button>

  </div>

</template>

[Vignesh Natarajan]

Hi Alex, 

 

Thanks for using Syncfusion products. 

 

We have analyzed your query and we have prepared a sample using your code snippet shared. We are not able to reproduce the reported issue. We have referred the responsive related scripts in Grid.html(in our sample).  

Please refer the below link for the sample  

 

Sample: http://www.syncfusion.com/downloads/support/forum/133662/ze/syncfusion-template-repository-143915441  

 

Refer the below screenshot for the output 

 

 

 

Refer our online documentation for your reference 

 

https://help.syncfusion.com/js/grid/responsive#mobile-layout  

 

 

Kindly the share the following details to help you better 

 

1. Share the screenshot of the script error in console window(if any)
2. Essential studio version(XX.X.X.XX).
3. If possible try to reproduce the issue in provided sample

 

Regards, 

Vignesh Natarajan