1. Home
  2. Forum
  3. ReactJS
  4. Grid: field editTemplate with dropdown

Grid: field editTemplate with dropdown

Hello,

I have the grid datasource as [              { OrderId: 1, ProductId: 1, Quantity: 2}            ]

I would like the field ProductId to display the product name on the grid. And user can edit the field by selecting value from a dropdown list. The dropdownlist should show both columns product id and name and user can search on that dropdownlist. Is that possible and how to do that?

Thanks,
Nga

10 Replies
MS Mani Sankar Durai Syncfusion Team May 15, 2017 12:38 PM UTC

Hi Nga, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we have prepared a sample based on your requirement that can be downloaded from the below link. 

In this sample we have shown the dropdown list for the particular column with two column values. This can be achieved using editTemplate property of columns in grid and with template property of dropdown list.  

Refer the code example. 
<style type="text/css"> 
          .eheader { 
              font-weight: bold; 
              border-bottom: 1px solid #c8c8c8; 
              background: #c8c8c8; 
          } 
 
              ... 
          } 
      </style> 
       
  </head> 
  <body> 
    <div id="Grid"></div> 
     
       <script type="text/babel"> 
              $(function(){ 
                            var pageSettings = { pageSize: 4 }; 
         
              var editSettings = { allowEditing: true, allowDeleting: true, allowAdding: true }; 
              var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel]}; 
               
        var columns = [ 
         
        { field: "OrderID", headerText: "OrderID",isPrimaryKey:true, width: 90 }, 
        { field: "CustomerID", headerText: "Last Name", width: 90 }, 
        { field: "EmployeeID", headerText: "EmployeeID",foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: window.employeeView,editTemplate:{create:"create",read:"read",write:"write"}, width: 90 }, 
        ]; 
              ReactDOM.render(  
                      <div id="Grid2"> 
            ... 
                                           <EJ.Grid id="Grid_1" dataSource = {window.gridData} editSettings={editSettings} toolbarSettings={toolbarSettings} allowPaging = {true} columns={columns} pageSettings={pageSettings} > 
                                                     
... 
              }); 
        </script> 
      <script> 
          function create() { 
              return $("<input>"); 
          } 
          function write(args) { 
              var gridObj = $(".e-grid").ejGrid("instance"); // Get grid object  
              var val = ej.isNullOrUndefined(args.rowdata["EmployeeID"]) ? "" : args.rowdata["EmployeeID"]; 
              args.element.ejDropDownList({ 
                  width: "100%", dataSource: args.column[2].dataSource, value: args.rowdata.EmployeeID, fields: { text: "FirstName", value: "EmployeeID" }, 
                  headerTemplate: "<div class='eheader'><span>FirstName</span> <span class='emp'>EmployeeID</span></div>", 
                 template: '<div><div class="ename"> ${FirstName} </div>' + '<div class="desig"> ${EmployeeID} </div><div>',    //bound firstName value which is the foreignkeyvalue for employeeID column and with employeeID value 
              }) 
          } 
          function read(args) { 
              return args.ejDropDownList("getSelectedValue");   //return the selected value in dropdown list 
             
          } 
      </script> 
</body> 
</html> 
     

From the above code example we have used foreign key column and bound the foreign key value for that column. Also in dropdown list we have shown foreign key value as FirstName and Foreign key Field EmployeeID using template property. 
Refer the screenshot below. 
 

Refer the documentation link 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


NG Nga May 16, 2017 07:41 AM UTC

Thank you. Your sample works as I expected, except one thing:
When I set enableFilterSearch = true for dropdownlist, it only searches based on FirstName. Is there any way to configure dropdownlist to search based on both fields, EmployeeId or FirstName?

NG Nga May 16, 2017 08:31 AM UTC

One more question: is there any way to display a combination of FirstName and LastName on a field of grid?

Thanks,
Nga

MS Mani Sankar Durai Syncfusion Team May 19, 2017 06:49 AM UTC

Hi Nga, 

Query 1: Is there any way to display a combination of FirstName and LastName on a field of grid? 
 
   Based on your requirement we can achieve it using template property of columns in grid. 
