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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Datagrid as Selecteditem

Thread ID:

Created:

Updated:

Platform:

Replies:

144895 May 10,2019 08:02 AM UTC May 28,2019 10:38 AM UTC Vue 10
loading
Tags: Diagram
Nurhan Aydogdu
Asked On May 10, 2019 08:02 AM UTC

İs it possible to make the position of datagrid flexible. İ want to select and drag, drop or with any mousehandle change the position from datagrid in diagram.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 13, 2019 02:08 PM UTC

Hi Nurhan, 

Greetings from Syncfusion support. 

Based on your query we suspect that you want to do drag and drop with in the Grid. Please refer the below help documentation for the drag and drop. 


If we misunderstood your query then please get back to us further details. 

Regards, 
Thavasianand S.  


Nurhan Aydogdu
Replied On May 14, 2019 07:02 AM UTC

Hi Thavasianand, 

thank you for reply. 
i didn't want drag and drop inside (with in) the datagrid. İ want to drag and drop the Grid Table to change the position from the the whole Grid. İ am not sure but i think it calls "offset settings" . İ want to make the place flexible in the canvas from a Grid with a drag and drop, like a basically selected node.  

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 16, 2019 11:33 AM UTC

Hi Nurhan, 

We need more details to further proceed on this and provide you a solution as early as possible.  

Could you please confirm whether you need to append a EJ2 DataGrid inside the EJ2 Diagram component instead of the node(as provided in the documentation) and make the dataGrid to be draggable as like the node inside the Diagram(as provided in documentation). 

And also please share with us the following details for better assistance. 
  1. Share with us a video demo/pictorial representation explaining your exact requirement.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Thavasianand S. 


Nurhan Aydogdu
Replied On May 16, 2019 12:12 PM UTC

Hi Swetha,

i didn't need a node. It was only a example for my problem, because a node has defaults a drag and drop option in this example. The same i want with whole Datagrid. i want to change place of Grid in the canvas using drag and drop.
If it can be solved with node. It is also ok for me. 



Nurhan Aydogdu
Replied On May 16, 2019 01:00 PM UTC

Hi Thavasianand,


yes you are right. i can confirm you the following sentence: 

"Could you please confirm whether you need to append a EJ2 DataGrid inside the EJ2 Diagram component instead of the node(as provided in the documentation) and make the dataGrid to be draggable as like the node inside the Diagram(as provided in documentation). ".  

I want to add not only one Grid in EJ2Diagram. I need more Datagrids, because of this i want to make the Datagrid draggable.  





Let me know if you need more information and the screenshot is not enough.



Attachment: dragdropgrid_bd95a2ac.zip

Ramya Thirugnanam [Syncfusion]
Replied On May 20, 2019 05:19 AM UTC

Hi Nurhan,  
 
We have created a sample in which we have rendered a grid as an HTML node in our diagram control. Also, we have enabled draggable for Grid control by setting allowRowDragAndDrop as true.  
 
Please find the documentation to render an HTML node in diagram  
 
Please find the documentation to enable drag and drop in grid. 
 
 
Regards,  
Ramya T 


Nurhan Aydogdu
Replied On May 23, 2019 06:12 AM UTC

Hi Ramya, 

thank you for reply.

İ need a Solution which works after the page is load. How can i render this html-grid on button click? 
The Grids has to appear when i click on the button, not onload from the page. İ read about load script after page is rendered. When i need more then one Grid i have to click the Button (create a new Grid with a new id in a new gridContent- div) and a new Grid has to appear. How can i handle this? 





Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 24, 2019 07:16 AM UTC

Hi Nurhan, 

We have analyzed your requirement. We have modified the sample from our previous update. Please download the sample from the link below, 
 
Typescript Grid Documentation :  
 
In the above sample, we will be having a div element(for Grid render) in the vue template. This div will be append to the diagram. And in the button click handler, we will be creating the Grid and append the Grid to that div element in diagram. Please refer the code example below, in which we have highlighted the changes. 

    <template> 
        <div class="control-section"> 
            <div style="width:100%"> 
                <div> 
                </div> 
                <div id="Grid"></div> 
                <button v-on:click="Gridrender">Render Grid</button> 
                <div id="diagram-space" class="sb-mobile-diagram"> 
                    <ejs-diagram ref="diagramObject" style='display:block' id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram> 
                </div> 
            </div> 
        </div> 
    </template> 
 
    <script> 
        import Vue from "vue"; 
        import { Browser } from "@syncfusion/ej2-base"; 
        import { GridPlugin } from '@syncfusion/ej2-vue-grids'; 
        import { Grid, RowDD, Selection } from '@syncfusion/ej2-grids';              
        ... 
       Vue.use(GridPlugin); 
        Grid.Inject(Selection, RowDD); 
        ... 
        export default Vue.extend({ 
          data: function() { 
            ... 
         }, 
          methods:{ 
            Gridrender(e){ 
             var data = [...]; 
             var grid = new Grid({ 
                dataSource:data, 
                allowRowDragAndDrop:true, 
                width:800, 
                height:400, 
                columns: [ 
                { field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', width: 140 }, 
                { field: 'CustomerID', headerText: 'Customer ID', width: 140 }] 
              }); 
              grid.appendTo('#Grid');     //append Grid instance to div element 
            } 
          }, 
           mounted: function() { 
            let diagram = this.$refs.diagramObject.ej2Instances; 
            let node  = diagram.nodes[0]; 
            let content = document.getElementById('Grid'); 
            document.getElementById('gridContent').appendChild(content); 
            diagram.dataBind(); 
          } 
        }); 
 
    </script> 
 
    <style> 
    </style> 


Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Nurhan Aydogdu
Replied On May 24, 2019 10:28 AM UTC

Hi Thavasianand,

many thanks for your answer. İ have the same Solution. But it is not enough. Let me explain more with your sample. 

When i run your sample i get an empty gridContent-div on Diagram on load the page (see screenshot 1). 
İn this gridContent-div will be created the Grid at Buttonclick(see screenshot 2). When i click the Button at second time the new Grid is contains in the same div. İ don't want this.

İ want at each Buttonclick a new gridContent-div for each created datagrid with an id.  
For example:

At first buttonclick i want to see in F12 developertool Elements: 

<div style="height:100%;width:100%">
    <div id="gridContent">
        <div id="Grid"></div>
    </div>
</div>
 
At second buttonclick i want to see:

<div style="height:100%;width:100%">
    <div id="gridContent">
        <div id="Grid"></div>
    </div>
</div>
<div style="height:100%;width:100%">
    <div id="gridContent">
        <div id="Grid1"></div>
    </div>
</div>
<div style="height:100%;width:100%">
    <div id="gridContent">
        <div id="Grid2"></div>
    </div>
</div>
.....

and so on. 

İ want to present the dataGrids separated and draggable on the diagram after the page is load. 

After Page load is imported for this case: 

Another example:
When i delete the gridContent-div not only one grid is deleted all generated Grids are deleted.
And then when i click the button to generate a new datagrid the button was not able to generate a new Grid because the gridContent-div is missing at this time. 

i Need a Solution about this two cases. 


Attachment: syncfusion_support_eb305fd.zip

Ramya Thirugnanam [Syncfusion]
Replied On May 28, 2019 10:38 AM UTC

Hi Nurhan,  
We have created a sample with HTML node at runtime(button click) using diagram add method. We have generated three grid content with the unique Id and append in HTML node content. Please refer to the sample below for your reference.  
Regards,  
Ramya T 


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