1. Home
  2. Forum
  3. Angular - EJ 2
  4. Questions about Grid in EJ2

Questions about Grid in EJ2

Hi,

I have a few questions about Grid in EJ2:

1.) Is it or it will be possible to make drag&drop between rows and not just between 2 grids like it is shown here: https://ej2.syncfusion.com/angular/documentation/grid/row.html#drag-and-drop (so I would like to drag&drop to reorder rows, which is possible in EJ1 but not in example in EJ2 (https://js.syncfusion.com/demos/web/#!/bootstrap/grid/rows/drag-and-drop))

2.) I am looking at https://ej2.syncfusion.com/angular/documentation/grid/how-to.html#cascading-dropdownlist-with-grid-editing but I can not find datasource.ts with cascadeData. Would it be possible to get it?
2B.) After some testing I asume, that in your cascadeData parameter "ShipCountry" is not the forigen index but it is string value. I wonder, how is it possible to create DropDown where parameter in original object would be just id of the country. Eq. in EJ1 was this made with:
<e-column field="ownerId" headerText="Owner"  editType="dropdownedit" [dataSource]="employeList" foreignKeyField="id" foreignKeyValue="text" [defaultValue]="ownerId"></e-column>

3.) In EJ1 version of grid with batch saving I was able to make cell with always visible checkbox. So in EJ1 I had:
<e-column field="finished" editType="booleanedit" headerText="Ended" defaultValue="false" ></e-column>
and this checkbox was always visible, even if I didn't dobule click to edit the filed. So it looked like this:
Is it possible to have the same always visible checkbox in EJ2?

4.) Is it possible to have TimePicker in Grid?

Regards,
Marko


3 Replies
HJ Hariharan J V Syncfusion Team August 20, 2018 03:59 AM UTC

HI Marko, 
 
Thanks for contacting Syncfusion support. 
 
 
Query 
Response 
 
1) Is it or it will be possible to make drag&drop between rows and not just between 2 grids like it is shown here: https://ej2.syncfusion.com/angular/documentation/grid/row.html#drag-and-drop (so I would like to drag&drop to reorder rows, which is possible in EJ1 but not in example in EJ2 (https://js.syncfusion.com/demos/web/#!/bootstrap/grid/rows/drag-and-drop)) 
 
 
Currently we don’t have support to reorder rows within the grid and hence we have considered ‘Row Drag and drop support within a single grid’ as a feature and logged report for the same. This feature will be available in any of our upcoming release.   
 
2) I can not find datasource.ts with cascadeData. Would it be possible to get it? 
 
Please find the code example for ‘cascadeData’ and you can download the dataSource.ts file from the below link 
 
 
export let cascadeData: Object[] = [ 
        { 
            OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), 
            ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', 
            ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'Australia', ShipState: 'Queensland', Freight: 32.38, Verified: !0 
        }, 
        { 
            OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), 
            ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', 
            ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Australia', ShipState: 'Tasmania', Freight: 11.61, Verified: !1 
        }, 
        { 
            OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), 
            ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', 
            ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'United States', ShipState: 'New York', Freight: 65.83, Verified: !0 
        }, 
. . . 
]; 
 
 
 
2 B) I wonder, how is it possible to create DropDown where parameter in original object would be just id of the country 
Yes we can customize the default editor control properties by using column.edit  feature.   
 
 
In this demo, we can override the DropDown datasource by using column.edit feature. Please find the code example 
 
 
<e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' [edit]='countryParams' width=150></e-column> 
 
 
export class AppComponent implements OnInit { 
 
    
    public countryParams : IEditCell; 
    . . . 
 
    public country: { [key: string]: Object }[] = [ 
        { countryName: 'United States', countryId: '1' }, 
        { countryName: 'Australia', countryId: '2' } 
    ]; 
                 
                ... 
} 
 
 
 
 
 
3) Is it possible to have the same always visible checkbox in EJ2? 
Yes we can always visible checkbox by using  following properties . 
 
displayAsCheckBox -  If displayAsCheckBox is set to true, it displays the column value as a check box instead of Boolean value when the Grid normal state. 
 
“booleanedit" – If we set column.editType as booleanedit, it shows the checkbox while edit state. 
 
 
If you want to edit a grid record by single click , we need  to bind click event for grid cells( ‘e-rowcell)’ in dataBound event. Please find the code example 
 
 
[app.component.html] 
 
 
ejs-grid #grid [dataSource]='data' (dataBound)='dataBound($event)' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 
            <e-column field='CustomerID' editType = 'booleanedit' headerText = 'CustomerID'  displayAsCheckBox = true width='120' ></e-column> 
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column> 
             
           
        </e-columns> 
    </ejs-grid> 
 
[app.component.ts] 
 
export class AppComponent implements OnInit { 
 
. . . 
  public ngOnInit(): void { 
    this.data = gridData; 
   . .. 
  } 
  dataBound(args): void { 
    const gridRows: any = (this.grid as any).getRows(); 
    Array.from(gridRows).forEach(function (element) { 
      Array.from((element as any).cells).forEach(function (targEle) { 
        (targEle as any).addEventListener('mouseClickHandler', myFunction,false); 
      }); 
 
    }) 
 
  } 
} 
 
function myFunction(e):void{ 
  let gridObj:GridComponent = document.getElementsByClassName('e-grid')[0]['ej2_instances'][0]; 
  let tr: any = e.target.parentElement;  
  gridObj.editModule.startEdit(tr); // grid edit row 
} 
 
 
 
 
 
4)  Is it possible to have TimePicker in Grid? 
Yes we can render the your own control by using ‘column.edit’ feature. Please find the documentation for your reference. 
 
 
 
 
 
Regards, 
Hariharan JV 


MA Marko August 20, 2018 06:25 PM UTC

Hi,

thank you for your answers. They have been very useful.
The only problem I still got is from 2B.
I have:
<e-column field="ownerId" headerText="Owner"  editType="dropdownedit" [edit]='ddParams'></e-column>
this.ddParams = {
  create: () => {
    this.employeElem = document.createElement('input');
    return this.employeElem;
  },
  read: (args) => {
    return this.employeObj.text;
  },
  destroy: () => {
    this.employeObj.destroy();
  },
  write: (args) => {
    this.employeObj = new DropDownList({
      dataSource: this.employeList,
      fields: {text: 'text', value: 'id'},
      value: args.rowData.ownerId,
      
    });
    this.employeObj.appendTo(this.employeElem);
  }
};
But this fills my grid with indexes and after editing with null (last column):
https://puu.sh/BhtBo/5e6fde9253.png
So what have I missed out here?

Regards,
Marko



HJ Hariharan J V Syncfusion Team August 29, 2018 09:11 AM UTC

Hi Marko, 
 
Query: The only problem I still got is from 2B. But this fills my grid with indexes and after editing with null (last column): 
 
We have validated your query at our end and it works fine. We have prepared a simple sample based on your requirement. Please find the sample in below link. 
 
 
If we misunderstood your query, then please provide more information regarding the reported problem. It will be more helpful for further analysis. 
 
Regards, 
Hariharan 


Loader.
Up arrow icon