We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Angular templates, col width, excel filters bugs

http://jsplayground.syncfusion.com/xt2j13ud
Bug #1
Angular template is not working as templated column (there is another thread, where same bug is confirmed only on remote data). In addition - ng-click cannot be bound to ng controller as vm.
Bug #2
Angular details template is working (this._trigger("refresh"); looks strange)! However how can I access row data object?
Bug #3
Columns widths are out of sync with headers, as soon as user scrolls down! This is not a bug, if row details template is removed.

Bug #4
I haven't read more documentation, but basic tests with excel-like filters are failing badly. Simple "Close" filters pop up is not working... Maybe this happens due to lack of specified settings...

#1, #2, #3 are really crucial for me.

5 Replies

RI Ricardas January 26, 2016 01:43 PM UTC

new sample (with local data) to illustrate few more bugs/problems:

Bug #4

Angular expression template column is blanked out, when jumping in/out of edit mode in different rows

Problem #5
After Freight value is altered in any row, SUM field is not recalculated, because I cannot initiate $scope.$digest (grid's summary is not an option for me). How can I catch that row has been edited?

Problem #6
Is it possible to have rows in edit mode all the time?

Bug #7
Wrong focus, when clicking on Ship City cell to edit. Focus is set to first input field, not to the one which has been double clicked.




RI Ricardas January 26, 2016 03:56 PM UTC


Bug #8
When user does some scrolling, ng-templates fail to update according to local data changes.

I have solved some previously mentioned issues.
I use only read-only mode grid, I also use only ng-template columns for always-edit cells. With classic paging ng-templates don't lose binding and are always in sync with local data. I have to mention one more time, that ng-templates don't work at all with server side (remote) data.

Here is my most successful example, with 800 local records:
http://jsplayground.syncfusion.com/s2nijmu3

So to sum up, issues which are still very important and critical for me:
bug #1, bug #2, bug #3 !!!


#4-#8 might be ignored for now.


RU Ragavee U S Syncfusion Team January 28, 2016 12:28 PM UTC

Hi Ricardas,

Thanks for contacting Syncfusion support.

Query #1: Angular template is not working as templated column

We considered this query “Template column not rendered in angularJS when binding remote data” as a bug. We have logged a report on this and will fix the issue internally, also the fix will be included in 2015 Volume 4  Service Pack 2 release which has been scheduled to be rolled out in the month of March 2016.

We have also created an incident internally to have a follow up with this issue.

Query #2: In addition - ng-click cannot be bound to ng controller as vm.

We need to bind the ng-click action using the angular $parent property. Please refer to the code example.

<script id="actionTemplateNg" type="text/ng-template">

        <pre ng-click='$parent.vm.onDetailsClick(data)'>{{data | json}}</pre>
    </script>


Query #3: Angular details template is working (this._trigger("refresh"); looks strange)!

We need to refresh the template while rendering the template element. So we have explicitly called the refresh event in the detailsDataBound event of the Grid.

We considered the query “DetailsTemplate not compiled in angularJS” as a bug. We have logged a report on this and will fix the issue internally, also the fix will be included in 2015 Volume 4  Service Pack 2 release which has been scheduled to be rolled out in the month of March 2016.

We have also created an incident internally to have a follow up with this issue.

Query #4: However how can I access row data object?

We can get the row data object using the items[0] parameter. Please refer to the below code example.

<script id="gridDetailsNg" type="text/ng-template">

        <pre>details ng template, data: {{items[0] | json}} , ng sum expression works: {{3 + 4}}</pre>
    </script>


We have modified the sample based on your requirement, which can be found in the below location.

Demo Link: http://jsplayground.syncfusion.com/rctfxzt2

Query #5: Columns widths are out of sync with headers, as soon as user scrolls down! This is not a bug, if row details template is removed.

We have provided only limited support to Virtual Scrolling. The following list of Grid feature will not work when Virtual Scrolling enabled.
· Editing
· Frozen rows and columns
· Cell Merging
· Responsive Grid
· Grouping
· Detail Template and Hierarchy Grid

We considered the requirement “Virtual Scrolling Improvements” as a feature. We have already added it to our feature request list and will be implemented in any of our upcoming releases.

So if you are in need to use those above listed features then we suggest you to use Pager in Grid control that supports “on-demand paging”.

Query #6: Angular expression template column is blanked out, when jumping in/out of edit mode in different rows

We considered the query “Template column becomes blank upon editing and saving a record” as a bug. We have logged a report on this and will fix the issue internally, also the fix will be included in 2015 Volume 4  Service Pack 2 release which has been scheduled to be rolled out in the month of March 2016.

We have also created an incident internally to have a follow up with this issue.

Query #7: After Freight value is altered in any row, SUM field is not recalculated, because I cannot initiate $scope.$digest (grid's summary is not an option for me). How can I catch that row has been edited?

We can achieve your requirement by initiating the angular $digest method in the actionComplete event of the Grid. Please refer to the below code example.

<div>

        <span ng-click="$scope.$digest()" class="freight">Freight sum: {{vm.freightSum()}} (you can click me, if sum does not refresh)</span>

    </div>


function PhoneListCtrl() {

            var vm = this;

            vm.grid = {

                dataManager: window.localdata,

                editSettings: { allowEditing: true, allowAdding: false, allowDeleting: false },

               

                actioncomplete : function(e){

                if(e.requestType == "save"){ //when saving any record

                    var scope = angular.element($(".freight")).scope();

                    scope.$digest();

                }

            }

            };
       };


Query #8: Is it possible to have rows in edit mode all the time?

It is not possible to have rows in edit mode all the time. But we have an inbuilt api showAddNewRow for having an addform by default in grid. Please refer to the below online documentation for more information.

http://help.syncfusion.com/js/api/ejgrid#members:editsettings-showaddnewrow

http://help.syncfusion.com/js/grid/editing#render-with-blank-row-for-easy-add-new

If you want to enable editing in single click, then we suggest you to use batch Edit mode. Please refer to the below online sample link.

http://js.syncfusion.com/demos/web/#!/azure/grid/editing/batchediting

Query #9: Wrong focus, when clicking on Ship City cell to edit. Focus is set to first input field, not to the one which has been double clicked.

It is the default behavior in normal editing. When a row is edited, by default the focus is set to the first enabled element in the form.

Query #10: When user does some scrolling, ng-templates fail to update according to local data changes.

We considered the query “Ng-Click event unwired from the previously rendered tr in virtual scrolling” as a bug. We have logged a report on this and will fix the issue internally, also the fix will be included in 2015 Volume 4  Service Pack 2 release which has been scheduled to be rolled out in the month of March 2016.

We have also created an incident internally to have a follow up with this issue.

Regards,
Ragavee U S.


RI Ricardas January 28, 2016 03:23 PM UTC

Thank you very much for great effort answering all those issues.

However I not satisfied with two answers from the list:

Query #8: Is it possible to have rows in edit mode all the time?
I need always edit mode. because it's much better user experience (it's straight forward what user is allowed to do), when only few cells in the row are editable.. It's excel like user experience. Well, take it as feature request then.

