Detailtemplate not working with angularjs ng-show

[Steve]

Hi,

     I have a grid with custom popup editor template using angularjs and it works fine so far.  However, when I try to use a detailtemplate in this master detail grid, I have a problem.  I have many ng-show directives like this snippet:

<script type="text/x-kendo-template" id="detailTemplate">
      <div dir-loadtemplate class="detailText">
             <ul>
                   <li ng-show="showCert"><label>CERType: </label>#= CERType == null ? '' : CERType.Description #</li>
                   <li ng-show="showEquipmentClass"><label>EquipmentClass: </label>#= EquipmentClass == null ? '' : EquipmentClass.Description #</li>

I click on row 1, it is good, I click on row 2, it is good, I click on row 1, and some fields are now hidden because I have less fields shown in row 2 than in row 1.

I tried to refresh angular properties like showCert on detailExpand event of the main grid, and it does not work.  I set breakpoint and it pass on the property set (showCert) and value is good.

$scope.ControlAccess = function (e) {
            $scope.showCert = e.AssignmentType != null && e.RequestType != null && e.RequestType.Id == "1" /*Nouvelle assignation*/ && e.AssignmentType.Id == "5" /*Document d'équipement*/;
            $scope.showEquipmentClass = $scope.showCert;

Any idea?

Thank you

 

 

 

[Steve]

Just a little addition, the same behavior and ng-show works in the custom popup editor template

[Daniel]

Hello,

I am not sure if I understand the scenario. Could you clarify how are the showEquipmentClass and showCert fields different for the different details? With the code that you provided they will be the same for all details.

Regards,
Daniel
Telerik

 

 

[Steve]

Well, my show properties are not significant in this example.  Here is the complete method:

$scope.ControlAccess = function (e) {
    $scope.showCert = e.AssignmentType != null && e.RequestType != null && e.RequestType.Id == "1" /*Nouvelle assignation*/ && e.AssignmentType.Id == "5" /*Document d'équipement*/;
    $scope.showEquipmentClass = $scope.showCert;
    $scope.showUnits = e.AssignmentType != null && e.AssignmentType.Id != "4" /*Standard*/;
    $scope.showEquipmentNumber = $scope.showCert;
    $scope.showSubjectCode = e.AssignmentType != null && e.RequestType != null && (e.AssignmentType.Id == "1" /*Dessins isométriques*/ || e.AssignmentType.Id == "3" /*Dessins*/) && e.RequestType.Id == "1" /*Nouvelle assignation*/;
    $scope.showCommodityCode = e.AssignmentType != null && e.RequestType != null && e.AssignmentType.Id == "1" /*Dessins isométriques*/ && e.RequestType.Id == "1" /*Nouvelle assignation*/;
    $scope.showSize = $scope.showSubjectCode;
    $scope.showSequentialNum = $scope.showCommodityCode;
    $scope.showStdType = e.AssignmentType != null && e.RequestType != null && e.AssignmentType.Id == "4" /*Standard*/ && e.RequestType.Id == "1" /*Nouvelle assignation*/;
    $scope.showAttribute = e.AssignmentType != null && e.RequestType != null &&
                            (e.AssignmentType.Id == "1" /*Dessins isométriques*/ || e.AssignmentType.Id == "3" /*Dessins*/ || e.AssignmentType.Id == "4" /*Standard*/ || e.AssignmentType.Id == "5" /*Document d'équipement*/) &&
                            e.RequestType.Id == "1" /*Nouvelle assignation*/;
    $scope.showSheetNumber = e.AssignmentType != null && e.RequestType != null &&
                            (e.AssignmentType.Id == "1" /*Dessins isométriques*/ || e.AssignmentType.Id == "5" /*Document d'équipement*/) &&
                            e.RequestType.Id == "1" /*Nouvelle assignation*/;
    $scope.showTagNumber = e.AssignmentType != null && e.AssignmentType.Id != "6" /*Modèle 3D*/;
    $scope.showTagDescription = e.AssignmentType != null && e.RequestType != null &&
        (e.RequestType.Id == "1" /*Nouvelle assignation*/ || e.AssignmentType.Id == "2" /*Document de projet*/ || e.AssignmentType.Id == "6" /*Modèle 3D*/);

};

 

My first master grid row has an AssignmentType set to 5 and second master grid row has an AssignmentType set to 4.

So, on expand row 1 showCert = true and showStdType = false.  When I expand row 2, showCert = false and showStdType = true.

Problem seems to be that controls hide on expand row 2 are not shown on expand row 1 after like if ng-show wasn't recall on row 1 second expand because it as already be call first time.  In  fact, it should be recall, because template has change...

 

Thank you

 

[Daniel]

Hello again,

Unfortunately I am still not sure if I understand the scenario. The fields that you set on expand are set on the scope which means that they will be shared between on details. So if you change the fields on expand of some row this will affect the already expanded details. The visible state should be determined based on the dataItems in order to be able to show different elements for each detail - example.

Regards,
Daniel
Telerik

 

 

[Steve]

Hi,

   I'm using an angularJs directive to change the scope value on template (using dataitem).  I set a breakpoint in Chrome debugger and the method ControlAccess is called on each detailtemplate shown and value set for show is correct, but template does not show a value hidden before.  

 

Thank you

[Steve]

Hi,

 

    Here is an example done in Kendo UI Dojo to demonstrate the problem.  Expand one row, expand another and expand back the first one.

 

Thank you

 

[Daniel]

Hi,

Thanks for the sample. The problem in this case will occur because the scope changes made in the expand event will not be applied. You should either bind to the event via the k-on-[event name] attribute(updated example) or explicitly call $digest.

Regards,
Daniel
Telerik

 

 

[Steve]

Hi,

    It works.

Thank you for your help.