Show customized grid columns whe naddig new row

[Niklas Sturfelt]

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]

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, 

https://help.syncfusion.com/reactjs/grid/editing#cell-edit-type-and-its-params 

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

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ReactJS-1152563073.zip 

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]

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]

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, 

https://help.syncfusion.com/reactjs/grid/editing#cell-edit-template 

 

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, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ReactJS-Template2075541316.zip 

 

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

 

Regards, 

Padmavathy Kamalanathan