Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Andrew
375
How to set a child grid's added row's cells programmatically
posted

Hello,

I am using your grid control with 1 level of child data.

Let's assume the parent data is just a person's details and the child data is a list of beverages that that person likes to drink.

Let's say that data can only be the following:

var beverages = [{"Id": 1, "Name": "Soda", "Description": "Sweet carbonated beverage"},

{"Id": 2, "Name": "Milk", "Description": "Creamy dairy beverage"},

{"Id": 3, "Name": "Juice", "Description": "Sweet fruit beverage"}]

The Child grid is setup with a primary key from the database and then three fields based on the data above: Id, Name, and Description.

When a user clicks to add a new row on this child grid to add a beverage, I am giving them a dialog where the Name field is a comboeditor with the beverage choices above as the datasource. When a user selects a beverage to add to a person's list of beverages, I want to take their choice and programmatically populate the other fields with the corresponding data. I can't figure out how to do this on a child grid's new row. The Id field is hidden and the name and description fields are shown.

I've been playing with trying to set this data on the selectionChanged event of the comboEditor but I haven't been able to get it to work.

selectionChanged: function (evt, ui) {

//this line will display the description as a user selects a new choice

ui.owner.element.closest("tr").next()[0].lastChild.innerText = ui.items[0].data.Description;

var value = ui.items[0].data.Description;

var childgrids = userGrid.igHierarchicalGrid("allChildren");

//not sure what to do here

$.each(childgrids, function (ix, grid) {a

var rows = $(grid).igGridSelection("selectedRows");

$(grid).igGridUpdating("editorForKey", 4).igEditor("value", value);

});


Thanks for any help.

Parents Reply
  • 17590
    Offline posted in reply to juliet

    Hello Juliet,

    Thank you for posting in our community.

    Your are going in the right direction with handling selectionChanged event of the combo editor. In this event we can check whether a new row is being added by checking the data-role attribute of the closest row. If it event is triggered from a newly added row the data-role is going to be "newrow". Afterwards, editor can be accessed by finding the child grid`s table and using editorForKey  method. Once we find the editor its value can be set. For example:

    

    {
                   name: "Updating",
                  columnSettings: [
                   {
                         columnKey : "ShipCity",
                         editorType: "combo",
                         editorOptions: {
                         dataSource : cities,
                         valueKey : "city",
                         textKey : "city",
                         selectionChanged: function(evt, ui) {
                            var editorForShipName = ui.owner.element.closest(".ui-iggrid").find(".ui-iggrid-table:first").data("igGridUpdating").editorForKey("ShipName");
                            if(ui.owner.element.closest("tr").attr("data-role") === "newrow"){
                                 if(ui.items[0].data.city == "New York"){
                                       editorForShipName.igTextEditor("value", "Your value here")
                                 }
                            }
                         }
    

                         }
    

                   }
              ],
              required: true,
              validation: true
             }
            ]
           },

    Attached you will find a small sample illustrating my suggestion. Please test it on your side an let me know if you need any further assistance with this matter.

    igHierarchicalGridPopulateNewlyAddedChildRow.zip
Children
No Data