Custom content list and content on same page

Hey everyone,

I have created a custom content type for our company website called "interviews". I have placed the list control on a page and styled it, this works fine. However when a visitor clicks on an item, I want it to open on the same page, possibly in an UpdatePanel or something - I don't want the user to be redirected to a different page to view the detailWindow. So basically you'd have a list of all items on the right, and a detailwindow to the left.

I have tried looking into a custom widget to get the functionality that I'd like, however I can't seem to get it to work. Is this functionality that is supported, but I'm just not seeing it? Or can I get some help with building either a custom widget or widget template?

I've posted both widget templates I'm currently using below here. Any help would be greatly appreciated!

List of items:

<div class="interviewlist_box">
    <div class="interviewlist">
        <h1>Kennis Delen</h1>
        <sf:SitefinityLabel ID="SitefinityLabel2" runat="server" WrapperTagName="div" HideIfNoText="true" HideIfNoTextMode="Server" CssClass="sfitemFieldLbl" />
        <telerik:RadListView ID="RadListView1" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
            <LayoutTemplate>
                <ul class="sfitemsList sfitemsListTitleDateTmb sflist interviewUL">
                    <asp:PlaceHolder ID="ItemsContainer" runat="server" />
                </ul>
            </LayoutTemplate>
            <ItemTemplate>
                <li class="sfitem sflistitem sfClearfix interviewLI" data-sf-provider='<%# Eval("Provider.Name")%>' data-sf-id='<%# Eval("Id")%>' data-sf-type="Telerik.Sitefinity.DynamicModules.Model.DynamicContent">
                    <h2 class="titelStuk">
                        <sf:SitefinityLabel runat="server" Text='<%# Eval("Persoon")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt persoon" data-sf-field="Persoon" data-sf-ftype="ShortText" />
                    </h2>
                    <h2 class="titelStuk">
                        <sf:SitefinityLabel runat="server" Text='<%# Eval("Onderwerp")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt onderwerp" data-sf-field="Titel" data-sf-ftype="ShortText" />
                    </h2>
                    <div class='sfitemDateWrp' data-sf-field='Datum' data-sf-ftype='DateTime'>
                        <sf:FieldListView ID="Datum" runat="server" Format="Datum.ToLocal():MMM d, yyyy" WrapperTagName="div" WrapperTagCssClass="sfitemDate" />
                    </div>
                </li>
            </ItemTemplate>
        </telerik:RadListView>
        <sf:Pager ID="pager1" runat="server"></sf:Pager>
        <asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder>
    </div>
</div>

The detail window for each interview:

<div class="interviewwindow">
    <sf:SitefinityLabel ID="SitefinityLabel1" runat="server" WrapperTagName="div" HideIfNoText="true" HideIfNoTextMode="Server" CssClass="sfitemFieldLbl" />
    <sf:DynamicDetailContainer ID="detailContainer" runat="server">
        <LayoutTemplate>
            <div id="detailWindow" class="sfitemDetails sfdetails" data-sf-provider='<%# Eval("Provider.Name")%>' data-sf-id='<%# Eval("Id")%>' data-sf-type="Telerik.Sitefinity.DynamicModules.Model.DynamicContent">
                <sf:SitefinityLabel runat="server" Text='<%# Eval("Persoon")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt titel" data-sf-field="Persoon" data-sf-ftype="ShortText" />
                <div class='sfitemDateWrp datum' data-sf-field='Datum' data-sf-ftype='DateTime'>
                    <sf:SitefinityLabel runat="server" Text='Datum interview:' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemFieldLbl" />
                    <sf:FieldListView ID="Datum" runat="server" Format="Datum.ToLocal():MMM d, yyyy, HH:mm tt" WrapperTagName="div" WrapperTagCssClass="sfitemDate" />
                </div>
                <sf:SitefinityLabel runat="server" Text='<%# Eval("Intro")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemLongText intro" data-sf-field="Intro" data-sf-ftype="LongText" />
                <sf:SitefinityLabel runat="server" Text='<%# Eval("Tekst")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemRichText text" data-sf-field="Tekst" data-sf-ftype="LongText" />
            </div>
        </LayoutTemplate>
    </sf:DynamicDetailContainer>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>

You aren't gonna get that out of the box, better served as a custom widget.

The default widgets have 2 modes, List, and Detail.  Where detail pulls it's loaded item from the Url (by default).

It'd be a super easy custom widget though...

1) Go to the module builder, click your type
2) On the right side you'll see code samples
3) Grab the sample to get a list of "interviews"
4) Bind that data to like a Repeater or RadListview in your custom control (Which the VS extension Sitefinity Thunder can generate for you)
5) On click, send the selected item somewhere else...

IMO would be much more slick using ServiceStack to click the item and load it in clientside with REAL json over the bloaty MSAjax UpdatePanel... your users will thank you.

Here's a servicestack template you could use
gist.github.com/.../3c7de0ad683363af23e8c1bc204fb0f5