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