Press "Enter" to skip to content

K2: How to select rows with checkboxes so that for each rule works.

20

In this post I will share a way to create checkboxes for selecting list items in such a way, that a standard for each selected rule will work:

image

1. You need to create a new column in you list view and add a literal datalabel inside:

image

2. Add the following piece of html into the newly created datalabel. It will turn it into the checkbox:

<input type=”checkbox” class=”custom-box”/>

3. Add one more literal datalabel onto the view, which will contain a javascript for all the logic. Let’s call it ‘dlblScript’ for now:

image

4. Create an expression for the dlblScript and add  the following piece of js into it:

Thus you will have a functionality, which will allow you to select items with checkboxes and use the oob condition for each item in a List View.

Please, note the following:

  1. You need to change the js and enter the name of the view, which you assigned to it on the form. Otherwise, the selector needs to be changed.
  2. This will disable standard selection of the rows via clicking anywhere on the row as well as multiple selection with SHIFT!!!

You can find more stuff here: Gist.

  1. Hi, could you please help me. How to get the value of selected check box in the list view?

  2. So you need to use the same rules as if you have selected the list items with the select. So you need to use the 'for each selected item' condition and then use the fields of the associated SMO in your further rules.

  3. Nice Post.
    My scenario is i want click button select all List items and similarly un selected also

  4. You will have to do this with js. So your checkboxes in the listview have a class "custom-box". You can find them all with jquery and check/uncheck them all.
    1. You will need 2 pieces of code:

    $('.custom-box').prop('checked', true);

    $('.custom-box').prop('checked', false);

    Store these 2 chunks in 2 different expressions.
    2. Place a literal datalabel somewhere on your form.
    3. Add 2 buttons on the form: Select All, Unselect All.
    4. Add the following rules inside your buttons:
    When the button Select All clicked
    Transfer Expression 1 into the Literal DataLabel
    Transfer Empty value into the literal datalabel
    Explanation: The first transfer will trigger the javascript function. When you transfer the empty value, you make it possible to transfer the same function again. Otherwise, if you transfer the same value into the datalabel, the function will not be triggered.
    5. Add the same rules for your second button, but with Expression 2 – Unselect all.

    PS. Remove the ''-open-tag" and "-close-tag" from the function. The blog does not allow me to post script tags.
    Hope this is clear.

  5. You need to wrap the functions above in the script and /script tags. The blog removed all the tags.

  6. Thank you its working fine Now,
    But i select all button checkbox enabled and click un select all check box disabled

    only one time function working next time is not working

    Note : Transfer Expression 1 into the Literal DataLabel
    Transfer Empty value into the literal datalabel
    Explanation: The first transfer will trigger the javascript function. When you transfer the empty value, you make it possible to transfer the same function again. Otherwise, if you transfer the same value into the datalabel, the function will not be triggered.

    Can you explain one more time

  7. As far as I understand you need the explanation why you have to clear the datalabel. So here is the explanation:
    1. You transfer js functnion into the literal datalabel -> this changes the DOM.
    2. The DOM is changed -> the js function is called and executed.
    Now if you do not clear the datalabel and then manually uncheck some of the items and then want to select all with the button again:
    The JS function is transferred to the literal datalabel, but the DOM is not changed, cause you have not cleared the datalabel. i.e. the current value and the transferred value are the same. Since the DOM is not changed, the js function is not called and not executed.
    You are right, that when you click different buttons, it works, cause your 2 buttons transfer different JS into the datalabel. But the idea is to be able to execute the same function twice, even though you might not need it in the current implementation.

  8. Thank You for your Response.
    My scenario is i was integrated K2 app from Microsoft Dynamics Ax using Rest Services. Now your guidance is working fine once click select all button check box is enabled but row was not highlighted.
    I want once click select all button check check and row also highlighted then only i can able to transfer the value.

  9. Add in another data label and execute "$('tr').click();" script on the select all and unselect all button is click. Rule sequence as follows:
    1. transfer data label – for ur select all script
    2. transfer data label – the new script
    3. transder data label – clear the data label for both rule mentioned above

  10. Hi, can you help me!
    I want to use "For Each Loop" ListView and transfer data in each checked row.
    But i can't check value in "Check Box".
    If you can resolve this problem please help me.

  11. With this js, the check boxes work but i am unable to double click on the list items and transfer data to a subview that i have configured.

  12. Yes, this is a drawback. The js code prevents the row click. So after every row click or double click the js simply removes selection of all rows, analyzed the checked checkboxes and applies selection to the rows, where checkboxes are checked.

  13. Sorry, I missed your comment. If the problem still exists, could you maybe give more details?

  14. Hi Konstantin — thanks for this.

    Admittedly, I'm new to the world of js, and as such trying to learn on the fly as I work with K2. To that end, I see the note #1 above, but unsure which part of the code (.grid?) is specific to the view name that needs to be changed.

    Can you help a newbie out and comment? Apologies for what is no doubt a basic question… but want to use this type of function in my own K2 form, and see the value of being able to understand this.

  15. Hi Andy,
    When you are using js, you need to find the view, the code should work with. Otherwise, it will find all grids (List Views) on the form, if you are using more than 1.
    There is a number of ways how you can select a specific element on a specific view. I used the one, where I put a datalabel on the view, search for the datalabel by name and then search for the closest view and/or grid etc.
    Now imagine, that you need to place this view twice on the form. So there will be 2 datalabels and js might find 2 views and bind 2 Observer events to each of the view. Not cool
    Therefore, you can give a name to the view, when you put it on the form. And then, when selecting a specific view, you can try the following:

    var contentTable = $("[name='NameOfTheViewOnTheForm']").find('.grid-content-table')[0];

    So the script can be built with expression. From the form you can send the exact View Name to the View, when initializing. And the View expression can use that name to build the text of the code and then run it.

    If other questions, let me know.

  16. Perfect, that's the bit I was missing (the [name='NameOfTheViewOnTheForm'] section). Got it to work!

    Thanks much for your help — much apprecaited!

  17. Oryza Anggara Oryza Anggara

    Hi ,
    This is awesome, but i still need the double click item.
    I tried to reverse the condition : “When the row is clicked (selected), the checkbox is also checked”
    ..so the list item still has ability to get the selected row, in other word the checkbox only serve to give assurance to the user about their selection.
    But i failed, this is my modified version :

    $(contentTable).find(‘tr’).each(function(i, val) {
    if ($(this).hasClass(‘highlighted selected’)) {
    $(this).closest(‘.custom-box’).prop(‘checked’, true)
    } else {
    $(this).closest(‘.custom-box’).prop(‘checked’, false)
    }
    });

    Please help.

Leave a Reply

Your email address will not be published. Required fields are marked *

1 × 3 =