Kendo UI for Angular - grid data preview from a second dataService

[Giorgi]

Hello, 
I have the same issue like THIS. Edsel Garcia helped me last time. This time I have to implement it in Kendo UI for Angular.
I saw a question in stackoverflow, but there is no activity.
The idea is that a have a grid with some data from dataService1. It has a column "Contract_id". There is a second dataService2 where the "Name" of this "Contract_id" is and I want to preview the Name in the browser. The only way to attach another [data] to the kendo-grid I found was with kendo-dropdownlist, but currently I dont need a dropdownlins.


Can you show me some example or give me some documents to read.

[Konstantin Dikov]

Hi Giorgi,

For achieving the desired behavior with a built-in functionality of the Grid widget you could populate the "values" collection of the "Contract_id" column, which will allow the Grid to find the matching values with the Names from the values collection:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.values

Another option would be to use a function for the template of the column and manually return the corresponding value.

Nevertheless, note that in both cases you need to have the data with the names and the id's prior to the binding of the Grid.


Regards,
Konstantin Dikov
Progress Telerik

[Giorgi]

Hello Konstantin, 

Is the first option is applicable to Kendo UI for Angular (2/4)? And what will be the syntaxis to do this. In my case:

<form novalidate #myForm="ngForm">
<kendo-grid
    [data]="gridData | async"
        <kendo-grid-column field="Contract_id" title="Contract_id"></kendo-grid-column>
        <kendo-grid-span-column>
            <kendo-grid-column field="Employee_id" title="Employee_id">
            </kendo-grid-column>
            <ng-template kendoGridCellTemplate let-dataItem>
                <h4>{{dataItem.NameFromAnotherDataSource}}</h4>
            </ng-template>
        </kendo-grid-span-column>
        <kendo-grid-column field="Contract_Num" title="Contract_Num"></kendo-grid-column>

</kendo-grid>

 

I want to get the "Name" corresponding to "values"/Employee_id automatically from my dataSource. Is there a suitable component to attach a [data] / dataSource, like <kendo-chart-series-item or <kendo-autocomplete or <kendo-dropdownlist ( which is the best option I see in my case, because you can choose which data, textField and valueField to use.

<kendo-dropdownlist
                  [data]="categories"
                  textField="CategoryName"
                  valueField="CategoryID"

 

 

 

[Dimiter Topalov]

Hi Giorgi,

I am sorry for the misunderstanding. The initial suggestion was targeting the Kendo UI for jQuery Grid, based on the product type from the Ticket info.

In the context of an Angular application using the Kendo UI for Angular components, you can follow the approach, described in the following custom editing online demo:

http://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/

... where the Category column is edited via a DropDownList, and the Grid and the DropDownList are bound to separate services:

<kendo-grid [data]="gridData"...
...
<kendo-grid-column field="CategoryID" title="Category" width="150">

              <ng-template kendoGridCellTemplate let-dataItem>

                {{category(dataItem.CategoryID)?.CategoryName}}

              </ng-template>

              <ng-template kendoGridEditTemplate

                let-dataItem="dataItem"

                let-formGroup="formGroup">

                <kendo-dropdownlist

                  [data]="categories"

                  textField="CategoryName"

                  valueField="CategoryID"

                  [valuePrimitive]="true"

                  [formControl]="formGroup.get('CategoryID')"

                >

                </kendo-dropdownlist>

              </ng-template>

            </kendo-grid-column>

If you only want to display data from another source (as opposed to be able to edit it), you will need to filter the second source, based on some key, coming from the data the Grid is bound to.

Here is another example on utilizing master-detail Grids to display details about a foreign key column:

http://plnkr.co/edit/Ai3HjhUjS6dwRZVdZ4oA?p=preview

Either way, the data that will be displayed in the template, needs to come after filtering the second data source, based on key, coming from the first data source.

I hope this helps, but if I am missing something, please describe the scenario and the desired result in further details, so I can try providing a more to-the-point suggestion, based on the specific situation. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik