How to add Side by Side views – Multiple on right side on K2 SmartForm

In K2 Form, there is a requirement at times to show views side by side like this:

SideBySideViews.PNG
Sample: Left side – one view; Right side – multiple views

We’ll go step by step. Estimated time of implementation: 15 mins.

Step 1:

Keep your form ready. I suppose you will have some what below layout:

(We will add in below steps if you haven’t already)

Initial Form Design

Identification:

A: Your left side view

B, C, D: Your right side view

E: DataLabel which will hold JavaScript and put views right-side (We will add in below steps)

Step 2:

A, B, C, D: Give the views’ internal names in properties:

Give Internal name to views

View internal names sample: ListView_SideView1, View_SubView1, View_SubView2, View_SubView3

  • E: Add new DataLabel right side to the List view (your left side view) & give name: “dlbPrependTo“; Make it literal.

Step 3:

Add new expression: “exPrependHereDiv” and assign it to DataLabel dlbPrependTo.

Add below JavaScript in expression by replacing with your internal view names

<script>
  function prependToDiv(sourceViewName, destPrependToDiv) {
    $($("[name='" + destPrependToDiv + "']").closest('.formcontrol')).css('margin-top', "0px");
    $("[name='" + sourceViewName + "']").closest(".view").detach().prependTo($("[name='" + destPrependToDiv + "']").closest('.formcontrol'));
}
/* Order Descending - Last view first */
prependToDiv('View_SubView3', 'dlbPrependTo'); /* Replace your view internal names here */
prependToDiv('View_SubView2', 'dlbPrependTo'); /* Replace your view internal names here */
prependToDiv('View_SubView1', 'dlbPrependTo'); /* Replace your view internal names here */
</script>
  • Note: Add view names in reverse order. Last view first. This is to respect JavaScript execution order.

Step 4:

Output:

Output – Side by Side

Advance:

  • To have multiple views on left and right – both sides:
    • Add another DataLabel with different name side by side
    • put another expression by just changing the DataLabel name in JavaScript
  • In case your form is slow to load & doesn’t render side by side views then don’t assign expression to DataLabel in the form design but assign the expression in “view initialized” event by using “transfer data”
Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s