KendoUI PanelBar가 확장 된 항목을 기억합니다.

Question

Kendo UI PanelBar를 구현하려고합니다. (http://demos.kendoui.com/web/panelbar/images.html 참조) 일부 항목 (Golf, Swimming)을 연 다음 "Videos Records"를 클릭하면 항목을 확장했습니다. 그러나 페이지를 새로 고침 (일부 링크를 클릭)하면 모든 확장 된 구조가 손실됩니다.

KendoUI 포럼에서 선택한 항목 만 가져올 수 있으며 페이지를 다시로드 한 후 모든 항목을 계산해야 함을 발견했습니다. 어떤 방법으로도 제 상황에서 항목을 확장 할 수 있습니까? 필요하지 않으면 html 프레임을 사용하고 싶지 않습니다.

안부, 피터 패널의 개방은 클라이언트에서 발생

Answer 1

답장을 보내 주셔서 감사합니다. 매우 유용했습니다. 여기에 1 개의 선택된 항목을 기억하는 jQuery의 뼈대 코드를 여기에 추가합니다. 추가 필수 jquery.cookie.js [https://github.com/carhartl/jquery-cookie]

function onSelect(e) { 
    var item = $(e.item), 
     index = item.parentsUntil(".k-panelbar", ".k-item").map(function() { 
      return $(this).index(); 
     }).get().reverse(); 

    index.push(item.index()); 

    $.cookie("KendoUiPanelBarSelectedIndex", index); 
    //alert(index); 
} 

var panel = $("#panelbar").kendoPanelBar({ 
    select: onSelect 
}).data("kendoPanelBar"); 

//$("button").click(function() { 
// select([0, 2]); 
//}); 

function select(position) { 
    var ul = panel.element; 
    for (var i = 0; i < position.length; i++) { 
     var item = ul.children().eq(position[i]); 
     if (i != position.length - 1) { 
      ul = item.children("ul"); 
      if (!ul[0]) 
       ul = item.children().children("ul"); 
      panel.expand(item, false); 
     } else { 
      panel.select(item); 
     } 
    } 
} 

// on page ready select value from cookies 
$(document).ready(function() { 
    if ($.cookie("KendoUiPanelBarSelectedIndex") != null) { 
     //alert($.cookie("KendoUiPanelBarSelectedIndex")); 
     var numbersArray = $.cookie("KendoUiPanelBarSelectedIndex").split(','); 
     select(numbersArray); 
    } 
    else { 
     // TEST INIT MESSAGE, ON REAL USE DELETE 
     alert("DocumenReadyFunction: KendoUiPanelBarSelectedIndex IS NULL"); 
    } 
}); 

Answer 2

. 페이지가 새로 고쳐지면 브라우저는 선택한 패널에 대한 추가 마크 업을 포함하지 않는 제공된 마크 업을 렌더링합니다.

이렇게하려면 열린 패널을 나타내는 값을 어떻게 든 저장해야합니다. 이를 수행하는 가장 쉬운 방법은 쿠키 (JavaScript로 설정하거나 서버에 AJAX 호출)를 사용하는 것입니다.

그러면 panelBar가 렌더링 될 때 쿠키의 값을 사용하여 올바른 탭을 선택한 것으로 설정합니다.

Answer 3

당신은 선택을가는 가지 작업이 블록을 사용할 수 있습니다. 이 예제에서는 패널 항목을 확장 중입니다. 나중에 사용할 수 있도록 DOM에 패널 항목을 저장하는 등의 다른 작업을 수행하거나 나중에 사용하기 위해 어딘가에 저장할 수 있습니다.

var panelBar = $("#importCvPanelbar").data("kendoPanelBar"); 
       panelBar.bind("select", function(e) { 
       var itemId = $(e.item)[0].id; 

       panelBar.expand(itemId);// will expand the selected one 
      });