Can a Multi select Grid have cell text

  • Profile Image
    Asked on September 28, 2015 at 09:02 PM

    I am in need of a multi select grid, where I can put text in the cells or a spread sheet that allows a person to select the cells.

    From the screen shot, I want something like this where the days can be selected and totaled. (When I use multiple products or radio buttons I am unable to add additional subheadings for the dates of each week.)

    Is there anything like this that I can use?

  • Profile Image
    Answered on September 29, 2015 at 03:14 AM


    Upon checking your screenshot, it seems like what you would like to accomplish is a calendar that allows selection of the date and then counting the dates selected. Is that correct? Unfortunately, we do not have a direct widget or function for it.

    There's two workarounds that I can think of:

    Workaround 1: The Multiselect Grid widget doesn't have an option where you can add text on it, but it is possible using CSS, however, it is only for display and not real value. We also cannot total them. Here's how it looks like:




    Workaround 2: Try using the Matrix field instead. The matrix field will allow you to calculate the values of the cells. Here's a guide that you can follow: 


    Here's the form I created with the two workarounds implemented: If any of them would work for you, please let us know and we'll be glad to share the steps on how to accomplish it.

    We'll wait for your response.

  • Profile Image
    Answered on September 29, 2015 at 09:25 AM

    The workaround 2 looks really good.

    Will the values/cell text show in the submission? Or will it just total it up. E.g. How many people and who chose 1st Week Sunday?

  • Profile Image
    Answered on September 29, 2015 at 11:02 AM


    The Matrix field using conditional logic and calculation and produce values. But aesthetically speaking, the text only shows for display.

    Here's how it works. My form has three fields for now.

    "Total days in Matrix" - each value on the matrix has a value of "1". This is a form calculation widget.

    "Col1Row1Value" - get the value of the selected checkbox in cell 1 in Row 1 Column 1 as a text string. This is a form calculation widget

    "Col1Row1Text" - we will output the text string here IF Col1Row1Value is filled out. This is a simple text box


    1. First, we will transfer the value of the check box from Matrix field to Col1Row1Value

    Click "0-9" and it will change to "a-z" which will change the value of the check box value to a text string.

    Make sure to set the "Default" value to blank


    2. We will then use conditional logic to check if Col1Row1Value, if it is filled out output the text you want to be displayed in Col1Row1Text


    3. Now you can have a text value that can be displayed on a submission or in the notification


    The next thing that we will do is add a text value on the actual Matrix field, this involves CSS selector. If you are not quite familiar on how this is done, please let us know the form you are working and we will gladly help, but I will include the steps here on how I did mine:

    1. First, we will need to get the CSS path for the matrix cells that we want to add a text. View your live form in a tab, right click on it and choose "Inspect Element". It will then show a window at the bottom or at the side of the, it will show the selected element under the "Element" tab.



    2. In the tab "Elements" the specific table data will be selected, right click on it and choose "Copy CSS Path".


    3. In the Form Designer Tool, paste it. Here's my sample:

    #cid_3 > table > tbody > tr:nth-child(2) > td:nth-child(2)

    I will add more details on it, here's my final output:

    #cid_3 > table > tbody > tr:nth-child(2) > td:nth-child(2):before {

        content: "January 1: Text Here"; -->add text you want to display



    Now repeat the steps on each table data. 


    Here's my test form: 

    You can clone my form to see my settings further.

    I hope that helps.

  • Profile Image
    Answered on January 28, 2016 at 05:34 PM

    1. What are the steps for adding text to the multi-select grid widget , the link you provided only states it an option but there aren't any detail instruction on how to add text using CSS. pleases attach a link to those instructions or CSS Code.

    2. I am having difficulty following the instructions on how to add text to the Grid , i have attempted to follow the process right up to the conditional logic portion of the screen. I have attempted to duplicate the screenshot of the conditions wizard and can not seem to find that screen I keep getting the conditions screen but none of those screens allows for text , so please clarify if i am missing a step or if that screen has been removed ?

  • Profile Image
    Answered on January 28, 2016 at 05:39 PM
  • Profile Image
    Answered on January 29, 2016 at 01:05 AM

    Before we can proceed, please check the response that my colleague gave in the other similar thread. Here's the link:

    Let us know if you need further assistance.