1. Home
  2. Forum
  3. jQuery
  4. Webpack error in ej.pager.min.js: Invalid left-hand side in assignment expression (10:5715)

Webpack error in ej.pager.min.js: Invalid left-hand side in assignment expression (10:5715)

Hi,

Webpack 2.2.0 throws error with babel loader 6.2.3 and typescript 2.2.1:

ERROR in ./~/syncfusion-javascript/Scripts/ej/web/ej.pager.min.js
    Module build failed: SyntaxError: /node_modules/syncfusion-javascript/Scripts/ej/web/ej.pager.min.js: Invalid left-hand side in assignment expression (10:5715)

Could you please check syncfusion-javascript 15.2.40?

Thanks,
Nga


3 Replies
SN Sasikala Nagarajan Syncfusion Team May 12, 2017 06:13 AM UTC

Hi Nga,    
  
Sorry for the inconvenience caused.  
  
We would like to inform that; we have already fixed this issue (pager error) and published the updated source with 15.2.41 version of syncfusion-javascript.   
  
Please check with updated source and let us know if you need any further assistance.  
    
Regards,    
Sasikala Nagarajan   


NG Nga May 12, 2017 08:36 AM UTC

Thank you. The new version works with webpack. I have a question on Grid:

The datasource is [              { 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

MS Mani Sankar Durai Syncfusion Team May 15, 2017 12:42 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. 


Loader.
Up arrow icon