0

I'm trying to add an Excel Web App to a DurandalJS website. Basically, I get a JSON object from the server, will transform it into a <table>...</table> tag so that Excel Web App can understand it. Then I'd like to be able to view that table with the Excel Web App (resize columns, select, sort, filter, etc).

To start off, I'm trying the simplest solution possible - hardcoded ![<table />][1]:

  1. Created a new DurandalJS project (using the template on their website)
  2. Replaced the content of welcome.html with the following code I found on ExcelMashup.com:

<a href="#" name="MicrosoftExcelButton" data-xl-tableTitle="My Title" data-xl-buttonStyle="Standard" data-xl-fileName="Book1" data-xl-attribution="Data provided by MY Company" ></a>

<table> ... </table>

<script type="text/javascript" src="https://r.office.microsoft.com/r/rlidExcelButton?v=1&kip=1"></script>

But Durandal will only show the table data, ignoring the Excel button. Same thing happens when I try moving the last line (<script/>) to index.cshtml.

This is how it looks on Durandal

Any ideas how can I have an Excel-like behavior to view that table under Durandal?

Thanks!

P.S.: My real project is working on Durandal 1.2 but for the time being I'll take any solution, even Durandal 2.0.

GilNahmias
  • 99
  • 1
  • 8

2 Answers2

0

Durandal does not support multiple roots in a single view file (.html). You need to wrap your <a> tag and your <table> tag in a single <div> tag, or <section> tag, or something higher-level.

Also, you must move the <script> tag to index.cshtml, as you say.

Finally, use the dev tools of the browser you're using to make sure the ExcelButton resource is actually loading.

  • Thanks! Tried all of your suggestions (wrapped with `
    `, moved `` to `index.cshtml` and verified the resource is loading - I get HTTP 301 followed by the real address: http://excel.officeapps.live.com/x/_layouts/excelbuttonjs.ashx?v=1 and it loads ok) -- no change in the result...     – GilNahmias Mar 20 '14 at 17:02
  • Correction: Erika Pliauksta is correct. I thought the ` –  Mar 20 '14 at 21:05
0

Durandal doesn't render script tags within views. To render them, you should use knockout custom bindings:

ko.bindingHandlers.excelScript = {
  update: function( element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
    $(element).html('<script type="text/javascript" src="https://r.office.microsoft.com/r/rlidExcelButton?v=1&kip=1"></script>');
  }
};

Use it in your view:

<div data-bind="excelScript"></div>
Erikas Pliauksta
  • 1,402
  • 1
  • 14
  • 22
  • Thanks! It did help a little! Now the excel button appears in green - but it doesn't work... When I click on it, the entire screen is shaded black for half a second, and reverts back (as if I canceled the operation).. Any idea? – GilNahmias Mar 20 '14 at 17:07
  • I think, it's not to do with duranal, but to do with excel not finding a file or something... I suggest you to try and build excel button on a plain html page without durandal. and then if it works move the implementation to durandal – Erikas Pliauksta Mar 20 '14 at 22:46
  • There's some CSS clash I guess. For the time being I'll try using a `
    ` which would take another SO question about combining ellipsis, dynamic width and compacted cells.     – GilNahmias Apr 01 '14 at 19:28