Add a Button in a Grid Cell in Vue

[Shivani]

Hello, 
My query is how to add the selection button in the cell in the data grid in Vue?

First how to put this type of button in a cell in the data grid in Vue?

Then when I click on the button it opens the popup list.

after I select any record that comes into that cell.

So here I selected one record and its values come into that cell.
I wanted to do this in Data Grid in Vue.

Please suggest me how to do it and if possible please share an example.

[Sujith Kumar Rajkumar]

Hi Shivani, 

Greetings from Syncfusion support. 

From the provided information we suspect your requirement is to render a custom selection button in the top cell of the column. For this we suggest you to use the Grid’s filter bar template and render the required custom control and button there. Then on button click you can open a popup control like Dialog with required list and on selecting a value from the list you can append it to the textbox rendered in the filter bar template. 

More details on rendering custom control in the filter bar template can be checked in the below link, 

Filter bar template with custom control: https://ej2.syncfusion.com/vue/documentation/grid/filtering/?no-cache=1#filter-bar-template-with-custom-component 

EJ2 Dialog initialization with other components inside it can be checked from the below online demo sample, 

Components inside EJ2 Dialog: https://ej2.syncfusion.com/vue/demos/#/material/dialog/components-dialog.html 

Dialog documentation: https://ej2.syncfusion.com/vue/documentation/dialog/getting-started/ 

The available list of components can be checked in the following link from which you can use the components which best suits your requirement, 

Components page: https://ej2.syncfusion.com/home/vue.html#platform 

If we misunderstood your query or if you require further assistance please get back to us. 

Regards, 

Sujith R 

[Shivani]

Hello, I want a button in Data Grid cell. 

When user clicks for add, the user can see the textbox  + button in one cell.

When user clicks on button it opens pop up Data Grid so user can select data from there

In Filter bar template options , it replace textbox to other components..
But i want textbox + button in one cell.

Here is my code,

<ejs-grid 

   id="Grid"

   ref='grid' 

   :dataSource="remarkList" 

:editSettings='editSettings' 

   :allowPaging="allowPaging" 

   :pageSettings='pageSettings'

   :allowReordering='true' 

   :allowSorting='true'

                                        

   :actionBegin="onActionBegin"

   :selectionSettings='selectionOptions'

   :rowSelected="rowSelected"

   :rowDeselected="rowDeselected"

   :actionComplete = "onActionComplete"

   >

    <e-columns>

   <e-column field='RemCode1' type='checkbox' width=30 :visible='false'></e-column>

     <e-column field='TxType' :headerText='localizedArray.Lbl.txType' :isPrimaryKey="true" :validationRules='txTypeRules' ></e-column>

     <e-column field='RemCode' :headerText='localizedArray.Lbl.remCode' :isPrimaryKey="true" :validationRules='remCodeRules'></e-column>

    <e-column field='TxRemark' :headerText='localizedArray.Lbl.txRemark' :validationRules='remDescRules'></e-column>

     </e-columns> 

    </ejs-grid>

I attached  video also , its my current Vue code , but i wanted to changed into SyncFusion Data Grid.

Attachment: remark_5ca49a76.rar

[Sujith Kumar Rajkumar]

Hi Shivani, 

 

From your query we could understand that your requirement is to render a textbox and button for a cell on adding/editing a record in the Grid. For this you can use the columns editTemplate property and render a textbox with icon(inside the template function) and bind click event to the icon’s span tag as demonstrated in the below code snippet, 

 

<ejs-grid id="grid" ref="gridObj" :dataSource="data" :allowPaging="true" :editSettings='editSettings' :toolbar='toolbar'> 

    <e-columns> 

                 . 

                 . 

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

    </e-columns> 

</ejs-grid> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

 

// Search icon for textbox rendered inside edit template 

.e-search:before { 

    content: "\e993"; 

} 

</style> 

<script> 

