Selecting datagrid cells for edit

[Eda Toprak]

Hello syncfusion,
I have a datagrid.When i select a cell in my datagrid and then click edit on toolbar I redirect to Productedit.vue component to edit. Now I want display the data from the selected cell into the input from edit page? I have a function in Product.vue onQueryCellInfo but I couldn't edit this code-snippet. How can I do this?

Attachment: New_folder_52b78578.zip

[Thavasianand Sankaranarayanan]

Hi Eda, 

 

Greetings from Syncfusion support. 

 

Query 1: When I select a cell in my DataGrid and then click edit on toolbar I redirect to Productedit.vue component to edit 

 

Based on your given detail we suspect that you want to show the dialog edit form to show the selected cell value. By default we have dialog edit option in Grid and we have shown the edit form for the complete row in Grid like the given code example and sample. So, we need some clarification from you, whether you want to show a edit form for the individually selected cells in edit dialog ? 

[App.vue] 

<template> 

  <div id="app"> 

    <ejs-grid 

      . . . .  

      :actionBegin="actionBegin" 

      :actionComplete="actionComplete" 

      :toolbar="toolbar" 

      height="273px" 

    > 

      <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="ShipCountry" headerText="Ship Country" width="150"></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

. . . .  

export default { 

  data() { 

    return { 

      data: data, 

       . . . .  

        template: function() { 

          return { template: DialogTemplate }; 

        } 

      }, 

  }, 

   

  methods: { 

    actionBegin(args) { 

      if (args.requestType === "save") { 

        // cast string to integer value. 

        args.data["Freight"] = parseFloat( 

          args.form.querySelector("#Freight").value 

        ); 

      } 

    }, 

    actionComplete(args) { 

      // Set initail Focus 

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

        args.form.elements.namedItem("CustomerName").focus(); 

      } 

    } 

  } 

}; 

</script> 

[dialog-temp.vue] 

<template> 

  <div id="dialogTemplate"> 

    <ejs-tab id="element"> 

      <e-tabitems> 

        <e-tabitem :header="headerText0" content="#general"></e-tabitem> 

        <e-tabitem :header="headerText1" content="#seo"></e-tabitem> 

      </e-tabitems> 

    </ejs-tab> 

    <div id="general"> 

                 . . .  

    </div> 

 

    <div id="seo" style="display: none"> 

       . . . . . 

 

    </div> 

  </div> 

</template>  

<script> 

import Vue from "vue"; 

import { data } from "./data"; 

import { DataUtil } from "@syncfusion/ej2-data"; 

import { TabPlugin } from "@syncfusion/ej2-vue-navigations"; 

 

Vue.use(TabPlugin); 

 

export default { 

  data() { 

    let shipCity = DataUtil.distinct(data, "ShipCity", true); 

    let shipCountry = DataUtil.distinct(data, "ShipCity", true); 

    return { 

      data: {}, 

      shipCityDistinctData: shipCountry, 

      shipCountryDistinctData: shipCountry, 

      headerText0: { text: "Edit/Add" }, 

      headerText1: { text: "JavaScript" } 

    }; 

  } 

</script> 

Documentation Link: https://ej2.syncfusion.com/vue/documentation/grid/edit/?no-cache=1#dialoginline-template 

Sample link: https://codesandbox.io/s/vue-template-734j3 

Query 2: I have a function in Product.vue on QueryCellInfo but I couldn't edit this code-snippet. 

 

Basically, QueryCellInfo event triggers on every cell rendering in Grid. based on your given detail we suspect that you want to render a DropDownList component inside the Grid 

 

Before proceeding on this we need the following clarifications. 

1. Whether you want to render a DropDownList component inside the Grid as a template.
2. Else What do you want to expect to do inside that event ?
3. Share your complete requirement and based on that we can provide better guidance on this.

Reference link: https://ej2.syncfusion.com/vue/documentation/api/grid/#querycellinfo 

 

Regards, 

Thavasianand S. 

[Eda Toprak]

Thank you for your answer. But that's not what I want. I don't want to use a dialog. I know that dialog has edit properties to retrieve data but I don't want dialog. After selecting a cell in my datagrid, I want to bring the selected data into my edit form on my new page (ProductEdit.vue). How can I do it?

Attachment: New_folder_56096d43.zip

[Thavasianand Sankaranarayanan]

Hi Eda, 

Thanks for you update. 

We have validated you reported images at our side and we need some clarification about this, to provide appropriate solution. 

We suspect you want to bring the selected data into edit form in another Vue page. This case makes some difficulties that is if select the row data in grid, edit form is generated in another page that time edit state will be closed in grid because that page will refreshed. 

If edit and save the data in edit form model value not returned to the grid. So, you have to pass the model data manually to grid. 

By default, you get the selected data using  rowSelected method. 

Reference link: https://ej2.syncfusion.com/vue/documentation/api/grid/#rowselected 

So please share the below details. 

1. Your application is core with Vue or pure Vue?
2. For which purpose you need this requirement.

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

Regards, 

Thavasianand S. 

[Hani Yasin]

Hello Thavasianand Sankaranarayanan,

Thank you for your reply. You understood exactly what I wanted to do. Can you create an example for this? I still have a problem.

[Thavasianand Sankaranarayanan]

Hi Eda, 

Based on your confirmation we found that you want to pass some values from one component (Grid page) to another component (another form page) and once you do click for submit then it automatically update the Grid page with the modified data. In this case we can pass the selected data from one component page to other component page but when we move to another page then the Grid page get destoyed. When we need to update the modified data with Grid then we need to have the instance for the same but in this we cannot get the instance in second page to update the modified data in Grid. Because, the Grid is not in view and we cannot have the instances. So, it is not feasible to implement for this scenario and we may suggest to use the dialog template editing, which have the form as a popup instead of using another component page. 

Refer the below help documentation. 

Link: https://ej2.syncfusion.com/vue/documentation/grid/edit/#dialoginline-template 

Regards, 

Thavasianand S.