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%" } ] } ];
Thanks a lot Deyan, this is the what I was looking for...
Basically I am migrating my Silverlight(SL) application to any of the JS framework, so I was doing poc with different treegrid available on net and igTreegrid looks to be perfect replacement for SL treegrid.
I am looking forward to keep any proper design pattern which is smooth going with these ig controls, preferable MVC4.
Thanks,Tushar
You can get only the changed values using the jQuery change event. I added getChangedValues button to the sample to demonstrate it.
Thanks for your prompt response DeyanK.
Let me correct my requirement, here I want values only for updated input controls with row-id.
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.