Can a Multi select Grid have cell text

  • montessoriintown
    Asked on September 28, 2015 at 9: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?

    Jotform Thread 672435 Screenshot
  • Charlie
    Replied on September 29, 2015 at 3:14 AM

    Hi,

    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:

    Can a Multi select Grid have cell text  Image 1 Screenshot 30

     

     

     

    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: http://www.jotform.com/help/343-How-to-perform-form-calculation-using-the-Matrix-Field- 

    Can a Multi select Grid have cell text  Image 2 Screenshot 41

     

    Here's the form I created with the two workarounds implemented: http://form.jotformpro.com/form/52711990039962?. 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.

  • montessoriintown
    Replied on September 29, 2015 at 9: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?

  • Charlie
    Replied on September 29, 2015 at 11:02 AM

    Hi,

    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

    Can a Multi select Grid have cell text  Image 1 Screenshot 100

     

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

    Can a Multi select Grid have cell text  Image 2 Screenshot 111

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

    Can a Multi select Grid have cell text  Image 3 Screenshot 122

    Make sure to set the "Default" value to blank

    Can a Multi select Grid have cell text  Image 4 Screenshot 133

     

    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

    Can a Multi select Grid have cell text  Image 5 Screenshot 144

    Can a Multi select Grid have cell text  Image 6 Screenshot 155

     

    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.

    Can a Multi select Grid have cell text  Image 7 Screenshot 166

     

     

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

    Can a Multi select Grid have cell text  Image 8 Screenshot 177

     

    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

    }

     

    Can a Multi select Grid have cell text  Image 9 Screenshot 188

    Now repeat the steps on each table data. 

     

    Here's my test form: http://form.jotformpro.com/form/52713710697964? 

    You can clone my form to see my settings further.

    I hope that helps.

  • Bavington
    Replied on January 28, 2016 at 5: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 ?

  • Bavington
    Replied on January 28, 2016 at 5:39 PM
  • Chriistian Jotform Support
    Replied on January 29, 2016 at 1:05 AM

    Before we can proceed, please check the response that my colleague gave in the other similar thread. Here's the link: http://www.jotform.com/answers/756416

    Let us know if you need further assistance.