List View – Button Control in Row Level

Introduction

“Can you have row level button control in the K2 SmartForm List view?”

This is always the question that are raised by users/developers who are used to ASP.NET grid view. As of now, K2 SmartForm has yet to provide the out of box feature for this.

After further exploring on the rules and how the controls work in SmartForms, I manage to have a workaround on this topic.

How it works

This solution is done by integrating HTML, jquery and some configuration on the SmartForm rules and controls. Basically, the action control execute the rule(s) using jquery to initiate SmartForm control.

Before you begin, you will need to have a good understanding on these technologies/skill set.

How to implement

The implementation will be separated into 2 phases (simple and intermediate).

Quick Setup

  1. Create a table SMO that has a primary key.
  2. Create a list view with the SMO
  3. Set it as a editing list view and enable the default add, edit and remove method.listrowcontrol01
  4. The toolbar buttons and rules should be automatically created for you.

Create a Delete button (Simple)

  1. Add a button and set as follow: (Name must be exactly the same as it is bind on the javascript at the later part of the steps)
    listrowcontrol03
  2. Add the Delete toolbar button rule for this button
    listrowcontrol02
  3. Drag the Data Label control into the list view and name the header as Delete
  4. Add in the List Delete Control expression as follows:
    Name: List Delete Control
    Expression Details:

    <a class=”toolbar-button toolbar-button-inline delete” href=”javascript:;”><span class=”button-l”></span><span class=”button-c”><span class=”button-icon”></span><span class=”button-text” onclick=”{0}”>Delete</span></span><span class=”button-r”></span></a>

    listrowcontrol04

  5. Add in the List Delete JS expression as follows:
    Name: List Delete JS
    Expression Details:

    $(‘tr’).removeClass(‘selected’); $(this).closest(‘tr’).addClass(‘selected’); $(‘[name=btnDel]’).click();

    listrowcontrol05

  6. Add in the List Delete DL expression as follows:
    Drag and drop in a replace operator(under the Text category)
    First Textbox: List Delete Control expression(added on step 4)
    Second Textbox: {0}
    Third Textbox: List Delete JS expression(added on step 5)
    listrowcontrol06
  7. Set List Delete DL as the expression for the Data Label Column you had created on step 3. Ensure the Literal property is checked.
  8. You have completed the implementation for this. Test your control!
    listrowcontrol07

Create a Edit, Save and Cancel button (Intermediate)

SmartForm allows you to edit the row on double click action. If you are satisfy with this behaviour, you are not required to proceed with the below implementation.

You will need to understand the default behaviour of the editable list view rules in SmartForms as there will be some modification to the rules.

  1. Add 3 buttons into your list view and make all button invisible
    First Button
    Name: btnEdit
    Text: Edit
    Second Button
    Name: btnApply
    Text: Apply
    Third Button
    Name: btnCancel
    Text: Cancel
  2. Set the button rules as follows:
    btnEdit – Call the Edit Toolbar button rule
    btnApply – Call “Apply the changes made to the row on the editable list” rule
    btnCancel – Call “Cancel the changes made to the row on the editable list” rule
  3. Drag the Data Label control into the list view and name the header as Edit
  4. Add in the expressions as follows:
    List Edit
    Name: List Edit Control
    Expression Details:

    <a class=”toolbar-button toolbar-button-inline edit” href=”javascript:;”><span class=”button-l”></span><span class=”button-c”><span class=”button-icon”></span><span class=”button-text” onclick=”{0}”>Edit</span></span><span class=”button-r”></span></a>

    Name: List Edit JS
    Expression Details:

    $(‘tr’).removeClass(‘selected’); $(this).closest(‘tr’).addClass(‘selected’); $(‘[name=btnEdit]’).click();

    Name: List Edit DL
    Expression Details:
    Drag and drop in a replace operator(under the Text category)
    First Textbox: List Edit Control expression
    Second Textbox: {0}
    Third Textbox: List Edit JS expression

    Row Save
    Name: Row Save Control
    Expression Details:

    <a class=”toolbar-button toolbar-button-inline save” href=”javascript:;”><span class=”button-l”></span><span class=”button-c”><span class=”button-icon”></span><span class=”button-text” onclick=”{0}”>Save</span></span><span class=”button-r”></span></a>

    Name: Row Save Control
    Expression Details:

    $(‘tr’).removeClass(‘selected’); $(this).closest(‘tr’).addClass(‘selected’); $(‘[name=btnApply]’).click();

    Name: Row Save DL
    Expression Details:
    Drag and drop in a replace operator(under the Text category)
    First Textbox: Row Save Control expression
    Second Textbox: {0}
    Third Textbox: Row Save JS expression

    Row Cancel
    Name: Row Cancel Control
    Expression Details:

    <a class=”toolbar-button toolbar-button-inline delete” href=”javascript:;”><span class=”button-l”></span><span class=”button-c”><span class=”button-icon”></span><span class=”button-text” onclick=”{0}”>Cancel</span></span><span class=”button-r”></span></a>

    Name: Row Cancel JS
    Expression Details:

    $(‘tr’).removeClass(‘selected’); $(this).closest(‘tr’).addClass(‘selected’); $(‘[name=btnCancel]’).click();

    Name: Row Cancel DL
    Expression Details:
    Drag and drop in a replace operator(under the Text category)
    First Textbox: Row Cancel Control expression
    Second Textbox: {0}
    Third Textbox: Row Cancel JS expression

  5. Set List Edit DL as the expression for the Data Label Column you had created. Ensure the Literal property is checked.
  6. Set Row Save DL as the expression for the Data Label edit row under Edit column you had created earlier. Ensure the Literal property is checked.
  7. Set Row Cancel DL as the expression for the Data Label edit row under Delete column you had created earlier. Ensure the Literal property is checked.
  8. Go to the Rules tab, disable When the View executed List item Changed
  9. Edit the Edit Toolbar Button rule, add in “Apply the changes made to the row on the editable list” rulelistrowcontrol08
  10. With this, you have completed the implementation for this section. Test your view!

Considerations

When implementing the Edit, Save and Cancel button, I actually had disable the default SF rules. This will prevent applying row changes when user click on the other rows. This can be an advantage or disadvantage depends on how you look at it. Thus, use it at your own benefits!

Advertisements

One comment

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 )

Google photo

You are commenting using your Google 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