Data Grid one column with different value types

[Cesar Smerling]

Hi! I'm using the data grid and I hace a column that could have multiple types for edition. I use batch edition and I cannot achieve what I want.

1) Column property could be number, boolean, string or undefined

2) Undefined cases are not editable

3) number and text cases are showed in blue is row is editable (i use a method that check this), gray if not

4) boolean cases are show and check box and are not editable (should not enter editable batch mode)

5) number and text cases are editable (enter batch mode) and you can enter a number or a text determined by the type.

How could achieve this? With templates I have some problem setting avoid entering the batch mode in the boolean cases.

Thanks

[Balaji Sekar]

Hi Cesar, 

 

Greetings from the Syncfusion support. 

 

Query : is possible to have multiple types in the same column.  

  

In EJ2 Grid, we don’t have the support to set multiple types for the same column. By default the column’s type is set as the type of the first value of that column.   

  

If you need so we are ready to provide custom sample with that requirement. In that first we have render the column with type as string (data are stored as string value in the grid datasource), while on editing on the column we have render a separate template for Number, String, Date values.   

  

But the grid action Filtering, Sorting, Searching, etc., are not working in the expected way. Because all the actions are based on the grid datasource and performed with the string value. (i.e. grid actions works with the string value and returns the string value).  

  

If needed so, we will work on to provide a custom sample with those requirement.  

Regards, 

Balaji Sekar 

[Cesar Smerling]

Thanks, the example would be great

[Balaji Sekar]

Hi Cesar, 

  

We glad that your issue has been fixed.  

  

Please get back to us if you require further other assistance from us. 

  

Regards, 

Balaji Sekar. 

[Cesar Smerling]

Sorry, I need the example.

Thanks

[Balaji Sekar]

Hi Cesar, 

 

As per your query, we have created a sample with your requirement in the Syncfusion Grid. Please refer the below sample for more information. 

 

Sample link: https://stackblitz.com/edit/angular-multiple-edittypes-yq3sth-3qhrv3 

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

Regards, 

Balaji Sekar 

[Balaji Sekar]

Hi Cesar, 

 

Sorry for your inconvenience caused, 

 

We explained that in our Syncfusion Grid control, your requirement was met. For your reference please find the queries below with details. 

 

Query #1: Column property could be number, boolean, string or undefined 

 

By default , the column type set automatically by type of first value. If the column first value as null or empty ,  it automatically assigned as undefined.  If you want to show different type values in same column , you must be defined the column type as ‘string’.    

Query #2: Undefined cases are not editable 

Using the Grid's cellEdit event, we prevented the edit action for Undefined Cell in the Customer Details column. When editing a Grid cell it is trigger. For more details please refer to the code example and Documentation below. 

[app.component.html] 

<ejs-grid #grid [dataSource]='data'  [editSettings]='editSettings' [toolbar]="toolbar" (cellEdit)="cellEdit($event)" (queryCellInfo)="queryCellInfo($event)"> 

.      .        .      . 

<ejs-grid > 

[app.component.ts] 

   cellEdit(args){ 

    if((args.columnName== "CustomerData" && args.rowData[args.columnName] == undefined )|| 

      (args.columnName == "CustomerData" && (args.rowData[args.columnName] == "true" || args.rowData[args.columnName] == "false"))) { 

      args.cancel =true;  // prevent a edit action when edit a undefined cell 

    } 

  } 

Help Documentation:  https://ej2.syncfusion.com/angular/documentation/api/grid/#celledit 

Query #3: Number and text cases are showed in blue is row is editable (i use a method that check this), gray if not 

Based on your query, we have achieved the cell background colour apply based cell value using queryCellInfo event of the Grid. Please refer the below code example and Help documentation for more information. 

[app.component.html] 

<ejs-grid #grid [dataSource]='data'  [editSettings]='editSettings' [toolbar]="toolbar" (cellEdit)="cellEdit($event)" (queryCellInfo)="queryCellInfo($event)"> 

.      .        .      . 

<ejs-grid > 

[app.component.js] 

 queryCellInfo(args){ 

 

    if(args.column.field == "CustomerData" && (args.data["CustomerData"]== "true"|| args.data["CustomerData"] == "false" || args.data["CustomerData"]== undefined )){   

     .       .       .       . 

      args.cell.classList.add("e-gray");    // Here, we have set the custom class to Grid cell for Boolean and undefined cells (background colour - gray ) 

    } else if(args.column.field == "CustomerData"){ 

      args.cell.classList.add("e-blue");   //Here, Text and Number type cells are added ‘e-blue’ class (background colour - blue) 

    } 

  } 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo 

Query#4: Boolean cases are show and check box and are not editable (should not enter editable batch mode) 

 

We can bind the Checkbox component for Boolean type value using queryCellInfo event of the Grid and we prevented a edit option the check box using disabled property of EJ2 CheckBox component. Please refer the below code example for more information. 

[app.component.js] 

 queryCellInfo(args){ 

 

    if(args.column.field == "CustomerData" && (args.data["CustomerData"]== "true"|| args.data["CustomerData"] == "false" || args.data["CustomerData"]== undefined )){   

 

      if(args.data["CustomerData"]!= undefined) { 

      var checkbox = new CheckBox({ 

        disabled:true, // prevent a edit option 

        checked: args.data["CustomerData"].toString()=="true" 

      }) 

      var element = document.createElement("input"); 

      element.type="checkbox"; 

      args.cell.innerText = ""; 

      args.cell.append(element); 

      var ele = args.cell.querySelector('input'); 

      checkbox.appendTo(ele); 

      } 

Query #5: Number and text cases are editable (enter batch mode) and you can enter a number or a text determined by the type. 

 

We have achieved the Number and text cases are editable with different edit type using cellEditTemplate feature of the Grid. In below code example, we have find type of the edited cell value then it will bind input component(TextBox/NumricTextbox). Please refer the below code example, Help Documentation and sample for more information. 

  

[app.component.html] 

   <ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' allowFiltering="true" [filterSettings]="filteroptions" allowSearching='true'[editSettings]='editSettings' [toolbar]="toolbar" (cellEdit)="cellEdit($event)" (queryCellInfo)="queryCellInfo($event)"> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 

            <e-column field='CustomerData' type="string" headerText='Customer Details' [edit]='dpParams' width='120' textAlign='Right' ></e-column> 

             

        </e-columns> 

    </ejs-grid> 

[app.component.ts] 

 

 this.dpParams = { 

            create: () => { 

                this.elem = document.createElement('input'); 

                return this.elem; 

            }, 

            read: () => { 

                return this.numericObject.element.value; 

            }, 

            destroy: () => { 

                this.numericObject.destroy(); 

            }, 

            write: (args: { rowData: object, column: any }) => { 

              debugger; 

              var value = Number(args.rowData["CustomerData"]); 

              var editType = isNaN(value)?"string":"number";  // Find type of the cell 

                this.numericObject = new TextBox({ 

                    value: args.rowData['CustomerData'], 

                    floatLabelType: 'Never',                     

                }); 

                this.numericObject.type=editType; 

                this.numericObject.appendTo(this.elem); 

            } 

        } 

      } 

 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-template 

 

Sample link: https://stackblitz.com/edit/angular-multiple-edittypes-yq3sth-3qhrv3-w4jymx 

 

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

 

Regards, 

Balaji Sekar