Refer the code example, 
var columns = [ 
         
        { field: "OrderID", headerText: "OrderID",isPrimaryKey:true, width: 90 }, 
        { field: "CustomerID", headerText: "Last Name", width: 90 }, 
        { field: "EmployeeID", headerText: "Last Name",template:"{{:CustomerID}}-{{ :EmployeeID}}", width: 90 }, 
         

Refer the documentation link. 

Refer the sample link. 

Query 2: When I set enableFilterSearch = true for dropdownlist, it only searches based on FirstName 
 
     A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.   
 
 
Please let us know if you need further assistance. 
 
Regards, 
Manisankar Durai 


NG Nga May 20, 2017 06:42 AM UTC

Hi,
I think you misunderstood my first question. I have my grid columns as:
      [{
                field: "EmpId", headerText: "Employee", foreignKeyField: "EmpId",
                foreignKeyValue: "FirstName",
                dataSource: employees
            }, ...]
And employees data source as:
[
     EmpId: 1, FirstName: "abc", LastName: "def"
]

So if I have EmpId = 1, the grid will display "abc".
But I would like to display both first name and last name "abc def" on grid.
I tried template:"{{:FirstName}}-{{ :LastName}}" but it did not work.

Thanks,
Nga

MS Mani Sankar Durai Syncfusion Team May 22, 2017 11:50 AM UTC

Hi Nga, 

We have analyzed your query and based on your requirement we have prepared a sample that can be available from the below link. 
In this sample we have bound the combination of two values when using foreign key columns. This can be achieved using helper function of template.  
Refer the code example. 
 
                <div id="Grid"></div> 
    <script type="text/x-jsrender" id="caption"> 
        {{:~GetFunction(value)}} 
    </script> 
    <script type="text/javascript"> 
        $(function () { 
            var title = { 
                setTitle: function (arg, index) { 
                    for (var i = 0; i < this.ctx.prop.dataSource.length; i++) { 
                       if(this.ctx.root.EmployeeID == this.ctx.prop.dataSource[i].EmployeeID) 
                           return this.ctx.prop.dataSource[i].FirstName + ' - '+ this.ctx.prop.dataSource[i].LastName; 
                    } 
                }, 
            }; 
            $.views.helpers({ GetFunction: title.setTitle }); 
        }); 
 </script> 
   <script type="text/javascript"> 
            $(function () { 
                // the datasource "window.gridData" is referred from jsondata.min.js 
                var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50)); 
                $("#Grid").ejGrid({ 
                    dataSource: data, 
... 
                    columns: [ 
{ field: "EmployeeID", headerText: "EmployeeID", template: "#caption", foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: window.employeeView, width: 90 }, 
                    ], 
                     
                }); 
 

Refer the documentation link. 
Please let us know if you need further assistance. 

Regards, 
Manisankar Durai 


NG Nga May 23, 2017 03:31 AM UTC

Thank you for your help.

Regards,
Nga

MS Mani Sankar Durai Syncfusion Team May 24, 2017 04:01 AM UTC

Hi Nga, 

Thanks for the update. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


DE Derek September 26, 2017 06:19 PM UTC

Your solution uses global javascript functions ("create", "write" and "read" functions),  along with jQuery to retrieve the grid item. Can this be done using actual React components and props? Because from what I can see from the solution provided, SyncFusion "Reactjs Library" is the thinnest wrapper on top of the javascript library.

The only Reactjs piece here is the component declaration <EJ.Grid ... />. In which, any sort of customization beyond the basic "command button" feature would have to be done via globally scoped jQuery manipulation? Do I understand this correctly?


MS Mani Sankar Durai Syncfusion Team September 27, 2017 12:16 PM UTC

Hi Derek, 

We have checked your query and using editTemplate feature in grid we can render any controls like Dropdown, autoComplete, DataPicker etc… Since we need to know which control has been rendered using editTemplate for that purpose we have used an event (create, read, write) for the columns in grid. So for this purpose we have used editTemplate feature in grid, hence it is not related to Jquery methods, it is the only feasible way to use editTemplate. 

Please refer the details of EditTemplate event in grid. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Loader.
Up arrow icon