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>
Please any suggestions ....
Finally....
Got the resolved...
This is extremely painful. Infragistics needs to update their examples samples. They are very misleading. If there are limitation, please be explicit in the examples.
Hello C R,
Thank you for your feedback.
I understand your concerns regarding this scenario and I can assure you that in Infragistics we consider our customer feedback to be crucial for steering improvements.
My suggestion in your case is to use $("treegrid_table") selector when using igTreeGrid methods and the grid is instantiated on a div element. As stated in our Known Issues article in case that you need to use div element the calls to the grid`s features API should rely on the table to which they are actually attached: the [gridElementId]_table. For example:
$("#treegrid_table").igTreeGridUpdating('addRow', obj);
Please let me know if I can provide you any further assistance with this matter.
Thank you very much.
I am glad that you find my suggestion helpful.
Please let me know if you need any further assistance with this matter.