We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Selecting datagrid cells for edit

Thread ID:

Created:

Updated:

Platform:

Replies:

149273 Nov 20,2019 11:05 AM UTC Nov 26,2019 01:27 PM UTC Vue 5
loading
Tags: Data Grid
Eda Toprak
Asked On November 20, 2019 11:05 AM UTC

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 [Syncfusion]
Replied On November 21, 2019 10:31 AM UTC

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> 




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.

 
Regards, 
Thavasianand S. 


Eda Toprak
Replied On November 21, 2019 01:25 PM UTC

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 [Syncfusion]
Replied On November 22, 2019 01:21 PM UTC

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. 


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
Replied On November 25, 2019 06:34 AM UTC

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 [Syncfusion]
Replied On November 26, 2019 01:27 PM UTC

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. 


Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon