I'm using Infragistics sample, and trying to trigger an add row. It's not working.
What am I missing here ? Please need some advice.
<!DOCTYPE html>
<html><head><!-- Ignite UI Required Combined CSS Files --><link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /><link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css" rel="stylesheet" /><link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/modules/infragistics.ui.treegrid.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.9.1.min.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files --><script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script><script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js"></script>
<!-- Used to add modal loading indicator for igTreeGrid --><script src="http://www.igniteui.com/js/grid-modal-loading-inicator.js"></script><style type="text/css">input.button-style {margin-top: 10px;}</style>
<script type="text/javascript">$(function () {$("#button").on("click", function () {var obj = { employeeId: 28, firstName: "John", lastName: "Miller" }$("#treegrid").igTreeGridUpdating('addRow', obj);});});</script>
<script type="text/javascript">var employees = [{ "employeeId": 0, "supervisorId": 0, "firstName": "Andrew", "lastName": "Fuller" },{ "employeeId": 1, "supervisorId": 0, "firstName": "Jonathan", "lastName": "Smith" },{ "employeeId": 2, "supervisorId": 0, "firstName": "Nancy", "lastName": "Davolio" },{ "employeeId": 3, "supervisorId": 0, "firstName": "Steven", "lastName": "Buchanan" },
// Andrew Fuller's direct reports{ "employeeId": 4, "supervisorId": 0, "firstName": "Janet", "lastName": "Leverling" },{ "employeeId": 5, "supervisorId": 0, "firstName": "Laura", "lastName": "Callahan" },{ "employeeId": 6, "supervisorId": 0, "firstName": "Margaret", "lastName": "Peacock" },{ "employeeId": 7, "supervisorId": 0, "firstName": "Michael", "lastName": "Suyama" },
// Janet Leverling's direct reports{ "employeeId": 8, "supervisorId": 4, "firstName": "Anne", "lastName": "Dodsworth" },{ "employeeId": 9, "supervisorId": 4, "firstName": "Danielle", "lastName": "Davis" },{ "employeeId": 10, "supervisorId": 4, "firstName": "Robert", "lastName": "King" },
// Nancy Davolio's direct reports{ "employeeId": 11, "supervisorId": 2, "firstName": "Peter", "lastName": "Lewis" },{ "employeeId": 12, "supervisorId": 2, "firstName": "Ryder", "lastName": "Zenaida" },{ "employeeId": 13, "supervisorId": 2, "firstName": "Wang", "lastName": "Mercedes" },
// Steve Buchanan's direct reports{ "employeeId": 14, "supervisorId": 3, "firstName": "Theodore", "lastName": "Zia" },{ "employeeId": 15, "supervisorId": 3, "firstName": "Lacota", "lastName": "Mufutau" },
// Lacota Mufutau's direct reports{ "employeeId": 16, "supervisorId": 15, "firstName": "Jin", "lastName": "Elliott" },{ "employeeId": 17, "supervisorId": 15, "firstName": "Armand", "lastName": "Ross" },{ "employeeId": 18, "supervisorId": 15, "firstName": "Dane", "lastName": "Rodriquez" },
// Dane Rodriquez's direct reports{ "employeeId": 19, "supervisorId": 18, "firstName": "Declan", "lastName": "Lester" },{ "employeeId": 20, "supervisorId": 18, "firstName": "Bernard", "lastName": "Jarvis" },
// Bernard Jarvis' direct report{ "employeeId": 21, "supervisorId": 20, "firstName": "Jeremy", "lastName": "Donaldson" }];
$(function () {$("#treegrid").igTreeGrid({dataSource: employees,primaryKey: "employeeId",foreignKey: "supervisorId",foreignKeyRootValue:0,autoGenerateColumns: false,columns: [{ headerText: "ID", key: "employeeId", width: "150px", dataType: "number" },{ headerText: "First", key: "firstName", width: "150px", dataType: "string" },{ headerText: "Last", key: "lastName", width: "150px", dataType: "string" }],features: [{name: "Updating",editMode: "row",enableAddRow:true,enableDeleteRow: true,columnSettings: [{columnKey: "employeeId",editorOptions:{type: "numeric",disabled: true}}]}]});});</script></head><body><div id="treegrid"></div><input type="button" id="button" value="Click me"></body></html>
I also tried doing this ...
<script type="text/javascript"> $(function () { $("#button").on("click", function () { var obj = { employeeId: 28, firstName: 'John', lastName: 'Miller', supervisorId: 9 } $("#treegrid").igTreeGridUpdating('addRow', obj); }); }); </script>
If I put an alert window prior to addrow, the window display, but after the call, the window does not display.
<script type="text/javascript"> $(function () { $("#button").on("click", function () { var obj = { employeeId: 28, firstName: 'John', lastName: 'Miller', supervisorId: 9 } $("#treegrid").igTreeGridUpdating('addRow', obj);
alert('test') }); }); </script>