Detailtemplate not working with angularjs ng-show

9 posts, 1 answers
  1. Steve
    Steve avatar
    22 posts
    Member since:
    Feb 2016

    Posted 17 Mar 2016 Link to this post

    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

     

     

     

  2. Steve
    Steve avatar
    22 posts
    Member since:
    Feb 2016

    Posted 17 Mar 2016 in reply to Steve Link to this post

    Just a little addition, the same behavior and ng-show works in the custom popup editor template
  3. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 22 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Steve
    Steve avatar
    22 posts
    Member since:
    Feb 2016

    Posted 22 Mar 2016 in reply to Daniel Link to this post

    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

     

  5. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 24 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Steve
    Steve avatar
    22 posts
    Member since:
    Feb 2016

    Posted 24 Mar 2016 in reply to Daniel Link to this post

    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

  7. Steve
    Steve avatar
    22 posts
    Member since:
    Feb 2016

    Posted 25 Mar 2016 in reply to Steve Link to this post

    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

     

  8. Answer
    Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 28 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Steve
    Steve avatar
    22 posts
    Member since:
    Feb 2016

    Posted 28 Mar 2016 in reply to Daniel Link to this post

    Hi,

        It works.

    Thank you for your help.

Back to Top