Displaying a table with checkboxes

This Razor form simplifies the interaction with Yes/No type variables in blocks: it is not necessary to open a block row for editing in order to specify a value.

For the Razor form to work correctly:

• the context must contain a block. The block must contain a String type property, to which the ID of the current block entry is written. Example: 

• the context must contain a string variable, filled in by a certain template.

After filling in the block manually, the following script must be executed:

oreach(var tmpProduct in context.BuyGroceries)
{
        tmpProduct.IdRec = tmpProduct.Id.ToString(); // write the row ID 
        context.ProductString    += "#" + tmpProduct.Id.ToString() + "~0"; // # - separator between block entries, ~0 – entry is not selected, ~1 – entry is selected
 }

To add razor to the form, go to the form builder.

To create a process task form in the form builder:

• Open the task settings, select the Form (context) tab.
• Select Form Builder form type and click Create New Form.

In the form builder, add a Panel element to any spot on the form.

In the panel settings, go to the System tab and click Edit.

In the opened window, you can change the view name (optionally), and click OK.

In the opened window, click Edit.

Next, replace the entire code with the code below.

Razor form example:

@model  EleWise.ELMA.Workflow.Web.Models.WorkflowTaskInfo
@using System.Web.Mvc.Html
@using System.Collections
 
@System.Web.Mvc.Html.InputExtensions.Hidden(Html, "Entity.ProductString", ((dynamic)Model.Entity).ProductString)
@{
    var ProductList = ((IEnumerable)((dynamic)Model.Entity).BuyGroceries).Cast<dynamic>().ToArray();   
 }
 
