|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | + <title>$$(Title_cell-merging-custom)</title> |
| 5 | + |
| 6 | + <!-- Ignite UI Required Combined CSS Files --> |
| 7 | + <link href="%%ignite-ui%%/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"> |
| 8 | + <link href="%%ignite-ui%%/css/structure/infragistics.css" rel="stylesheet"> |
| 9 | + |
| 10 | + <script src="%%modernizr%%"></script> |
| 11 | + <script src="%%jquery%%"></script> |
| 12 | + <script src="%%jquery-ui%%"></script> |
| 13 | + |
| 14 | + <!-- Ignite UI Required Combined JavaScript Files --> |
| 15 | + <script src="%%ignite-ui%%/js/infragistics.core.js"></script> |
| 16 | + <script src="%%ignite-ui%%/js/infragistics.lob.js"></script> |
| 17 | + <style> |
| 18 | + td { |
| 19 | + border-left: 1px solid #bcbcbc !important; |
| 20 | + } |
| 21 | + </style> |
| 22 | + |
| 23 | +</head> |
| 24 | +<body> |
| 25 | + |
| 26 | + <!-- Target element for the igGrid --> |
| 27 | + <table id="grid"> |
| 28 | + </table> |
| 29 | + |
| 30 | + <!--Sample JSON Data--> |
| 31 | + <script src="../../../../data-files/projects-data.js"></script> |
| 32 | + |
| 33 | + <script> |
| 34 | + $(function () { |
| 35 | + $("#grid").igGrid({ |
| 36 | + width: "800px", |
| 37 | + dataSource: projects, |
| 38 | + dataSourceType: "json", |
| 39 | + primaryKey: "ActionID", |
| 40 | + autoGenerateColumns: false, |
| 41 | + columns: [ |
| 42 | + { headerText: "$$(Projects_Data_ActionID)", key: "ActionID", dataType: "number", hidden: true}, |
| 43 | + { headerText: "$$(Projects_Data_ProjectName)", key: "ProjectName", dataType: "object", width: "30%"}, |
| 44 | + { headerText: "$$(Projects_Data_Type)", key: "Type", dataType: "string", width: "15%"}, |
| 45 | + { headerText: "$$(Projects_Data_Priority)", key: "Priority", dataType: "string", width: "15%"}, |
| 46 | + { headerText: "$$(Projects_Data_Status)", key: "Status", dataType: "string", width: "15%"}, |
| 47 | + { headerText: "$$(Projects_Data_Action)", key: "ActionName", dataType: "string", width: "40%"}, |
| 48 | + { headerText: "$$(Projects_Data_Created)", key: "Created", dataType: "date", width: "15%"}, |
| 49 | + ], |
| 50 | + autoCommit: true, |
| 51 | + enableHoverStyles : false, |
| 52 | + features: [ |
| 53 | + { |
| 54 | + name: "CellMerging", |
| 55 | + mergeOn: "always", |
| 56 | + mergeType: "physical", |
| 57 | + mergeStrategy: function (prevRec, curRec, columnKey) { |
| 58 | + if ($.type(prevRec[ columnKey ]) === "string" && |
| 59 | + $.type(curRec[ columnKey ]) === "string" && |
| 60 | + prevRec["ProjectName"] === curRec["ProjectName"]) { |
| 61 | + return prevRec[ columnKey ].toLowerCase() === curRec[ columnKey ].toLowerCase(); |
| 62 | + } else if ( prevRec["ProjectName"] === curRec["ProjectName"]) { |
| 63 | + return prevRec[ columnKey ] === curRec[ columnKey ]; |
| 64 | + } |
| 65 | + |
| 66 | + return false; |
| 67 | + } |
| 68 | + }, |
| 69 | + { |
| 70 | + name: "Updating", |
| 71 | + editMode: "cell", |
| 72 | + enableAddRow: false |
| 73 | + } |
| 74 | + ] |
| 75 | + }); |
| 76 | + }); |
| 77 | + </script> |
| 78 | +</body> |
| 79 | +</html> |
0 commit comments