Migrationt Wijmo with C1 component to webpack (Enterprise edition)

Migrationt Wijmo with C1 component to webpack (Enterprise edition)

Posted by: sergey_chizhik on 24 November 2021, 8:54 pm EST

• 

  sergey_chizhik

  • Post Options:
  • Link
    Copy

  Posted 24 November 2021, 8:54 pm EST

  Hi Wijmo support,
  
  Do we have the right way to migrate our js code to the Webpack bundle without breaking something?

  Currently our code looks like below:
  
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  
  @addTagHelper *, C1.AspNetCore.Mvc
  
  @addTagHelper *, C1.AspNetCore.Mvc.FlexSheet

  @RenderBody()

  <div id="action-bar">
      <div id="loading-spinner"
           style="position: relative;
                  top: 5px;
                  width: 20px;
                  height: 20px;
                  display: none;
                  margin-left: 3px;">
          <img src="~/img/Rounded blocks.gif">
      </div>
      <button type="button" class="btn btn-default" onclick="freezeAtCursor()" id="frozenCursorBtn">Freeze At Cursor</button>
      <button id="btnFreezeRows" class="btn btn-default" onclick="toggleFrozenRows()">Toggle Frozen Rows</button>
      <button id="btnFreezeCols" class="btn btn-default" onclick="toggleFrozenColumns()">Toggle Frozen Columns</button>
      <button type="button" class="btn btn-default" onclick="remoteSave()" id="saveBtn">Save</button>
  </div>
  <div id="message-holder">
      <div id="no-records-message" style="display: none; width: 100%; text-align: center; font-size: 2em;">
          <p><b>No records found.</b></p>
      </div>
  </div>
  <div id="flexSheet-container">
      @*FlexSheet control using TagHelper*@
     [b] <c1-flex-sheet class="flexSheet" id="flexSheet"
                     show-errors="true"
                     enable-drag-drop="true"
                     remote-saved="onFileSaved"
                     cell-edit-ending="editEnding"
                     load-action-url="@Url.Action("RemoteBind")"
                     save-action-url="@Url.Action("SaveData")"
                     enable-formulas="true"
                     pasting-cell="pastingCellValue"
                     beginning-edit="beginEdit"
                     item-validator="validateCell">
          <c1-formula-bar />
      </c1-flex-sheet>[/b]
  </div>
  

  we need to move our section fully to the Webpack bundle.
  
  How could we do that safely?

  C# dependencies (enterprise additions) :
  
  c1.aspnetcore.mvc.flexsheet(3.0.20212.322)
  
  gembox.spreadsheet(47.0.1268)
  
  c1.aspnetcore.api(3.0.20212.302)
  
  c1.aspnetcore.mvc(3.0.20212.322)

  King regards,
  
  Serhii

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 27 November 2021, 5:26 pm EST

  Hi Serhi.
  
  The C1 scripts are embedded script and these can’t be move to webpack. It can be bundled. For using the Wijmo controls with the webpack, you may install the NPM package for Wijmo (@grapecity/wijmo).
  
  Hope it helps!

  Regards,
  
  Manish Gupta

• 

  sergey_chizhik

  • Post Options:
  • Link
    Copy

  Posted 28 November 2021, 6:17 pm EST

  Hi Manish,
  
  Thanks for your answer.
  
  With the Wijmo NPM package helpful, thanks.

  For code part above should be something like js/CSS native analog, doesn’t it?