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

4 posts, 0 answers
  1. Giorgi
    Giorgi avatar
    4 posts
    Member since:
    Aug 2017

    Posted 17 Aug 2017 Link to this post

    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.
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 21 Aug 2017 Link to this post

    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.
  3. Giorgi
    Giorgi avatar
    4 posts
    Member since:
    Aug 2017

    Posted 21 Aug 2017 in reply to Konstantin Dikov Link to this post

    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"

     

     

     

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1298 posts

    Posted 22 Aug 2017 Link to this post

    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.
Back to Top