<div style="overflow:hidden;">
    <div style="width: 961px;" id="_7cad3d1d54444bf1bcbcc26f52478e72_10130_container">
        <div class="t-widget t-grid" id="_7cad3d1d54444bf1bcbcc26f52478e72_10130" provider="00000000-0000-0000-0000-000000000000">
            <div class="t-grid-header">
                <div class="t-grid-header-wrap">
                    <div class="JCLRgrips" style="width: 371px;"> @* total column width + 1*@
                        <div class="JCLRgrip" style="left: 201px; height: 28px;"> @* 201 - first column width + 1*@
                            <div class="JCLRgripInner"></div>
                            <div class="JColResizer" style="cursor:e-resize"></div>
                        </div>
                        <div class="JCLRgrip" style="left: 301px; height: 28px;"> @* 301 - first two columns width + 1*@
                            <div class="JCLRgripInner"></div>
                            <div class="JColResizer" style="cursor:e-resize"></div>
                        </div>
                        <div class="JCLRgrip" style="left: 371px; height: 28px;"> @* 371 - total column width*@
                            <div class="JCLRgripInner"></div>
                            <div class="JColResizer" style="cursor:e-resize"></div>
                        </div>
                    </div>
                    <table cellspacing="0" class="resize-mode-gui locked-mode JColResizer" id="_7cad3d1d54444bf1bcbcc26f52478e72_10130_table" style="width: 0px;">
                        <colgroup>
                            <col style="width:200px"> @* first column width*@
                            <col style="width:100px"> @* second column width*@
                            <col style="width:70px"> @* third column width*@
                        </colgroup>
                            <tbody>
                                <tr>                                  
                                    <th class="t-header t-first-header" scope="col" style="width: 200px;"> @*200 - first column width*@
                                        <span class="t-header-content"  ALIGN="center">Name</span> @* first column name*@
                                    </th>
                                    <th class="t-header t-header" scope="col" style="width: 100px;"> @* 100 - second column width*@
                                        <span class="t-header-content"  ALIGN="center">Amount</span> @* second column name*@
                                    </th>
                                    <th class="t-header t-last-header" scope="col" style="width: 70px;"> @* 70 - last column width*@
                                        <span class="t-header-content"  ALIGN="center">Bought</span> @* last column name*@
                                    </th>
                                </tr>
                            </tbody>
                    </table>
                </div>
            </div>
            <div class="t-grid-content" style="height:100%;padding-bottom:1px">
                <table cellspacing="0" class="resize-mode-gui locked-mode" style="width: 371px;">
                    <colgroup>
                        <col style="width:200px">
                        <col style="width:100px">
                        <col style="width:70px">
                    </colgroup>                   
                    <tbody>                       
                        @for(var i=0; i<ProductList.Length; i++) 
                        {
                            var b = ProductList[i]; @* get the i-th block entry*@                             
                            <tr class="t-last-row">                                                                                                                   
                                <td class="t-first" ALIGN="center" valign = "middle">@(b.ProductName)</td> @* get the value of the ProductName property of the block entry*@ 
                                <td ALIGN="center">@(b.Amount)</td> @* get the value of the Amount property of the block entry*@                         
                                <td class="t-last" align ="center"><input id="check_@(b.IdRec)" onclick="BL_Click(@(b.IdRec))" type="checkbox"></td> @* display the check box, which will work with the IDRec property of the block entry*@    
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
         
 <script type="text/javascript">
    $(document).ready(function () {     
        $(’#TaskCustomFieldsPanel_title’).hide();
        $(’#TaskCustomFieldsPanel’).hide();
         
        var ArrIDProducts    = ’@(Html.ViewData.TemplateInfo.GetFullHtmlFieldId("Entity.ProductString"))’;  @*get the ProductString ID*@
        var prodId = $( "input[name=’__DynamicFormSettings.DynamicFormsProviderData’]" ).val(); 
        var StListProd  = $(’#’+ArrIDProducts).val(); @*get the ProductString value*@
        var prodlist = $.cookie("prodList"+prodId); @* get the previous value from cookie (to keep boxes checked after refreshing)*@
         
         if(prodlist == null) {
           prodlist = StListProd; @*if there is no value in cookie, get the one received from context*@
        }
        else{
           $(’#’+ArrIDProducts).val(prodlist);  @*if there is a value, save from cookie*@
        }
                         
            var StPort = window.location.port;
            var StHost = window.location.host;
             
            @*get the true/false value for each item *@
            var list = prodlist.split(’#’);
            $.each(list, function(index, value) {
               var item = value.split(’~’);
                 
                var id = item[0];
                var checked = item[1];
                var inputElement = $(’#check_’+id);
                if(checked == ’1’){
                   inputElement.prop(’checked’, true);
                }
                else{
                   inputElement.prop(’checked’, false);
                }
            })
    }); 
     
    function BL_Click(StCancel)
    {
        var StEntityProd = ’@(Html.ViewData.TemplateInfo.GetFullHtmlFieldId("Entity.ProductString"))’; @*get the ProductString ID*@
        var StListProd  = $(’#’ + StEntityProd).val(); @*get the ProductString value*@
             
        var PozSubstr  = StListProd.indexOf("#" + StCancel); @*get the selected item ID*@        
        var TmpIdTask  = "" + StCancel;
        var SizeSubstr = TmpIdTask.length;  
         
        var taskId = $( "input[name=’__DynamicFormSettings.DynamicFormsProviderData’]" ).val();@*get the task ID*@
         
        if(PozSubstr>(-1))
        { 
            var StSubstrTask = StListProd.substr(PozSubstr+1, SizeSubstr); @*get Id*@
            var StSubstr_2   = StListProd.substr(PozSubstr + SizeSubstr +2, 1); @*get the value - 0 or 1*@
             
            @*assign a new value*@
            if(StSubstr_2=="0")
            {
                StListProd = StListProd.replace("#" +StCancel+ "~0", "#" +StCancel+ "~1");
                $(’#’+StEntityProd).val(StListProd);
            }
            if(StSubstr_2=="1") 
            {
                StListProd = StListProd.replace("#" +StCancel+ "~1", "#" +StCancel+ "~0");
                $(’#’+StEntityProd).val(StListProd); 
            }
             
        }
        $.cookie("prodList"+taskId, StListProd);
    }
</script>

Display example: