2013-11-22 3 views
1

검도 패널 막대를 사용하고 있습니다. 부분 뷰에서 패널 막대의 각 항목에 대한 다이나믹 콘텐츠를로드하고 있습니다.패널 막대 항목을 확장 할 때마다 패널 막대 항목의 내용을 다시로드하는 방법은 무엇입니까?

항목이 선택 될 때마다 패널 막대 항목의 콘텐츠를 다시로드해야하는 이유는 무엇입니까?

처음 패널 바에서 항목을 선택하면 서버에 아약스 요청을하고 항목의 내용을 채 웁니다. 하지만 두 번째로 선택하면 서버에 요청하지 않습니다. 항목에서 처음 클릭 할 때 서버에서 가져온 이전 데이터를 표시합니다.

항목이 확장 될 때마다 패널 막대 항목의 콘텐츠를 다시로드 할 수있는 방법이 있습니까? 내가 어떻게 할 수 있니?

@(Html.Kendo().PanelBar() 
.Name("QuickViewP") 
.ExpandMode(PanelBarExpandMode.Single) 
.HtmlAttributes(new { style = "width:100%" }) 
.Items(panelbar => 
{ 

    panelbar.Add() 
      .Text("Account Summary") 
      .Expanded(true) 
      .ImageUrl(Url.Content("~/Content/Images/account-summary.png")) 
      .LoadContentFrom("AccountSummary", "QuickView"); 

    panelbar.Add() 
      .Text("Messages & Notifications") 
      .ImageUrl(Url.Content("~/Content/Images/messages.png")) 
      .LoadContentFrom("MessagesNotifications", "QuickView"); 

    panelbar.Add().Text("Investment Elections") 
      .ImageUrl(Url.Content("~/Content/Images/investment.png")) 
      .LoadContentFrom("InvestmentElections", "QuickView"); 

}).Events(events => events.Expand("QuickViewPExpand")) 

나는 이와 같은 이벤트를 추가했습니다. 패널 항목이 확장 될 때마다 새 콘텐츠를 얻을 수 있지만 하지만 문제가 하나 있습니다. 처음 패널 항목을 클릭하면 서버에 2/2 ajax 요청을 보냅니다. . 그 후에는 패널 항목을 클릭 할 때마다 제대로 작동합니다. 아약스 요청을 보내고 새 콘텐츠를 채 웁니다.

패널 항목을 처음 클릭 할 때 하나의 요청 만 보내려면 어떻게해야합니까?

이것은 내가 사용하는 스크립트입니다.

<script> 
    function QuickViewPExpand(e) { 
     debugger; 
     var panelBar = $("#QuickViewP").data("kendoPanelBar"); 


     var item = panelBar.select(); 

     //if (item.hasClass("k-state-active")) { 
     // panelBar.collapse(item); 
     //} else { 
     // panelBar.expand(item); 
     //} 

     // reload the panel bar 
     // This reloads all items in panel bar i just need to only reload the panelItem 
     // which is clicked 
     //panelBar.reload("> .k-item"); 

     // I am uisng this to reload item which is clicked 
     panelBar.reload(item[0]); 

    } 
</script> 

답변

1

은 아마 이런 짓을 할 것이다 :

var panelBar = $("#QuickViewP").kendoPanelBar({ 
    expand: refreshContent() 
}); 

var refreshContent = function(){ 
    var panelBar = $("#QuickViewP").data("kendoPanelBar"); 
    // reload the panel bar 
    panelBar.reload("> .k-item"); 
} 

구문이 정확하지 않을 수 있습니다,하지만 당신은 가까이해야합니다.

+0

감사합니다. 이 스크립트에서 결과를 얻었습니다. 하지만 한가지 문제가 있습니다. 제가 컨텐츠를 편집 한 포스트를 보았고 스크립트를 사용했습니다. plz가 무엇을해야하는지 알려주시겠습니까? –