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
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. jQuery
  4. custom cell edittemplate

custom cell edittemplate

Hello,
i'm wandering if it is possible to have different edittypes in the same column, depending on some values.
Consider this scenario:
1. We have a grid with 4 columns: Id, AttName, AttValue, AttType.
2. Is it possible to change AttValue Cell EditType depending on AttType. For example have a String input if AttType = String and DropDown if AttType = Enum.

P.S. I use WebForms, but this probably should be done on clientSide anyway. 

Thank You

14 Replies
MF Mohammed Farook J Syncfusion Team March 5, 2018 03:47 PM UTC

Hi Sergej, 
 
Thanks for contacting Syncfusion Supports. 
 
Yes We can able to change  column edit type dynamically.  Please find the code example. 
 
 
We need to import the following classes for dynamically change column Edit type 
 
import { extend } from '@syncfusion/ej2-base'; 
import { Grid, Edit, Toolbar, Page, Column, DropDownEditCell, NumericEditCell,  
DefaultEditCell, BooleanEditCell, DatePickerEditCell} from '@syncfusion/ej2-grids'; 
 
We need to inherit from Grid default edit types. 
 
let editCellType: Object = { 
        'dropdownedit': DropDownEditCell, 'numericedit': NumericEditCell, 
        'datepickeredit': DatePickerEditCell, 'booleanedit': BooleanEditCell, 'defaultedit': DefaultEditCell 
    }; 
 
 
Please find the code example for dynamically change column  edit type based on ‘CustomerID’ column  value by using ‘actionBegin’ event 
 
 
let grid: Grid = new Grid( 
        { 
            dataSource: orderData, 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 
            allowPaging: true, 
            actionBegin: actionBegin, 
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
            columns: [ 
                { 
                    field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right', 
                    validationRules: { required: true }, width: 120 
                }, 
. . . 
                }], 
        }); 
    grid.appendTo('#Grid'); 
 
function actionBegin(args: any): void{ 
  if(args.requestType === 'beginEdit'){ 
     let col : Column = this.getColumnByField('CustomerID'); 
      if(args.rowData['CustomerID'] === 'VINET') { 
        
        col.editType = 'dropdownedit'; 
        setEditType(col, this) 
      } 
      else { 
        col.editType = 'defaultedit'; 
        setEditType(col, this) 
      } 
  } 
} 
 
