Widget Control Question

0
0

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]);
}
}
  • You must to post comments
0
0

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”.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.