Need some clarification for using jExcel

[bhushanbihani]

Hi Team

We have below requirement in my application :

There is one complex form which having input box control first now they want grid like structure for similar thing to improve UI design so i have added one sample table with checkbox/radio/text/dropdown on the spreadsheet .

Now i need below things :
i) How to validate this fields (Some of them are mandatory)
ii)Based on horizontal fields need to add total of 4 columns and display in 5th column in a row how to display that.
iii)I need to save this data and fetch this data (In backend we have java web framework is used)
iv) User can add multiple rows

Can u provide above information or any other sample similar to above and above things are doable or not with jExcel ?

[pphod]

Option 1) Before you save your form you can get the table data by... yourtable.getData(), them you can take the data and perform the validations.

Options 2) You can use onchange event to validate the changes. onbeforechange can be used to intercept what the user has entered and return something filtered.

Option 3) You can use updateTable directive, in the example below, you can perform validations. In the following example the cell color is changed based on cell values.

var data = [
    [ 'Crayons Crayola only (No Rose Art)', 2, '5.01', '=B1*C1' ],
    [ 'Colored Pencils Crayola only', 2, '4.41', '=B2*C2' ],
    [ 'Expo Dry-erase Markers Wide', 4, '3.00', '=B3*C3' ],
    [ 'Index Cards Unlined', 3, '6.00', '=B4*C4' ],
    [ 'Tissues', 10, '1.90', '=B5*C5' ],
    [ 'Ziploc Sandwich-size Bags', 5, '1.00', '=B6*C6' ],
    [ 'Thin Markers Crayola only', 2, '3.00', '=B7*C7' ],
    [ 'Highlighter', 4, '1.20', '=B8*C8' ],
    [ 'Total', '=SUM(B1:B8)', '=ROUND(SUM(C1:C8), 2)', '=SUM(D1:D8)' ],
];

jexcel(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        { type: 'text', title:'Product', width:'300' },
        { type: 'text', title:'Qtd', width:'80' },
        { type: 'text', title:'Price', width:'100', mask:'#.##,00', decimal:',' },
        { type: 'text', title:'Total', width:'100' },
    ],
    updateTable:function(instance, cell, col, row, val, label, cellName) {
        if (cell.innerHTML == 'Total') {
            cell.parentNode.style.backgroundColor = '#fffaa3';
        }

        if (col == 3) {
            if (parseFloat(label) > 10) {
                cell.style.color = 'red';
            }  else {
                cell.style.color = 'green';
            }
        }
    },
    columnSorting:false,
});