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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Show customized grid columns whe naddig new row

Thread ID:

Created:

Updated:

Platform:

Replies:

146359 Aug 1,2019 10:19 AM UTC Aug 5,2019 01:34 PM UTC ReactJS 3
loading
Tags: ejGrid
Niklas Sturfelt
Asked On August 1, 2019 10:19 AM UTC

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



Padmavathy Kamalanathan [Syncfusion]
Replied On 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 


Niklas Sturfelt
Replied On 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
 

Padmavathy Kamalanathan [Syncfusion]
Replied On 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 


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