1. Home
  2. Forum
  3. ReactJS
  4. Show customized grid columns whe naddig new row

Show customized grid columns whe naddig new row

Hi,

I am using the gridcomponent where normally all columns show text.

When I add a new row to the grid I want to be able to show a DropdownListComponet in one of the columns while the row is considered new.

I only get the actionComplete event when the row has been added.

Is it possible to achieve this?


BR
Niklas Sturfelt
GeometraSoftware AB



3 Replies
PK Padmavathy Kamalanathan Syncfusion Team August 2, 2019 06:30 AM UTC

Hi Niklas, 

Thanks for contacting Syncfusion Forums. 

QUERY: Show Customized Grid columns when adding new row 
 
From your query we understand that you need to have dropdownlist in a particular column of grid while adding new row. For setting customized columns we have edit types in Grid. Your requirement can be achieved by setting that particular column’s edit type as dropdownedit. 
 
Please refer the below code snippet, 
 

var editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 
var toolbarItems = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };    
    var decimalPlaces = {decimalPlaces:3}; 
    var enableAnimation = {enableAnimation:true}; 
    ReactDOM.render(  
      <div id="Grid2"> 
            <table > 
             <tr> 
          <td> 
            <EJ.Grid dataSource = {window.gridData} allowPaging = {true} editSettings={editSettings} toolbarSettings={toolbarItems}> 
            <columns> 
                <column field="OrderID" isPrimaryKey={true} /> 
                <column field="ShipCity" editType="dropdownedit" editParams={enableAnimation} /> 
                <column field="Freight" editType="numericedit" editParams={decimalPlaces} /> 
                <column field="ShipCountry" /> 
            </columns>   
          </EJ.Grid> 
               </td> 
               </tr> 
          
           </table> 
           </div>,    
          document.getElementById('Grid') 
        ); 



Please refer the below image, 

 
 
Please refer the below help documentation, 

We have created sample as per your requirement. Please refer the sample in the below location, 

Please let us know if we have misinterpreted your query. 

If you have further queries, please get back to us. 

Regards, 
Padmavathy Kamalanathan 


NS Niklas Sturfelt August 2, 2019 02:35 PM UTC

Hi,

Thank you for your reply.

The thing is that it is only when we add a new row that the column should  have 'dropdownedit.
Otherwise the column should have string edit.

Also when I first add a row, I get NaN in the 'dropdownedit' column. If I reload and add another row, the 'dropdown' edit column shows the correct value.

BR
Niklas Sturfelt
 

PK Padmavathy Kamalanathan Syncfusion Team August 5, 2019 01:34 PM UTC

Hi Niklas, 
 
Thanks for your update. 
 
QUERY: Need to set edit type as dropdownedit while adding new row and stringedit while editing record 
 
From your query we understand that you need dropdown edit type for a particular column while adding new record and string edit while editing records. For achieving this requirement, we suggest you to use edit  
template.  
 
Please refer the below help documentation, 
 
Please refer the below code snippet, 
 
 
    <div id="Grid"></div> 
     
  <script type="text/babel"> 
 
        var EditTemplate = { 
            create : function () { 
                    return "<input>"; 
            }, 
            read : function (args) { 
              if ($(args).hasClass("e-dropdownlist"))  
                 return args.ejDropDownList("getSelectedValue"); 
              else 
                  return $(args)[0].value; 
            }, 
            write : function (args) { 
              if(args.requestType == "add") { // if new record is added, create dropdownlist 
              var obj = $("#ejControl_0").data("ejGrid"); // instance of grid using grid's id 
              args.element.ejDropDownList({ 
                width: "100%", dataSource: obj.model.dataSource, fields: { text: "value", value: "value" }, 
                }); 
              } 
              else { // if row is edited, set inputtext for editing 
              $(args.element[0].form[2]).addClass("ejinputtext"); 
              $(args.element[0].form[2]).val(args.rowdata.value); 
              $(args.element[0].form[2]).css({'text-align': 'left', 'width': '100%', 'height': '30px'}); 
               
            } 
            } 
        }; 
    $(function(){ 
 
------------------ 
    ReactDOM.render(  
      <div id="Grid2"> 
        <table > 
         <tr> 
         <td> 
          <EJ.Grid dataSource = {data} allowPaging = {true} editSettings={editSettings} toolbarSettings={toolbarItems} > 
            <columns> 
                <column field="id" isPrimaryKey={true} headerText="ID"/> 
                <column field="name"  headerText="Name" /> 
                <column field="value" headerText="Value" editTemplate={EditTemplate}/> 
            </columns>   
          </EJ.Grid> 
               </td> 
               </tr> 
          
           </table> 
           </div>,    
          document.getElementById('Grid') 
        ); 
    }); 
   </script> 
 
 
 
 
Using edit template, we can create dropdown for adding new row and input text for editing record.  
 
Please refer the below sample, 
 
If you have further queries, please get back to us. 
 
Regards, 
Padmavathy Kamalanathan 


Loader.
Up arrow icon