1. 홈
  2. 질의 응답
  3. accordator에서 ValidatorCalloutExtender를 숨기거나 희미하게하는 방법

accordator에서 ValidatorCalloutExtender를 숨기거나 희미하게하는 방법

2010-06-15 5 views

답변

0

나는 이것을 지금까지 (4 개월?) 알아 냈다고 가정합니다. 그러나 저는 이것을 재미있는 도전으로 여기며 유효성 검사기를 다루었습니다.

해결 방법은 아코디언 컨트롤의 SelectedIndexChanged 이벤트에 연결하여 숨겨진 창에 대한 모든 유효성 검사기를 사용하지 않도록 설정하는 것입니다.

먼저 아코디언 컨트롤에 후크를 추가해야합니다. 이것은 jQuery를 사용한다 (나는 이것을 성취하는 다른 방법을 모른다). 변수는 accordian 함수의 클라이언트 ID를 포함합니다.

var accordianId = 'MyAccordion'; 
    function pageLoad() 
    { 
     var accCtrl = $find(accordianId + '_AccordionExtender'); 
     accCtrl.add_selectedIndexChanged(onAccordionPaneChanged);  
    }

물론 클라이언트 측 (자바 스크립트)입니다.

:

그 후, 우리는 아코디언 창에서 모든 div의를 통해 루프에 onAccordionPaneChanged 방법을 만들고 숨겨진 된 DIV와 관련된 모든 유효성 검사기를 해제 (그리고 새롭게 문을 연 DIV에 대한 모든 유효성 검사기를 사용) 할 필요가 

function onAccordionPaneChanged(sender, eventArgs) 
    { 
     var indexSelectedPane = sender.get_SelectedIndex(); 
     // There are two divs per "pane": 1 Header, 1 Content 
     // That would make the DIV odd, but there's an additional 
     // hidden element at the front, so it's the Even item. 
     var indexContentDiv = (indexSelectedPane * 2) + 2; 
     var accordianControl = document.getElementById(accordianId); 
     var i, boolEnable; 

     for(i = 0; i < accordianControl.children.length; i++) 
     { 
      //Odd number, this must be a Content section 
      boolEnable = false; 
      if (i == indexContentDiv) 
      { 
       boolEnable = true; 
      } 
      EnableDisableValidators(accordianControl.children[i], boolEnable); 
     } 
    }

위 내용에서는 창당 두 개의 DIV를 언급합니다. 어떤 일이 발생하는지는 accordian 컨트롤이 창당 두 개의 DIV를 만듭니다. 하나는 헤더 용이고 다른 하나는 바닥 글용입니다. 모든 하위 항목을 순환하면 다른 모든 DIV가 콘텐츠를 포함하는 DIV가됩니다. 따라서 콘텐츠 섹션에서만 모든 유효성 검사기를 사용하지 않으려면 위의 내용이 "odd"div이고 콘텐츠 div는 (i % 2 == 1)이라는 것을 확인했습니다.

마지막으로 EnableDisableValidators 함수는 주어진 DIV를 가져와 모든 페이지의 유효성 검사기가이 DIV 내의 컨트롤인지 확인합니다. 이 DIV 안에 있으면 전달 된 값 (이 DIV가 선택된 DIV인지 여부에 따라 결정됨)에 따라 유효성 검사기를 사용하거나 사용하지 않도록 설정합니다. 당신이 사업부 내의 모든 컨트롤을 통해 검색 할 수 있도록

는 불행하게도, 아코디언 컨트롤에 의해 생성 된 div의 구체적 

function EnableDisableValidators(divParent, setEnabled) 
    { 
     var childValidator; 
     var j; 
     var k; 

     if (divParent.children == null || divParent.children.length == 0) 
     { 
      return; 
     } 
     // Check all the validators to see if they're one of the children 
     for (j = 0; j < Page_Validators.length; j++) 
     { 
      // Check all the children of the DIV for the given validator 
      for (k = 0; k < divParent.children.length; k++) 
      { 
       if (FindControlRecursive(divParent, Page_Validators[j].id) != null) 
       { 
        ValidatorEnable(Page_Validators[j], setEnabled); 
       } 
      } 
     } 
    }

또 다른 몰락은 우리가 발견해야한다는 것입니다, ID를 가지고 있지 않습니다 DIV 내의 모든 아이들을 재귀를 사용해야합니다. 여기에 위의 간단한 기능이 있습니다.

function FindControlRecursive(parentNode, childID) 
    { 
     var l; 
     var retChild; 

     for (l = 0; l < parentNode.children.length; l++) 
     { 
      if(parentNode.children[l].id != null && 
       parentNode.children[l].id == childID) 
      { 
       return parentNode.children[l]; 
      } 
      else 
      { 
       retChild = FindControlRecursive(parentNode.children[l], childID); 
       if (retChild != null) 
       { 
        return retChild; 
       } 
      } 
     } 
     return null; 
    }

이 방법에는 몇 가지 문제가 있습니다. 첫째, 양식을 제출할 때 현재 창에 표시되는 유효성 검사기 만 오류를 게시합니다. 모든 숨겨진 유효성 검사기는 표시되지 않습니다. 이 문제를 해결하려면 제출하기 전에 모든 Page_Validators를 순환하는 제출 버튼의 기능 "onclick"을 추가하고 제출할 수 있습니다. (그 시점에서) 유효성 검사기를 점검해야 할 수도 있습니다. 그러나 그것은 완전히 다른 질문입니다. ;)

또 다른 문제점은 첨부 된 컨트롤을 클릭 할 때 익스텐더가 표시되는 것입니다. 이 기능을 사용하여 필요한 필드를 표시 할 수 있도록 설정할 때 유효성 검사기 기능을 호출 할 수 있습니다. (다만 가능한 해결책.) 그러나 다시, 그것은 완전히 별개의 질문입니다!

잘하면 도움이됩니다.

출처

2010-10-14 13:23:05 Richard

관련 문제

 관련 문제