Query #9: 
Wrong focus, when clicking on Ship City cell to edit. Focus is set to first input field, not to the one which has been double clicked.
If Query #8 is solved, then it's not big issue. Otherwise, it's still miss leading user experience, when user double clicks particular cell, not entire row. So focus should go to clicked cell!

Anyways, many tanks to answers. Lets wait for next release, and hopefully documentation gets updated, so nobody else comes with same Angular related questions again :)


RU Ragavee U S Syncfusion Team January 29, 2016 11:01 AM UTC

Hi Ricardas,

Thanks for your update.

Based on your requirement, we have created a sample which can be downloaded from the below location.

Demo Link: http://jsplayground.syncfusion.com/wqgthuh3

In the above sample, we have two template columns “Freight” and “ShipCity” with values bound using ng-model. These columns will be in edit mode always by default. Please refer to the code example.

<script id="freightTemplateNg" type="text/ng-template">

        <input type='number' ng-model='data.Freight' style='width: 100%' class="freight" />

    </script>


    <script id="shipcityTemplateNg" type="text/ng-template">

        <input type='text' ng-model='data.ShipCity' style='width: 100%' class="shipCity" />
    </script>

<div id="grid" ej-grid >

        <div e-columns>

            <div e-column e-headertext="Freight" e-field="Freight" e-template="true" e-templateid="#freightTemplateNg"></div>

            <div e-column e-headertext="Ship City" e-field="ShipCity" e-template="true" e-templateid="#shipcityTemplateNg"></div>

        </div>
    </div>


In the blur event of the input boxes, we have updated the corresponding field value using the updateRecord method of the ejGrid. Please refer to the below code example.

$(function () {

            $(".freight").blur(function (e) {

                update("Freight", parseFloat(e.target.value));//update the field value on focus out

            });

            $(".shipCity").blur(function (e) {

                update("ShipCity", e.target.value);

            });

        });

        function update(fieldName, value) {

            var gridObj = $(".e-grid").ejGrid("instance");

            var index = gridObj.model.selectedRowIndex;//get the edited row index

            var record = gridObj.model.currentViewData[index];// get the edited row data

            record[fieldName] = value;

            gridObj.updateRecord("OrderID", record, "update");//updating the record

            gridObj.refreshContent();//refreshing the grid content
        }


Please refer to the below api reference link for more information on the updateRecord method.

http://help.syncfusion.com/js/api/ejgrid#methods:updaterecord

Regards,
Ragavee U S.

Loader.
Live Chat Icon For mobile
Up arrow icon