1. Home
  2. Forum
  3. Angular
  4. Grid details template not working - createEmbeddedView error

Grid details template not working - createEmbeddedView error

Hi,

i tried to add a details template on a working grid as described here:
https://help.syncfusion.com/angular/grid/row#details-template


<ej-grid #myGrid id="MyGrid" [dataSource]="gridData" 
         detailsTemplate="#gdTemplate">
    <e-columns>
        <e-column [isPrimaryKey]="true" [isIdentity]="true" field="Id" headerText="ID" width="75" textAlign="right" [allowFiltering]="false">
        ...
        ...
    </e-columns>
    <ng-template #gdTemplate e-details-template let-data>
        <div>
            Hello Details
            https://help.syncfusion.com/angular/grid/row
        </div>
    </ng-template>
</ej-grid>


However - when i click on the grid row for the details I get an error:
TypeError: Cannot read property 'createEmbeddedView' of undefined
    at EJTemplateDirective.compileTempalte (template.js:63)
at HTMLElement. (template.js:45)
    at HTMLElement.dispatch (jquery-3.2.1.min.js:3)
    at HTMLElement.q.handle (jquery-3.2.1.min.js:3)
    at Object.trigger (jquery-3.2.1.min.js:4)
    at HTMLElement. (jquery-3.2.1.min.js:4)
    at Function.each (jquery-3.2.1.min.js:2)
    at r.fn.init.each (jquery-3.2.1.min.js:2)
    at r.fn.init.trigger (jquery-3.2.1.min.js:4)
    at Object._trigger (ej.core.min.js:10)

I'm using the 15.4 components

Would be great to get a hint to fix the problem

Best regards
Martin

8 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team August 17, 2018 11:25 AM UTC

Hi Martin, 

Thanks for contacting Syncfusion support. 

Query :  Cannot read property 'createEmbeddedView' of undefined 
 
We have checked the reported issue by creating a sample with the given code example. We are unable to reproduce the mentioned issue on our side. Please refer the below link for sample. 


Please provide the following details so that we can reproduce the issue on our side and provide the solution as soon as possible. 

  1. Share the full grid code example.

  1. If possible please try to reproduce the mentioned issue in the attached sample.

Regards, 
Prasanna Kumar N.S.V 
 


MS Martin Strojek August 17, 2018 03:05 PM UTC

Hi,

the example did not work either for me - I used 15.4.17 and then upgraded to 15.4.30

After i changed to 16.2.48 the example is working BUT: All other grids are not working any more when using filtered columns.
The error is:

