Grid inside of grid reading child array of data

[jeff]

Hi folks!
I have a grid, where a td in the table row contains both various dataItems and a grid, for displaying a hierarchical array (parts) of data:

{
    "telephone":"4215278204",
    "parts": [
      {
        "partNumber":95412335,
        "partName":"Widget 1"
      },
      {
        "partNumber":95417256,
        "partName":"Widget 2"
      },
      {
        "partNumber":12655026,
        "partName":"Widget 3"
      },
      {
        "partNumber":12638611,
        "partName":"Widget 4"
      }
          ],
    "supplierCompany":"ACME, INC.",
    "supplierLocation":"Austin, TX",
    "description":"Goods, etc.."
},

How can I read that 'parts" array in my embedded grid?

[jeff]

In other words, I have a nested grid inside a column/td on a grid (rather than in detailRow); can I read from a nested array? Thank you!

[Alexander Popov]

Hi Jeff,

You can achieve similar behavior by getting the dataItem of the master row during the detail initialization and use the parts fields as a DataSource for the child Grid. For example: 

function onDetailInit(e) {
  var parentGrid = this;
  $("<div/>").appendTo(e.detailCell).kendoGrid({
    dataSource: parentGrid.dataItem(e.masterRow).parts
  });
}

Regards,
Alexander Popov
Telerik

 

 

[jeff]

Hi Alexander,
Very interesting! Thank you for the response, but my issue is that my proposed nested grid is located inside the table row/td itself, not inside the detailRow.. I'm also (of course) having significant rendering issues, nested grid disappearing when parent grid paginates/refreshes, etc.. but first thing, first: could I instead define my child grid datasource from within dataBound, or what would you recommend?

Thank you again,

Jeff

[Alexander Popov]

Hello Jeff,

Is the nested Grid shown only when editing the cell or at all times? The first scenario can be handled using a custom editor, while the second - by initializing the nested Grid from withing the master Grid's dataBound event handler. You can also check this example, which illustrates how similar scenario is handled when using popup editing mode.

Regards,
Alexander Popov
Telerik

 

 

[jeff]

Hi,
The nested grid is always displayed. I created a dojo to illustrate:

http://dojo.telerik.com/@crunchfactory/aboTA/3

I can't figure out how to get the nested grid in the table row and the nested grid in the detailInit(e) to read from the nested data arrays without error. (I included placement data so they would display, but I'm obviously trying to get it from the data for each row, etc..)

Thank you!

[jeff]

Hi Alexander; any updates? Thank you!

[Atanas Korchev]

Hello Jeff,

In that case you don't need to use the detailInit and detailTemplate. You can just create the grid in the template of the parent grid column and use MVVM to bind it. Here is a demo: http://dojo.telerik.com/@korchev/UZofa

Regards,
Atanas Korchev
Telerik

 

 

[jeff]

I still needed the detailTemplate (to display other data), etc.. and it created more issues than it solved, however, binding data via MVVM is absolutely awesome; I have it going, working well. Thank you!

[jeff]

I wish one could edit their posts here... Ok, one last part of the puzzle here; on my original dojo http://dojo.telerik.com/@crunchfactory/aboTA/3 - I have tooltips enabled in 3 areas. On the new MVVM version, they work as expected on the two data-fields in the table row/td, however, in the nested grid, the tooltips always contain the data from the first row. How do I get around this?

01.$("#appleApprovalQueue").kendoTooltip({
02.        filter: "a.mightyDifficult",
03.        position: "top",
04.        showOn: "click",
05.        autoHide: false,
06.        content: function (e) {
07.            var dataItem = $("#appleApprovalQueue").data("kendoGrid").dataItem(e.target.closest("tr"));
08.            var content = dataItem.partName;
09.            return content;
10.        }
11.    }).data("kendoTooltip");

Any ideas on why it's only getting the data from the first row and repeating it on other rows?

Thank you!

[Atanas Korchev]

Hello Jeff,

I updated the demo to include this capability: http://dojo.telerik.com/@korchev/UZofa

I had to set the row template of the nested grid in order to embed the <a class="mightyDifficult"> link. Having two nested MVVM grids is a bit difficult considering the fact the nested one is defined in an escaped attribute string of the parent.

Regards,
Atanas Korchev
Telerik

 

 

[jeff]

Hi Atanas,

Thank you so much, this did the trick; in order to keep the continuity, I had to declare the rowTemplate and altRowTemplate, etc.., but it was really binding the dataItem target to look for the closest [data-role=grid] that was pivotal; now I'm really seeing the flexibility of the mvvm framework; I need another lifetime just study this!!!

Thanks again!

[jeff]

Hi Atanas,

Since we already have the code in place in the dojo - http://dojo.telerik.com/@korchev/UZofa; can I do an external text filter on the mvvm grid? I need to be able to filter the partNumber in the nested grid, but remove rows from the parent grid if the nested grid does contain the filter criteria. Make sense?

Thank you!

[Atanas Korchev]

Hi Jeff,

I am not sure if that's possible. The data source filtering will remove all items that don't match certain criteria. I can't think of a way to filter the parent grid from the child grids however.

Regards,
Atanas Korchev
Telerik

 

 

[jeff]

Hi!

I thought it might be possible in this case, because the data for the nested grid is an array of the parent grids data; basically search the parent grids data for it, etc.. Possible now?

[jeff]

btw, I wouldn't be really filtering the nested grid, just the parent..

[Atanas Korchev]

Hello Jeff,

How do you want to filter the parent grid? Could you clarify? What is the UI you would like to show to the end user?

Regards,
Atanas Korchev
Telerik

 

 

[jeff]

Hi Atanas,

I'd like to have an external text input that filters by partNumber (or everything, if it makes much difference..) and hide parent grid rows that don't possess a match.

Thank you!

[Atanas Korchev]

Hello Jeff,

You should use the filter method of the data source to implement filtering. Here is a demo: http://dojo.telerik.com/@korchev/UZofa


The interesting code is this:
 <input data-bind="value: partNumber">
<button data-bind="click: filter">filter</button>
<script>
    var observable = kendo.observable({
      partNumber: 12345671,
      filter: function() {
        this.source.filter( {
          field: "partNumber",
          operator: "eq",
          value: this.partNumber
        }) ;
      },
      source : new kendo.data.DataSource(
   /* rest of declaration */

Regards,
Atanas Korchev
Telerik

 

 

[jeff]

Hello Atanas,

Thank you for your assistance! Interesting, but it appears it was unfortunately looking for the 'demo' partNumber, not the nested array with partNumber in it; how would this work? - I've edited the dojo:

http://dojo.telerik.com/@crunchfactory/iWUpO

 

[Atanas Korchev]

Hello Jeff,

You need to implement a custom filter in this case because you want to filter array items. Here is how: http://dojo.telerik.com/@korchev/ODurA

The code is this:

filter: function() {
        this.source.filter( {
          field: "parts",
          value: this.partNumber,
          operator: function(parts, partNumber) {
        return $.grep(parts, function(part) {
          return part.partNumber == partNumber;
            }).length > 0;
          }
        }) ;
      },

Regards,
Atanas Korchev
Telerik