In K2 Form, there is a requirement at times to show views side by side like this:
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)
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:
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:
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”
K2 Works 