Hello Team,
I am using the igTreeGrid (referenced the link http://www.igniteui.com/tree-grid/overview), this TreeGrid has input controls like textbox which I have added using template feature.
Now I want to retrieve the data from input control (In my case Name or address )when I click on the submit button.
My code is as below, In which I want to retrieve the data from the updated txtName or txtAddress fields.
var statusTemplate = "{{if parseInt(${reportsTo}) == 0 }}" + "<input id='lblName' value='Name' type='text' disabled='disabled' /> <br/> <input id='txtName' type='text' />" + "{{else}} <input id='lblAddress' value='Address' type='text' disabled='disabled' />" + "<br /> <input id='txtAddress' type='text' /> {{/if}}";
$("#treegrid2").igTreeGrid({ width: "100%", dataSource: hierarchicalDS, //Project Plan data, autoGenerateColumns: false, primaryKey: "id", columns: [ { headerText: "ID", key: "id", width: "120px", dataType: "number" }, { headerText: "Tasks", key: "tasks", width: "250px", dataType: "string" }, { headerText: "Start", key: "start", width: "130px", dataType: "string" }, { headerText: "Finish", key: "finish", width: "130px", dataType: "string" }, { headerText: "Duration", key: "duration", width: "100px", dataType: "string" }, { headerText: "Progress", key: "progress", width: "130px", dataType: "string" }, { headerText: "Status", key: "Status", width: "130px", dataType: "string", template: hierarchicalStatusTemplate } ], childDataKey: "products", initialExpandDepth: 1, renderExpansionIndicatorColumn: true });
var hierarchicalDS = [ { "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [ { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" }, { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" }, { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" }, { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" }, { "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [ { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" }, { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" }, { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" } ] }, { "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [ { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" }, { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" }, { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" }, { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" } ] }, { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" } ] } ];
Hello Tushar Borhade,
thank you for posting into our community,
If I understand correctly you need to go through all the rows and collect the values from the inputs. I made a sample which goes through all the rows and gets the values from the inputs and returns them.
Thanks for your prompt response DeyanK.
Let me correct my requirement, here I want values only for updated input controls with row-id.
Thanks,Tushar
Hello Tushar,binding to complex objects is not supported out of the box at this point. We plan to work on it for the next release. As a workarround you can take a look at this forum thread. And try using the formatter function to display some of the nested objects. But you still need to flatten the primaryKey and foreignKey properties, because the treegrid won't be able to create the hierarchy.If you can make your data look like this record: { "employeeID": 0, "PID": -1, "Employee":{ "firstName": "Andrew", "lastName": "Fuller"}, "Reporting":{ "reportsTo": "-"}}And your columns definition like this: columns: [ { headerText: "Employee ID", key: "employeeID", width: "200px", dataType: "number" }, { headerText: "First Name", key: "Employee", width: "200px", dataType: "object", formatter: function(val) { return val.firstName; }}, { headerText: "Last Name", key: "Employee", width: "200px", dataType: "object", formatter: function(val) { return val.lastName; }}, { headerText: "Reports To", key: "Reporting", width: "130px", dataType: "object", formatter: function(val) { return val.reportsTo; }}, { headerText: "Status", key: "Status", width: "130px", dataType: "string", template: statusTemplate }],And in the statusTemplate ${reportsTo} should become ${Reporting.reportsTo}
Also please keep in mind that we handle a single issue per case according to our policy, since this topic is about retrieving data from updated input templates, not binding to complex objects. For better handling your future questions, I suggest creating new forum threads about the new matters. This is for better consistency and history tracking.
Thank you for using IgniteUI
Hi Deyan,
I will be having json data in below format, so I wanted to know how to bind this data to igTreeGrid
var flatDS = [ { "Employee":{ "employeeID": 0, "PID": -1, "firstName": "Andrew", "lastName": "Fuller"}, "Reporting":{reportsTo": "-"} }, { "Employee":{"employeeID": 1, "PID": -1, "firstName": "Jonathan", "lastName": "Smith"}, "Reporting":{ "reportsTo": "-" }}, { "Employee":{"employeeID": 2, "PID": -1, "firstName": "Nancy", "lastName": "Davolio"}, "Reporting":{ "reportsTo": "-" }}, { "Employee":{"employeeID": 3, "PID": -1, "firstName": "Steven", "lastName": "Buchanan"}, "Reporting":{ "reportsTo": "-" }}, // sub of ID 1 { "Employee":{"employeeID": 4, "PID": 0, "firstName": "Janet", "lastName": "Leverling"}, "Reporting":{ "reportsTo": "0" }}, { "Employee":{"employeeID": 5, "PID": 0, "firstName": "Laura", "lastName": "Callahan"}, "Reporting":{ "reportsTo": "0" }}, { "Employee":{"employeeID": 6, "PID": 0, "firstName": "Margaret", "lastName": "Peacock"}, "Reporting":{ "reportsTo": "0" }}, { "Employee":{"employeeID": 7, "PID": 0, "firstName": "Michael", "lastName": "Suyama"}, "Reporting":{ "reportsTo": "0" }}, // sub of ID 4 { "Employee":{"employeeID": 8, "PID": 4, "firstName": "Anne", "lastName": "Dodsworth"}, "Reporting":{ "reportsTo": "4" }}, { "Employee":{"employeeID": 9, "PID": 4, "firstName": "Danielle", "lastName": "Davis"}, "Reporting":{ "reportsTo": "4" }}, { "Employee":{"employeeID": 10, "PID": 4, "firstName": "Robert", "lastName": "King"}, "Reporting":{ "reportsTo": "4" }}, // sub of ID 2 { "Employee":{"employeeID": 11, "PID": 2, "firstName": "Peter", "lastName": "Lewis"}, "Reporting":{ "reportsTo": "2" }}, { "Employee":{"employeeID": 12, "PID": 2, "firstName": "Ryder", "lastName": "Zenaida"}, "Reporting":{ "reportsTo": "2" }}, { "Employee":{"employeeID": 13, "PID": 2, "firstName": "Wang", "lastName": "Mercedes"}, "Reporting":{ "reportsTo": "2" }}, // sub of ID 3 { "Employee":{"employeeID": 14, "PID": 3, "firstName": "Theodore", "lastName": "Zia"}, "Reporting":{ "reportsTo": "3" }}, { "Employee":{"employeeID": 15, "PID": 3, "firstName": "Lacota", "lastName": "Mufutau"}, "Reporting":{ "reportsTo": "3" }}, // sub of ID 16 { "Employee":{"employeeID": 16, "PID": 15, "firstName": "Jin", "lastName": "Elliott"}, "Reporting":{ "reportsTo": "16" }}, { "Employee":{"employeeID": 17, "PID": 15, "firstName": "Armand", "lastName": "Ross"}, "Reporting":{ "reportsTo": "16" }}, { "Employee":{"employeeID": 18, "PID": 15, "firstName": "Dane", "lastName": "Rodriquez"}, "Reporting":{ "reportsTo": "16" }}, // sub of ID 19 { "Employee":{"employeeID": 19, "PID": 18, "firstName": "Declan", "lastName": "Lester"}, "Reporting":{ "reportsTo": "19" }}, { "Employee":{"employeeID": 20, "PID": 18, "firstName": "Bernard", "lastName": "Jarvis"}, "Reporting":{ "reportsTo": "19" }}, // sub of ID 20 { "Employee":{"employeeID": 21, "PID": 20, "firstName": "Jeremy", "lastName": "Donaldson"}, "Reporting":{ "reportsTo": "20" }} ];
and current treegrid code is as below
$("#treegrid1").igTreeGrid({ width: "100%", dataSource: flatDS, //bound to flat data source, autoGenerateColumns: false, primaryKey: "employeeID", foreignKey: "PID", initialExpandDepth: 1, columns: [ { headerText: "Employee ID", key: "employeeID", width: "200px", dataType: "number" }, { headerText: "First Name", key: "firstName", width: "220px", dataType: "string" }, { headerText: "Last Name", key: "lastName", width: "220px", dataType: "string" }, { headerText: "Reports To", key: "reportsTo", width: "130px", dataType: "number" }, { headerText: "Status", key: "Status", width: "130px", dataType: "string", template: statusTemplate } ], rendered: function (evt, ui) { ui.owner.element .find('input#txtName,input#txtAddress') .change(collectValue); } }); });
function collectValue() { changedValues[$(this).parents('tr').attr('data-id')] = this.value; }
Hello Tushar,
The above functionality doesn't contain anything AngularJS specific and you should be able to include it in your application. You can review our IgniteUI AngularJS directives here and here. You can include them and use them to instantiate IgniteUI controls.
Hello Deyan,
How to implement above functionality in AngularJS, also if you have any architectural design using angularjs then please let me know.
That's awesome. It's great that you're choosing IgniteUI. Please don't hesitate to contact us for any further assistance.