This is a migrated thread and some comments may be shown as answers.
Kendo UI for Angular - grid data preview from a second dataService
3 Answers 40 Views
This is a migrated thread and some comments may be shown as answers.
Giorgi
Top achievements
Rank 1
Giorgi asked on 17 Aug 2017, 08:28 AM
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.

3 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 21 Aug 2017, 06:13 AM
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:
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Giorgi
Top achievements
Rank 1
answered on 21 Aug 2017, 07:45 AM

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"

 

 

 

0
Dimiter Topalov
Telerik team
answered on 22 Aug 2017, 08:54 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Giorgi
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Giorgi
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or