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.
