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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130468 May 11,2017 02:07 PM May 15,2017 08:42 AM JavaScript 3
loading
Tags: ejGrid
Nga
Asked On May 11, 2017 02:07 PM

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


Sasikala Nagarajan [Syncfusion]
Replied On May 12, 2017 02:13 AM

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   


Nga
Replied On May 12, 2017 04:36 AM

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

Mani Sankar Durai [Syncfusion]
Replied On May 15, 2017 08:42 AM

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. 


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.

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.

;