Migrationt Wijmo with C1 component to webpack (Enterprise edition)

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

  • 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
    <head>
    <c1-styles />
    <c1-scripts>
    <c1-flex-sheet-scripts />
    <c1-basic-scripts />
    </c1-scripts>
    <script src="~/js/jszip.min.js"></script>

    <script>
    // here all Wijmo code
    c1.documentReady(function () {
    ctx.formulaBar = wijmo.Control.getControl('.wj-formulabar');
    ctx.flexSheet = wijmo.Control.getControl('#flexSheet');
    ctx.freezeCursorBtn = wijmo.getElement('#frozenCursorBtn');
    ctx.freezeCellBtn = wijmo.getElement('#frozenCellBtn');
    setGridDisabledState(true);

    // add formula bar keydown event listener
    ctx.formulaBar.hostElement.querySelector(".wj-inputContainer input").addEventListener("keydown", applyFormulaBarFormatting, true);


    // all code omitted
    ....}
    </script>
    </head>
    <body>
    @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*@
    <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>

    </div>
    </body>

    we need to move our <script></script> 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
  • Replied 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
  • Replied 28 November 2021, 6:17 pm EST

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

    <c1-styles />
    <c1-scripts>
    <c1-flex-sheet-scripts />
    <c1-basic-scripts />
    </c1-scripts>

    For code part above should be something like js/CSS native analog, doesn't it?
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels