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 : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid: field editTemplate with dropdown

Thread ID:

Created:

Updated:

Platform:

Replies:

130456 May 14,2017 03:44 PM UTC Sep 27,2017 12:16 PM UTC ReactJS 10
loading
Tags: ejGrid
Nga
Asked On May 14, 2017 03:44 PM UTC

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

Mani Sankar Durai [Syncfusion]
Replied On 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. 


Nga
Replied On 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?

Nga
Replied On 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

Mani Sankar Durai [Syncfusion]
Replied On 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 


Nga
Replied On 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

Mani Sankar Durai [Syncfusion]
Replied On 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 


Nga
Replied On May 23, 2017 03:31 AM UTC

Thank you for your help.

Regards,
Nga

Mani Sankar Durai [Syncfusion]
Replied On 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. 


Derek
Replied On 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?


Mani Sankar Durai [Syncfusion]
Replied On 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. 


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.

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

;