function setEditType(gCol : Column, gridObj : Grid): void{ 
       gCol.edit = extend( 
                new editCellType[gCol.editType && editCellType[gCol.editType] ? 
                    gCol.editType : 'defaultedit'](gridObj, gridObj.serviceLocator), 
                gCol.edit || {} 
   
} 
 
Please find the sample for your reference. 
 
 
Regards, 
J.Mohammed Farook 


SE Sergej March 20, 2018 08:29 AM UTC

Thank you,
This is exactly what i need.
But i'm having difficulties rewriting this without typeScript.

SE Sergej March 20, 2018 02:48 PM UTC

Can i make same code work without using TypeScript?

RS Renjith Singh Rajendran Syncfusion Team March 21, 2018 10:37 AM UTC

Hi Sergej, 

Based on your requirement, we have modified the sample from TypeScript to JavaScript.  

Please find the sample link below, 

Please find the JavaScript online sample browser link below, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


SE Sergej March 21, 2018 11:38 AM UTC

i've added 

   

But still get "Cannot read property 'enableRipple' of undefined"

I also have 
<%:Scripts.Render("~/Scripts/ej/ej.web.all.min.js") %>
<%:Scripts.Render("~/Scripts/ej/ej.webform.min.js") %>

Maybe  there is a conflict of some libraries?

What i see is that ej.base is undefined, so ej.base.enableRipple and ej.base.extend are not accesible.

PS Pavithra Subramaniyam Syncfusion Team March 22, 2018 10:22 AM UTC

Hi Sergej, 

We have checked your query and we suspect that the cause of the issue may be you would have referred the Essential JavaScript 2 Script (ej2.min.js)  file before the Essential JavaScript 1 Script files (ej.web.all.min.js and ej.webforms.min.js). Please add the Essential JavaScript 1 scripts before the Essential JavaScript 2 script reference.  

Please refer the following documentation link for your reference.  


Regards, 
Pavithra S. 


SE Sergej March 22, 2018 03:30 PM UTC

Thank you for the link, but it did not help me

My scripts are loaded as follows
<%:Styles.Render("~/Content/bootstrap.min.css") %>
<%:Styles.Render("~/Content/Site.css") %>
<%:Styles.Render("~/Content/ej/web/bootstrap-theme/ej.web.all.min.css" ) %>
<%:Styles.Render("~/Content/ej/web/material.css" ) %>
<%:Scripts.Render("~/Scripts/jquery-1.11.3.min.js") %>        
<%:Scripts.Render("~/Scripts/ej/ej.web.all.min.js") %>
<%:Scripts.Render("~/Scripts/ej/ej.webform.min.js") %>
<%:Scripts.Render("~/Scripts/ej/ej2.min.js") %>

i'm still getting undefined errors as before

PS Pavithra Subramaniyam Syncfusion Team March 23, 2018 12:55 PM UTC

Hi Sergej, 
 
We could reproduce the reported issue while we refer the Essential JavaScript 2 script file before Essential JavaScript 1 script file and the issue has been resolved while we changing the order of these files. We have prepared a simple sample for your reference . Please refer to the following sample link. 
 
 
We have also prepared a video demonstration of issue resolving, please download it from the link below, 
 
If you are still facing the issue could you please share more details on your issue or could you please reproduce the issue in the above sample if possible that will be helpful for us to provide a better solution  as early as possible. 
 
Regards, 
Pavithra S. 


SE Sergej March 25, 2018 08:05 AM UTC

Hello Pavithra 
Thank You for the video and a sample project.
I think that a have everything as You said, but still a get an undefined exception.
"ej" is defined, but "ej.base" is not.
I've attached a learning project that i'm working on, maybe it could help You help me 

https://yadi.sk/d/_vHddA2u3Tj53i



VN Vignesh Natarajan Syncfusion Team March 26, 2018 05:24 PM UTC

Hi Sergej, 

Query: “"ej" is defined, but "ej.base" is not” 

We have analyzed the provided sample and modified the sample to execute with local dataSource. We are able to reproduce the reported issue ("Cannot read property 'enableRipple' of undefined"). 
We have found that you have used the code ej.base.enableRipple(true) in your sample. 
Can you please explain what does this code mean?.  

Further analyzing we found that you have tried to set editType based on the column type. But you have tried to set wrong edit modes. 
Kindly refer the below link for different types of editModes support we have  


Other editors like autocomplete,comboBox etc can be rendered using EditTemplate 


Kindly refer our UG help documentation on Editing for your reference 


Regards, 
Vignesh Natarajan. 



SE Sergej March 26, 2018 06:08 PM UTC

Hi Vignesh,
i've followed the sample from
By Renjith Singh Rajendran.
I'm new to ES, so do not really know what enableRipple does, i've just seen it in many samples.

What i am trying to do is:
1. change cellEdit type depending on the cell value
2. in case of soma value (in this case Enum), i would like to create a local datasource for the dropdownedit from a string. (one;two;three;)
3. set cellvalue
4. save grid using dataadaptor.

VN Vignesh Natarajan Syncfusion Team March 27, 2018 01:09 PM UTC

Hi Sergej, 
 
Thanks for the update.  
 
We have analyzed the link provided to you in previous updates and it related to Essential Studio (Essential Javascript 2). But you have used Essential JavaScript version 1 in the sample provided by you.  
 
Query: “ change cellEdit type depending on the cell value” 
 
We have analyzed your query and we have achieved your requirement using columns method in the DataBound event of grid.  
 
Refer the below code snippet 
 
<ej:Grid ID="ProjectAttsGrid" runat='server' AllowFiltering="True" AllowPaging="True" AllowSorting="True" AllowResizing="true"  
                                CssClass="" MinWidth="0"> 
                .        .         .  
  <ClientSideEvents ToolbarClick="onToolBarClick" DataBound="bound" ActionBegin="actionBegin" /> 
                                <SelectionSettings EnableToggle="true" /> 
                           
 
.       .          .  
 
function bound(args) { 
                       var col = this.getColumnByField('CustomerID'); 
                        if (col.type == 'string') { 
                            col.editType = 'dropdownedit';                            
                        } 
                        else { 
                            col.editType = 'stringedit';                             
                        } 
                        this.columns(args.model.columns); 
                    } 
          
 
Query2 : “i would like to create a local datasource for the dropdownedit from a string. (one;two;three;)”  
If you want to change the dataSource of the Dropdown edit column kindly refer the below code snippet to render the dropdownlist with different data. We have achieved your requirement using ActionComplete event of the Grid. 
 
      <ClientSideEvents ToolbarClick="onToolBarClick" DataBound="bound" ActionBegin="actionBegin" ActionComplete="complete" /> 
                        . 
                        . 
                        . 
 
    var items = [{ text: "ListItem 1", value: "item1" }, 
 
                                                          { text: "ListItem 2", value: "item2" }, 
 
                                                          { text: "ListItem 3", value: "item3" }, 
 
                                                          { text: "ListItem 4", value: "item4" }, 
 
                                                          { text: "ListItem 5", value: "item5" }];                
                function complete(args) { 
                    if (args.requestType == "beginedit") { 
                        // MainContent _ "gridID+ " columnName 
                        $("#MainContent_ProjectSettings_ProjectAttsGridCustomerID").ejDropDownList({ 
                            dataSource: items, 
 
                            fields: { text: "text", value: "value" } 
                        }) 
                    } 
                } 
  
Refer the below screenshot for the output 
 
 
 
Refer our help documentation for your reference 
 
Regards, 
Vignesh Natarajan 
 
 
  


JA Jack October 9, 2019 03:42 PM UTC

Hi Vignesh,

I read the following:

Query : “i would like to create a local datasource for the dropdownedit from a string. (one;two;three;)”  
"If you want to change the dataSource of the Dropdown edit column kindly refer the below code snippet to render the dropdownlist with different data. We have achieved your requirement using ActionComplete event of the Grid."

Do you have a typescript example to show how to create a local datasource for the dropdownedit?

Thanks,
Jack

PK Padmavathy Kamalanathan Syncfusion Team October 11, 2019 11:29 AM UTC

 
Hi Jack, 
As requested , a sample for cell editing dropdown is attached below. Please follow the below steps for more clarifications. In the below sample the dropdown is rendered in the shipcountry column.  
  
  
let itemElem: HTMLElement;  
let itemObj: DropDownList;  
  
let items: { [key: string]: Object }[] = [  
  { text: "France", value: "item1" },    
  { text: "Germany", value: "item2" },   
  { text: "Brazil", value: "item3" },   
  { text: "Belgium", value: "item4" },   
  { text: "Switzerland", value: "item5" }];    
  
    let grid: Grid = new Grid(  
        {  
          
            dataSource: orderDataSource,  
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },  
            allowPaging: true,  
            pageSettings: { pageSize: 6, pageCount: 5 },  
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],  
            columns: [  
                 . . .  
                        . . .  
                {  
                    field: 'ShipCountry', headerText: 'Ship Country',width: 160, edit:{  
                 
                    create: () => {  
                    itemElem = document.createElement('input');  
                    return itemElem;  
                    },  
                      
                    read: () => {  
                      return itemObj.text;  
                    },  
  
                    destroy:() =>{  
                      itemObj.text;  
                    },  
  
                    write: (e) => {  
                    var Data = e.rowData.ShipCountry;  
                    itemObj = new DropDownList({  
                    dataSource: items,  
                    fields : { value:'value' , text :'text'},         
                    text: Data ,  
                    floatLabelType: 'Never'  
                    });  
                      
                  itemObj.appendTo(itemElem);  
                    }  
                  
                }    
              ],  
        });  
    grid.appendTo('#Grid');  
  
  
 
If you have further queries, please get back to us. 
 
Regards, 
Padmavathy Kamalanathan 


Loader.
Live Chat Icon For mobile
Up arrow icon