Hi,
I am using the widget control and doing a Excel sheet using the Syncfusion javascript spreadsheet control. I am having trouble figuring out what to do to get the column widths to change after the load. I am sure I am referencing this wrong or something on the loadComplete. Any advice would be great.
Thanks -Tim
.fctbNone{ color:#000000; } .fctbStyle0{ color:#2e75b6; } .fctbStyle1{ color:#a31515; } .fctbStyle3{ color:#000000; } .fctbStyle0Style1{ color:#2e75b6; } .fctbStyle1Style3{ color:#a31515; } .fctbStyle0Style1Style3{ color:#2e75b6; } .fctbStyle0Style3{ color:#2e75b6; } this.init = function() { var me = this; $(this.container).ejSpreadsheet( { allowFormulaBar: false, showRibbon: true, exportSettings: { excelUrl: window.baseurl + "api/Spreadsheet/ExcelExport", csvUrl: window.baseurl + "api/Spreadsheet/CsvExport", pdfUrl: window.baseurl + "api/Spreadsheet/PdfExport" }, sheets: [{ rows: [ { height: 30, cells: [ { value: "Item Name", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" } }, { value: "Quantity", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" } }, { value: "Price", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" } }, { value: "Amount", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" } }, { value: "Stock Detail", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" } }, { value: "Website", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" } } ] }, { cells: [ { value: "Casual Shoes", comment: { value: "Casual Footwears with wide variety of colors." } }, { value: "10" }, { value: "20", format: { type: "currency" } }, { value: "=B2*C2" }, { value: "OUT OF STOCK" }, { value: "Amazon", hyperlink: { webAddr: "www.amazon.com" } } ] }, { cells: [ { value: "Sports Shoes", style: { "background-color": "#E5F3FF" } }, { value: "20", style: { "background-color": "#E5F3FF" } }, { value: "30", format: { type: "currency" }, style: { "background-color": "#E5F3FF" } }, { value: "=B3*C3", style: { "background-color": "#E5F3FF" } }, { value: "IN STOCK", style: { "background-color": "#E5F3FF" } }, { value: "AliExpress", hyperlink: { webAddr: "www.aliexpress.com" }, style: { "background-color": "#E5F3FF" } } ] }, { cells: [ { value: "Formal Shoes", comment: { value: "Formal Footwears with wide range of sizes." } }, { value: "20" }, { value: "15", format: { type: "currency" } }, { value: "=B4*C4" }, { value: "IN STOCK" }, { value: "Amazon", hyperlink: { webAddr: "www.amazon.com" } } ] }, { cells: [ { value: "Sandals & Floaters", style: { "background-color": "#E5F3FF" } }, { value: "15", style: { "background-color": "#E5F3FF" } }, { value: "20", format: { type: "currency" }, style: { "background-color": "#E5F3FF" } }, { value: "=B5*C5", style: { "background-color": "#E5F3FF" } }, { value: "OUT OF STOCK", style: { "background-color": "#E5F3FF" } }, { value: "Alibaba", hyperlink: { webAddr: "www.alibaba.com" }, style: { "background-color": "#E5F3FF" } } ] }, { cells: [ { value: "Flip-Flops & Slippers" }, { value: "30" }, { value: "10", format: { type: "currency" } }, { value: "=B6*C6" }, { value: "IN STOCK" }, { value: "Ebay", hyperlink: { webAddr: "www.ebay.com" } } ] }, { cells: [ { value: "Sneakers", style: { "background-color": "#E5F3FF" }, comment: { value: "Sneakers with recent designs." } }, { value: "40", style: { "background-color": "#E5F3FF" } }, { value: "20", format: { type: "currency" }, style: { "background-color": "#E5F3FF" } }, { value: "=B7*C7", style: { "background-color": "#E5F3FF" } }, { value: "OUT OF STOCK", style: { "background-color": "#E5F3FF" } }, { value: "Amazon", hyperlink: { webAddr: "www.amazon.com" }, style: { "background-color": "#E5F3FF" } } ] }, { cells: [ { value: "Running Shoes" }, { value: "20" }, { value: "10", format: { type: "currency" } }, { value: "=B8*C8" }, { value: "IN STOCK" }, { value: "AliExpress", hyperlink: { webAddr: "www.aliexpress.com" } } ] }, { cells: [ { value: "Loafers", style: { "background-color": "#E5F3FF" } }, { value: "31", style: { "background-color": "#E5F3FF" } }, { value: "10", format: { type: "currency" }, style: { "background-color": "#E5F3FF" } }, { value: "=B9*C9", style: { "background-color": "#E5F3FF" } }, { value: "OUT OF STOCK", style: { "background-color": "#E5F3FF" } }, { value: "Alibaba", hyperlink: { webAddr: "www.alibaba.com" }, style: { "background-color": "#E5F3FF" } } ] }, { cells: [ { value: "Cricket Shoes" }, { value: "41" }, { value: "30", format: { type: "currency" } }, { value: "=B10*C10" }, { value: "IN STOCK" }, { value: "Ebay", hyperlink: { webAddr: "www.ebay.com" } } ] }, { cells: [ { value: "T-Shirts", style: { "background-color": "#E5F3FF" } }, { value: "50", style: { "background-color": "#E5F3FF" } }, { value: "10", format: { type: "currency" }, style: { "background-color": "#E5F3FF" } }, { value: "=B11*C11", style: { "background-color": "#E5F3FF" } }, { value: "OUT OF STOCK", style: { "background-color": "#E5F3FF" } }, { value: "Amazon", hyperlink: { webAddr: "www.amazon.com" }, style: { "background-color": "#E5F3FF" } } ] }, { height: 30, cells: [ { style: { "background-color": "#428bca" } }, { style: { "background-color": "#428bca" } }, { value: "Total Amount", index: 2, style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" } }, { value: "=Sum(D2:D11)", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" } }, { style: { "background-color": "#428bca" } }, { style: { "background-color": "#428bca" } } ] } ] }], loadComplete: "loadComplete" }); this.loadComplete = function() { $(this.container).data("ejSpreadsheet").setWidthToColumns([140, 100, 100, 110, 140, 100, 110]); } }
I haven’t tried this specific one (if you want to attach a small test case I can try) but several Syncfusion widgets have a problem/feature with containers with an id because internally some of their jquery code references the container using the id. In our synfusion samples we usually add it like this:
this.container.id = this.getId() + “_ejSpreadsheet”;
this.getId() returns the id generated by Wisej for the Widget component. This way the inner div gets, for example, “id_12_ejSpreadsheet”.
Please login first to submit.