ASP.NET Telerik 컨트롤 스타일링 (jQuery 포함)

Question

CssClass = "mandatory"인 radTextBox가 있습니다.

$(".mandatory").focusout(function() { 
    if($(this).val() == "") $(this).css("border", "1px solid #ff0000"); 
}); 

문제는 대한 focusOut에, 내 스타일은 컨트롤이 다른 이벤트에 기본적으로 가지고있는 클래스가 "덮어 쓰기"라는 것이다 : jQuery를에 나는 다음 일을해야합니다. 나는 또한 jQuery를에 다음 일을 시도하지했습니다

$(".mandatory").focusout(function() { 
    if($(this).val() == "") $(this).addClass("mandatoryErr"); 
}); 

하지만 여전히 아무것도,이 추가 된 후 클래스가 즉시 제거됩니다. 그래서 jQuery를 사용하여 teleriks 컨트롤에 스타일을 추가 할 수 있습니까?

Answer 1

가장 쉬운 방법은 RadTextBox의 Client-side API을 사용하여 클라이언트의 다양한 스타일 옵션에 연결하는 것입니다.

 <script type="text/javascript"> 
     function ChangeBorder() { 
      var textBox = $find("<%= RadTextBox1.ClientID %>"); 
      if (textBox.get_value() == "") { 
       textBox.get_styles().EnabledStyle[0] += "border-color: #ff0000"; 
       textBox.updateCssClass(); 
      } 
      else { 
       //revert back to old CSS 
      } 
     } 
    </script> 

    <telerik:RadTextBox ID="RadTextBox1" runat="server" ClientEvents-OnBlur="ChangeBorder"> 
    </telerik:RadTextBox> 

중요한 항목이 나갈 우리가 RadTextBox의 클라이언트 측 이벤트 (OnBlur)에 가입되어 있습니다 : 여기에 기본적으로 초기 코드를 취하고 RadTextBox의 API에 적용되는 단편이다. 그런 다음 RadTextBox 클라이언트 측 객체에 액세스하여 값이 ""인지 여부를 확인한 다음 RadTextBox 객체의 스타일에 액세스합니다. several different styles이 있지만 EnabledStyle을 찾는 것처럼 보입니다. 일부 CSS를 직접 적용하려면 스타일 배열의 첫 번째 요소 만 사용하십시오. 또는 CSSClass를 적용 할 수 있습니다 :

textBox.get_styles().EnabledStyle[1] += " mandatoryErr"; 

스타일 배열에서 두 번째 요소에 액세스 할 위치. 여기서 당신은 (예를 들어)이 될 mandatoryErr 수 있습니다 :

<style> 
    .mandatoryErr 
    { 
     border-color: #ff0000 !important; 
    } 
</style> 

사용중인 경우 !important 태그 (그렇지 않으면 적용되지 않습니다, CSS 규칙의 특이성을 높이기 위해 단지가 내장 된 스타일).

이 모든 것에 대한 자세한 내용을 보려면 연결된 설명서 기사가 도움이 될 것입니다. 또한 Chrome 개발자 도구 및 FireBug를 사용하여 위의 변수 textBox을 검사하고 _styles 속성이 보유하고있는 내용을 확인할 수 있습니다.

Answer 2

나는 이것을 수행했으며 저에게 적합합니다.

 function txtRadNum_change(e){ 
      var mustAddColor = e.get_value() == ""; 
      e.get_styles().EnabledStyle[0] = getStyle(e.get_styles().EnabledStyle[0], mustAddColor); 
      e.get_styles().FocusedStyle[0] = getStyle(e.get_styles().FocusedStyle[0], mustAddColor); 
      e.get_styles().HoveredStyle[0] = getStyle(e.get_styles().HoveredStyle[0], mustAddColor); 
     } 

     function getStyle(originalStyle, mustAddColor){ 
      var lstStyles = originalStyle.split(';'); 
      var newEnabledStyle = ""; 
      $.each(lstStyles, function(idx, style){ 
       if(style.indexOf("background-color") < 0 && style != ""){ 
        newEnabledStyle += style + ";"; 
       } 
      }); 

      if(mustAddColor){ 
       newEnabledStyle += "background-color:#FC4C02;" 
      } 

      return newEnabledStyle; 
     } 

당신은 EnabledStyle, FocusedStyle 및 HoveredStyle http://docs.telerik.com/devtools/aspnet-ajax/controls/input/client-side-programming/inputstyles-client-object

를 오버라이드 (override) 할 필요가