How to define cell size in Data Grid in Vue?

[Shivani]

Hello,

How to define cell size in Data Grid in Vue?

Somethink like this,
<input type="text" id="username" name="username" maxlength="10">

how we have maxlength to prevent from entering more value..!! 
I am looking for similar like this, how we can prevent from datagrid in vue.
 

[Manivel Sellamuthu]

Hi Shivani, 

Greetings from Syncfusion support. 

The size of the Grid cells defined based on the width property of the Column and Grid. So we suggest you to provide a width for Grid and columns to control the size of the cells. 

API: 

https://ej2.syncfusion.com/vue/documentation/api/grid/?no-cache=1#width 

https://ej2.syncfusion.com/documentation/api/grid/column/#width 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Shivani]

Hello,

Sorry, maybe I cannot explain properly.
What I want that user can not enter more than 3 characters in that input box in DataGrid in Vue.

Like I enter AAA now I can not enter more than 3 characters into that. I don't want from validation. 
I want to prevent from there only (When i enter data)
Please share with example.

[Manivel Sellamuthu]

Hi Shivani, 

Thanks for your prompt explanation. 

From your explanation we can understand that you want to apply the maxLength for the input while editing the Grid row. Which can be applied using actionComplete event of the Grid. Please refer the below code example and sample for more information. 

<template> 

  <div id="app"> 

    <div> 

      <ejs-grid ref="grid" :toolbar="toolbar" id="grid" :editSettings="editSettings" :dataSource="data" :actionComplete="actionComplete"> 

        <e-columns> 

          <e-column 

            field="OrderID" 

            headerText="Order ID" 

            textAlign="Right" 

            :isPrimaryKey="true" 

            width="100" 

          ></e-column> 

          <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column> 

          <e-column field="Freight" editType='numericedit' headerText="Freight" textAlign="Right" width="120" format="C2"></e-column> 

        </e-columns> 

      </ejs-grid> 

    </div> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Page, Edit,Toolbar } from "@syncfusion/ej2-vue-grids"; 

import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 

import {gridData} from './data' 

Vue.use(ButtonPlugin); 

Vue.use(GridPlugin); 

export default { 

  data() { 

    return { 

      data: gridData, 

      toolbar: ['Add', 'Update', 'Delete', 'Cancel'], 

      editSettings: {allowAdding: true, allowEditing: true, allowDeleting: true}, 

    }; 

  }, 

  methods: { 

    actionComplete: function(args) { 

      if (args.requestType === "beginEdit"  || 

      args.requestType === "add" ) { 

// here we can get the input element for  corresponding fieldname 

var inputEle = args.form.elements.namedItem('CustomerID'); 

// here we can apply the maxlength for the input 

inputEle.maxLength = 5; 

} 

    } 

  }, 

 

  provide: { 

    grid: [Page, Edit, Toolbar] 

  } 

}; 

</script> 

 

Sample: https://codesandbox.io/s/154866-max-cellsize-5dmzf?file=/src/App.vue 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Shivani]

Hello,

Thank you so much for your reply.
Great It works..

[Prasanna Kumar Viswanathan]

Hi Shivani, 

 

We are happy to hear that the provided solution has been working fine at your end. 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Prasanna Kumar N.S.V