ERROR TypeError: i.toLowerCase is not a function
    at new t.Predicate (ej.data.min.js:10)
    at Object.t.Predicate (ej.data.min.js:10)
    at Object._ensureDataSource (ej.grid.min.js:10)
    at Object._initDataSource (ej.grid.min.js:10)
    at Object._checkDataBinding (ej.grid.min.js:10)
    at Object._init (ej.grid.min.js:10)
    at new <anonymous> (ej.core.min.js:10)
    at r.fn.init.n.fn.(anonymous function) [as ejGrid] (http://localhost:49464/dist/main-client.js?v=QgEGI7XD8jYz03mJqEyk_gvHe3jZqyNzZw0pgqAa_tk:5251:23598)
    at GridComponent.EJComponents.ngAfterViewInit (core.js:183)
    at callProviderLifecycles (vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:22246)

I found this post: https://www.syncfusion.com/forums/135065/javascritp-error-in-performing-column-filter
A similar error should have been fixed many versions before.

Is it back in?
How can i fix it?

For the basic example of your reply filtering is working but I use filter templates which are not working.
This is my code

&lt;e-column field="Title" [allowFiltering]="true" [filterBarTemplate]="filterBarTemplate"&gt;&lt;/e-column&gt;

this.filterOptions = {
            showPredicate: false,
            filteredColumns: [
                {
                    field: 'Title', matchCase: false, operator: [ej.FilterOperators.equal], value: ''
                }
            ]
        };

        this.filterBarTemplate = {
            read: function (args: any) {
                this.filterColumn(args.column.field, "equal", args.element.val(), "and", true)
            },
            write: function (args: any) {

                let data = new Array<any>();
                data.push({ text: 'All', value: '' });
                data.push({ text: 'Vice', value: 'Vice President, Sales' });


                var selectedVal = this.model.filterSettings.filteredColumns[0].value;
                args.element.attr("id", this._id + args.element.attr("id"));
                args.element.ejDropDownList({ width: "100%", dataSource: data, value: selectedVal, change: ej.proxy(args.column.filterBarTemplate.read, this, args) })
            }
        };

PK Prasanna Kumar Viswanathan Syncfusion Team August 20, 2018 09:28 AM UTC

Hi Martin, 

Thanks for contacting Syncfusion support. 

Based on your code example we have prepared a sample and we are able to reproduce the reported issue “ERROR TypeError: i.toLowerCase is not a function” at our end. In your given code example you have define the filteredColumn operator as an array which is the root cause of an issue.  

Find the code example:  

this.filterOptions = { 
            showPredicate: false, 
            filteredColumns: [ 
                { 
                    field: 'Title', matchCase: false, operator: [ej.FilterOperators.equal], value: '' 
                } 
            ] 
        }; 


So, we need to define this as a string or an enum value. Find the modified the code example. 

[app.component.ts] 

export class AppComponent {    

public filterOptions: any; 
    constructor() {     
              this.filterOptions = { 
            showPredicate: false, 
            filteredColumns: [ 
                { 
                   field: 'CustomerID', matchCase: false, operator:"equal", value:' ' 
                } 
            ] 
        }; 
    }    
               
} 
 


Refer the below code example. 


Regards, 
Prasanna Kumar N.S.V 



MS Martin Strojek August 21, 2018 08:57 AM UTC

The example is working now with the correct "operator" parameter value.

However, I'm using datamanager as datasource as well as a custom toolbar.
When the page is loaded, the dropdown filter is shown as expected.

After I hit reload and the grid data has been refreshed, the dropdown filter is gone and a textbox is being displayed instead.

Grid
[toolbarSettings]="toolbarSettingsPJ" 
         (toolbarClick)="onPJToolBarClick($event)"

Codehind
this.toolbarSettingsPJ = { showToolbar: true, toolbarItems: ["search"], customToolbarItems: ["Reload", { templateID: "#ReloadGrid" }] };
...
...
onPJToolBarClick(e: any) { 
        if ( e.itemName == 'Reload' )
        {
            // code to reload grid data
            // setting new datamanager as datasource
        }
    }

Looks like if data is gone for a moment or replaced by the new data from the reload, the filters are affected.

Any suggestions?

Update: After some browser refresh the dropdown is gone on page load too.
When i hit my refresh button in the custom toolbar the dropdown apperars for a second and disappears again when the data is loaded.

Best regards
Martin

MS Martin Strojek August 21, 2018 12:52 PM UTC

Found the problem:

I use a modifier for header text:

 headerText="{{'grid.label.status' | translate}}"

This breaks the filter - any ideas why?
headerText="Status" works - but the modifier not....

The filter is broken when i put a pipe modifier on any of the headers - even if that column has no filter set.

Update:
I removed the translations and set the headerText static.
The filter dropdown shows up - however - after reload of grid data via custom command button (see code above) the filter dropdown changes to a text input.
I'm sure that did not happenen during some of the tests before. Can't explain what happens.
Fixed by using this.grid.widget.refreshContent(); instead of resetting data source.
Translation problem still exists.



PK Prasanna Kumar Viswanathan Syncfusion Team August 21, 2018 01:01 PM UTC

Hi Martin, 

Query: “After I hit reload and the grid data has been refreshed, the dropdown filter is gone and a textbox is being displayed instead.” 

We are happy to hear that your issue has been fixed. 

Query: “headerText="{{'grid.label.status' | translate}}” 

We checked in our sample by defining the modifier headerText and we unable to reproduce the issue while filtering the column in Grid. 

To find out the root cause, please share the following details. 

1. Have you faced any script error in console when filter is broken? If yes, share the screenshot and stackrace of an error 

2. Share the complete code example of an Grid.  

3. Share Essential Studio Version details.  

Regards, 
Prasanna Kumar N.S.V 


MS Martin Strojek August 21, 2018 01:39 PM UTC

Hi,

there are no script errors, just the broken filter.

The translation component is ngx-translate. I guess it's some issue with the data binding?
Using headerText="{{'grid.label.Status' | translate}}" is used in the template

PK Prasanna Kumar Viswanathan Syncfusion Team August 24, 2018 12:29 PM UTC

Hi Martin, 

Sorry for the late reply.  

In our application we install the ngx-translate, but when we run the sample we faced script error in console page at initial rendering. So, we unable to reproduce the mentioned issue in our application. 

In previous update you have mentioned it breaks the filter when you put the pipe modifiers on any of the headers. In Grid the filter operation will be based on the field not the headerText. So, we suspect the mentioned issue(broken filter) is not reproduced due to the pipe modified on the headers. 

To find out the root cause, please share the following details. 

1. Share the video demonstration of an issue.  

2. The purpose of using ngx-translate in your application.  

3. If possible, try to reproduce the issue in the attached sample.  


The ngx-translate is used to define the translations for your content in different languages and switch between them easily.  So, we suspect that you need to modify the headerText in Grid. We can also programmatically change the Grid headerText with the refreshHeader and setWidthToColumns method of ejGrid. 

In the below code example we can achieve this using an external button click event.. 

[app.component.html] 
 
<input type="button" ej-button id="button" [value]="text" [size]="medium" (ejclick)="onExternalbuttonClick($event)" /> 
 
------------------------------------------------------------------- 
[app.component.ts] 
 
export class AppComponent { 
constructor() {     
        this.text = "External Click";      
    } 
    
    onExternalbuttonClick(args: any){ 
        var gridObj = $("#Grid").ejGrid("instance");  
        gridObj.model.columns[2]['headerText'] = "New Customer header"; 
        gridObj.refreshHeader(); 
        gridObj.setWidthToColumns(); 
    }    
               
} 
 

Refer the help documentation. 




Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon