Show Embedded Data from Web API Lookup in Data Grid

You can map Web API Lookup with columns containing JSON objects to Data Grid columns to show embedded data instead of JSON strings using scripts.

Here we will parse the JSON string in the 8th column of the Data Grid to show only the names.

1. Create a Web API Lookup with a column containing JSON object.

2. Create a Grid Configuration using the lookup.

3. Create a form, and add a Data Grid control.

4. Modify properties of the Data Grid control as follows:

   1. In the Advanced tab, set the script for the On Data Bound property as follows:

      var kGrid = e.sender;

      var allRows = $(kGrid)[0].tbody[0].children;

      ko.utils.arrayForEach(allRows, function(eachRow)

      {

      // Here 8 is the column number containing JSON object.

      var oldText = $(eachRow).find("td:eq(8)").text();

      $(eachRow).find("td:eq(8)").text($.parseJSON(oldText).Name);

      });

Note: The script only affects the displayed values in the Data Grid. Filtering and sorting is still based on the actual JSON string and not the displayed data.