Q:

Kendo Ui Splitter , Panel Bar and Iframe

I am having a kendo UI Splitter with left pane and right pane. In the left pane I have kendoui Panel bar which consists of links to different reports. Now onclick of any link  I am trying to open the report page in right pane by making use of iframe. But for some reason report page is opening in a new window.
Sample Anchor tag from one of the links in Panel bar
 <a class="right" target="reportDisplayPane" title="MyTitle" href="reports/params.aspx?rt=Basic Reports&rn=My Report">My Report</a>

MVC View code with  Kendo Ui Splitter,  Kendo Ui Panel bar and I frame.
@(Html.Kendo().Splitter()  
      .Name("splitter")           
      .Orientation(Kendo.Mvc.UI.SplitterOrientation.Horizontal)
      .Panes(horizontalPanes =>
      {
          horizontalPanes.Add()
              .Size("20%")
              .HtmlAttributes(new { id = "left-pane", style = "height:100%;" })    
              .Collapsible(true)
              .Content(@<div class="pane-content">
                          <div id="navigation">    
                             @(Html.Kendo().PanelBar()
                                .Name("panelbar")
                                   .ExpandMode(Kendo.Mvc.UI.PanelBarExpandMode.Multiple)
                                   .HtmlAttributes(new { style = "width:100%;height:100%;" })
                                   .Items(panelbar =>
                                     {
                                        foreach (var category in Model.MyModel.Categories)
                                         {
                                           panelbar.Add().Text(category)
                                           .Items(reports =>
                                            {
                                             foreach (var report in Model.MyModel.Reports)
                                              {
                                                if (report.Category.Equals(category))
                                                 {
                                                    reports.Add().Text(report.NavigateURL).Encoded(false);   
                                                 }
                                               }
                                             });
                                         }
                                    })
                              )
                          </div>
                       </div>                      
                    );

          horizontalPanes.Add()
              .Size("80%")              
              .HtmlAttributes(new { id = "right-pane",style = "height:100%;"})
              .Collapsible(false)
              .Content(@<div class="pane-content">
                            <iframe id="reportDisplayPane" ></iframe> 

                        </div>);
      })

 Please suggest on what might be wrong here.

A:

Achieved it using below.
var onSelect = function (e) {          
            var iframeUrl = 'reports/maypage.aspx?rt=Myreports&rn=' + e.item.innerText;   
            $('#reportDisplayPane').attr('src', iframeUrl);
        };

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