export default { 

  name: 'app', 

  data() { 

    return { 

      data: data, 

      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 

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

      editTemplate: () => { 

        return { 

          template: Vue.component("inputTemp", { 

            template: `<div class="e-input-group e-control-wrapper"> 

            <input class="e-field e-input e-defaultcell" v-model="data.CustomerID" type="text" /> 

            <span class="e-input-group-icon e-icons e-search" v-on:click="searchClick"></span> 

                   </div>`, 

            data: function() { 

              return { 

                data: {} 

              }; 

            }, 

            methods: { 

              searchClick: args => { 

                // Icon span tag click event 

                // Here you can perform your required actions 

              } 

            } 

          }) 

        }; 

</script> 

 

This will result in the following output on add/edit, 

 

 

 

We have prepared a sample based on this for your reference. You can download it from the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/155018/ze/GridEditTemplate-1434585563  

 

Edit template documentation: https://ej2.syncfusion.com/vue/documentation/grid/edit/#using-template 

 

Note: Since the template will create a new Vue instance you will not be able to access the main root Vue instance here. If you need to achieve this then you can dynamically bind the click event to the icon span tag in the Grid’s actionComplete event where you can access the Vue’s root instance.  

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Shivani]

Hello,

Sujith Kumar Rajkumar

Thank you for your reply.

How can I set the primary key to it and validation and also on serchclick I open a pop up and select a value that value how can I set into that textbox?

As it become child component so i can not set primary key to it? and as this one is primary key so can not be editable in edit mode as well.

Please guide me.

If possible , please share an example.

 

                                        id="Grid"

                                        ref='grid' 

                                        :dataSource="remarkList" 

                                        :editSettings='editSettings' 

                                        :allowPaging="allowPaging" 

                                        :pageSettings='pageSettings'

                                        :allowReordering='true' 

                                        :allowSorting='true'

                                        

                                        :actionBegin="onActionBegin"

                                        :selectionSettings='selectionOptions'

                                        :rowSelected="rowSelected"

                                        :rowDeselected="rowDeselected"

                                        :actionComplete = "onActionComplete"

                                        

                                    >

                                        

                                             field='RemCode1' type='checkbox' width=30 :visible='false'>

                                             field='TxType' :headerText='localizedArray.Lbl.txType' :isPrimaryKey="true" :validationRules='txTypeRules' width='120' :editTemplate='editTemplate'>

                                             field='RemCode' :headerText='localizedArray.Lbl.remCode' :isPrimaryKey="true" :validationRules='remCodeRules'>

                                             field='TxRemark' :headerText='localizedArray.Lbl.txRemark' :validationRules='remDescRules'>

                                         

                                    

onActionComplete: function(args) {

      // prevent to enter more characters

      if (args.requestType === "beginEdit" || args.requestType === "add") {

        args.form.elements.namedItem("TxType").maxLength = 5; -- I have an error.

        args.form.elements.namedItem("RemCode").maxLength = 5;

        args.form.elements.namedItem("TxRemark").maxLength = 60;

      }

    },

And when i open pop up i find this error in console.

[Shivani]

Hello,

I can able to set value (selection from popup box) into textbox. but still, I don't know how to set validation as this is a normal textbox, not SyncFusion Textbox .
Please guide me.
If possible then share an example.

[Sujith Kumar Rajkumar]

Hi Shivani, 

 

In the sample we provided in our last update the textbox rendered in the Grid’s edit template was EJ2 TextBox and not normal textbox. So for performing validation on this you can use the Grid columns validationRules property itself and set the required validation rules. The form validation in the Grid editing is performed based on the input control’s name(which will be the same as the column’s field name). So for the default column validation to be executed in this EJ2 TextBox rendered in the edit template you just need to specify the column field name as the input element’s name. This is demonstrated in the below code snippet, 

 

<template> 

    <div id="grid_parent"> 

        <ejs-grid id="grid" ref="gridObj" :dataSource="data" :allowPaging="true" :editSettings='editSettings' :toolbar='toolbar'> 

            <e-columns> 

                       . 

                       . 

                <e-column field="CustomerID" headerText="Customer ID" :validationRules='customerIDRules' :editTemplate='editTemplate' width="120"></e-column> 

            </e-columns> 

        </ejs-grid> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

 

export default { 

  name: 'app', 

  data() { 

    return { 

      data: data, 

      // Validation rules for the edit template column 

      customerIDRules: { required: true, minLength: 3 }, 

      editTemplate: () => { 

        return { 

          template: Vue.component("inputTemp", { 

            template: `<div class="e-input-group e-control-wrapper"> 

            // Column field name is set as input element name for default Grid column validation to occur 

            <input class="e-field e-input e-defaultcell" name="CustomerID" v-model="data.CustomerID" type="text" /> 

            <span class="e-input-group-icon e-icons e-search" v-on:click="searchClick"></span></div>`, 

                  . 

                  . 

} 

</script> 

 

Modified sample for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/155018/ze/GridUpdatedSample-293590745  

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Shivani]

Hello,

I was waiting for your answer. Thank you so much. It works.

[Sujith Kumar Rajkumar]

Hi Shivani, 

We are glad to hear that. Please get back to us if you require any further assistance. 

Regards, 

Sujith R 

[Shivani]

Hello,

There is one problem, I open a popup (Datagrid) and select a record and also select value but again I open a pop up then before selected record is selected only. I want every time I open a pop up (DataGrid), the previously selected value should be deselected. 

[Sujith Kumar Rajkumar]

Hi Shivani, 

You can achieve this requirement by clearing selection in the Grid using its clearSelection method before the popup dialog is opened(either in button click for dialog open or on dialog open event). 

API link: https://ej2.syncfusion.com/vue/documentation/api/grid/#clearselection 

Let us know if you have any concerns. 

Regards, 

Sujith R