Available in the Full Version

Data Grid - Unbound Column

Show
records
Product IDProduct NameUnits in StockUnit PricePromotion Exp DateIs PromotionTotal Price
1Chai39$18.004/24/2012$702.00
2Chang17$19.008/24/2012$323.00
3Aniseed Syrup13$10.006/24/2012$130.00
4Chef Anton's Cajun Seasoning53$22.007/24/2012$1,166.00
5Chef Anton's Gumbo Mix0$21.359/24/2012$0.00
 

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

The sample demonstrates how to add and configure unbound columns in igGrid. The unbound values of column “Promotion Expired Date” are set initially using a list of dates. Column “IsPromotion” is using databound client event to set unbound values. Column “Total” is using formula to calculate the multiplication of the values from columns “Unit Price” and “Units in Stock”. When updating the values in “Unit Price” and “Units in Stock”, the change is reflected to Total column.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />    

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
    
</head>
<body>   

    <!-- Target element for the igGrid -->
    <table id="grid10">
    </table>    

    <!--Sample JSON Data-->
    <script src="/data-files/northwind-products.js"></script>

    <script type="text/javascript">

        $(function () {

            var _isDataBound = false;

            /*----------------- Event Examples -------------------------*/

            $("#grid10").on("iggridupdatingdatadirty", function (event, ui) {
                $("#grid10").igGrid("saveChanges");
                return false;
            });            

            $("#grid10").on("iggriddatabound", function (event, ui) {

                if (_isDataBound === false) {
                    _isDataBound = true;
                } else {
                    return;
                }

                var i, grid = ui.owner,
                       ds = grid.dataSource,
                       data = ds.data(),
                       dataLength = data.length;

                for (i = 0; i < dataLength; i++) {
                    if (data[i]["UnitPrice"] * data[i]["UnitsInStock"] < 1000) {
                        data[i]["IsPromotion"] = true;
                    }
                    else {
                        data[i]["IsPromotion"] = false;
                    }
                }
            });

            $("#grid10").on("iggridupdatingeditrowended", function (event, ui) {
                var unitPrice = ui.values["UnitPrice"];
                var unitsInStock = ui.values["UnitsInStock"];
                var totalValue = (unitPrice * unitsInStock) || ui.values["Total"];
                $("#grid10").igGridUpdating("setCellValue", ui.rowID, "Total", totalValue);

                if (totalValue < 1000) {
                    $("#grid10").igGridUpdating("setCellValue", ui.rowID, "IsPromotion", true);
                }
                else {
                    $("#grid10").igGridUpdating("setCellValue", ui.rowID, "IsPromotion", false);
                }
            });

            /*----------------- Instantiation -------------------------*/

            $("#grid10").igGrid({
                primaryKey: "ProductID",
                width: "100%",
                autoGenerateColumns: false,
                autoCommit: true,
                dataSourceType: "json",
                responseDataKey: "results",
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number" },
                    { headerText: "Product Name", key: "ProductName", dataType: "string" },
                    { headerText: "Units in Stock", key: "UnitsInStock", dataType: "number" },
                    { headerText: "Unit Price", key: "UnitPrice", dataType: "number", format: "currency" },
                    {
                        headerText: "Promotion Exp Date", key: "PromotionExpDate", dataType: "date", unbound: true, format: "date",
                        unboundValues: [new Date("4/24/2012"), new Date("8/24/2012"), new Date("6/24/2012"), new Date("7/24/2012"), new Date("9/24/2012"), new Date("10/24/2012"), new Date("11/24/2012")]
                    },
                    { headerText: "Is Promotion", key: "IsPromotion", dataType: "bool", unbound: true, format: "checkbox" },
                    {
                        headerText: "Total Price", key: "Total", dataType: "number", unbound: true, format: "currency",
                        formula: function CalculateTotal(data, grid) { return data["UnitPrice"] * data["UnitsInStock"]; }
                    }
                ],
                features:
                [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "ProductID",
                                classes: "ui-hidden-tablet"
                            }
                        ]
                    },
                    {
                        name: "Paging",
                        type: "local",
                        pageSize: 5
                    },
                    {
                        name: "Updating",
                        editMode: "row",
                        enableAddRow: false,
                        enableDeleteRow: true,
                        columnSettings: [
							{
								columnKey: "ProductID",
								readOnly: true
							},
                            {
                                columnKey: "Total",
                                editorType: "numeric",
                                readOnly: true
                            },
                            {
                                columnKey: "IsPromotion",
                                editorType: "bool",
                                readOnly: true
                            },
							{
								columnKey: "UnitsInStock",
								required: true
							},
							{
								columnKey: "UnitPrice",
								required: true
							}
                        ]
                    }
                ],
                dataSource: northwindProducts
            });
        });
    </script>
</body>
</html>