CODEWITHSUNDEEP
asp.netsitecoresitecore8
sukesh
sukesh

Reputation: 2425

How to make each Multilist Item editable in Sitecore

Some items in a MultiListField have to be displayed in html, but in 2 columns, as:

Item1 Item2
Item3 Item4

<div id="menu-section" runat="server">
 <div class="clearfix">      
    <div class="col-xs-6">
      <p>Item1 Name</p>
    </div>
    <div class="col-xs-6">
      <p>Item2 Name</p>
    </div>      
 </div>
 <div class="clearfix">      
    <div class="col-xs-6">
      <p>Item3 Name</p>
    </div>
    <div class="col-xs-6">
      <p>Item4 Name</p>
    </div>      
 </div>
</div>

The content author should be able to edit each item from Experience editor.
If it was a single column, I would accomplish this using asp:Repeater and sc: controls.

So, instead, I string built the html and rendered on page.

C#

StringBuilder sb = new StringBuilder();
sb.Append("<div class=\"clearfix\">");
.
.
..
menu-section.innerHtml = sb.ToString();

Though, the items are rendered as desired, I have no clue how to make them editable.

Enveloping menu-section inside a sc:EditFrame will allow only add/remove/sorting of the items but not editing each item.

Any thoughts, how to do this?

Upvotes: 3

Views: 1042

Answers (2)

Derek Dysart
Derek Dysart

Reputation: 1396

Use the FieldRenderer to render the field:

sb.Append(FieldRenderer.Render(item1, "Name");

When on the Page/Experience Editor, this will render the item as editable.

Upvotes: 6

Gatogordo
Gatogordo

Reputation: 2635

I would go back to your repeater solution, and try with nested repeaters.

First, get your datasource into a list of item lists (you can use a collection of collections for example). In your case each internal list will have 2 items (for 2 columns).

Bind this datasource to your outer repeater which could generate the <div class="clearfix">.. </div> for each entry (list) it can find. Within this repeater create another inner repeater and bind the entry (inner list - in your case a collection of 2 items) to it. Your inner repeater can generate the <div class="col-xs-6"> elements and use a sc: control.

This will make them editable, but you will still need the editframe to add/remove/sort...

Upvotes: 4

Related Questions