In my app i have this type of form. It contains a grid, with the first column (A) readonly and column B and C editable. The first where the user has to insert a value and the second with a checkbox. On the right of the grid i have an edit box containing notes about the selected row in the grid.

Someone can suggest me how can i make it to be used in bootstrap mode ? At the moment every grid i had i modified it in a collapsable list. But now i have a checkbox and an input box .

Any example ?

Thanks

I understand you want to build a collapsible list with updatable fields and event support; add this code to grid.wcHTMLgen(): (adjust the bootstrap classes to your desired layout and replace IDs by wcID(control) -- UNTESTED):

text to this.wcHTML noshow textmerge flag 1
<div class="col col-xs-12 col-md-8 col-lg-6">
  <div class="row">
    <div class="col col-xs-12 col-md-8 text-left">
      <input type="text" id="<<wcID(this.columnX.textbox)>>" class="<<wcID(this.columnX.textbox)>>" title="<<this.columnX.textbox.ToolTipText>>">
    </div>
    <div class="col col-xs-8 col-sm-5 col-md-4 text-left">
      <div class="form-group">
        <div class="checkbox" id="report_scx-chkdisable_div"><label for="report_scx-chkdisable" id="report_scx-chkdisable_lbl" class="report_scx-chkdisable standard ChkOptLabel" title="report_scx.chkDisable"><input type="checkbox" id="report_scx-chkdisable" class="report_scx-chkdisable standard" title="report_scx.chkDisable" tabindex="3" size="2" autocomplete="off">Disabled (off)</label></div>
      </div>
    </div>
  </div>
</div>
endtext

// row change script here
jQuery('#report_scx-lblorders').blur(function(ev){FoxInCloud.DOMEvent(ev);});
jQuery('#report_scx-chkdisable').change(function(ev){FoxInCloud.DOMEvent(ev);});

Now i have this code, that reads a table

If Thisform.wBSlHTMLgen

	This.AddProperty("wcIdBs",This.wcID + "_bs")
	This.wcHTML  = [<div class="col>]
	
	If Used("Utenti")
		Go TOp In Utenti
		Do While !Eof("Utenti")
			TEXT to This.wcHTML textmerge additive noshow flags 1

				<div class="row">
					<div class="col col-xs-8 col-sm-5 col-md-4 text-left">
						<div class="form-group">
							<div data-row="<<Utenti.Code>>" class="checkbox" id="report_scx-chkdisable_lbl<<Alltrim(Utenti.Code)>>">
								<label for="report_scx-chkdisable" id="report_scx-chkdisable_lbl<<Alltrim(Utenti.Code)>>" 
										class="report_scx-chkdisable standard ChkOptLabel" title="report_scx.chkDisable">
									<input type="checkbox" id="report_scx-chkdisable<<Alltrim(Utenti.Code)>>" class="report_scx-chkdisable standard" 
										title="report_scx.chkDisable" tabindex="3" size="2" autocomplete="off">
									<<Alltrim(Utenti->Des1)>>
								</label>
							</div>
						</div>
					</div>
				</div>
  			EndText
			Skip In Utenti
		EndDo
	Endif
	This.wcHTML = This.wcHTML  + [</div>]
Endif	

And i have this

I have to update the table with the checkbox status. How can i do it ?

Thanks

You can generate your new HTML code and replace it like this in Refresh():

IF THISFORM.wBSlHTMLgen
   THIS.wcHTMLgen
   THISFORM.wcScriptJSadd(TEXTMERGE([jQuery('#<<THIS.wcID>>').replaceWith(<<cLitteralJS(THIS.wcHTML)>>);]))
ENDIF

Michele,

1. The IDs I provided were just samples; you must set the checkboxes' ID and class all the same as follows:

procedure grid.wcHTMLgen
…
<input type="checkbox" id="<<wcID(this.columnX.checkbox)>>" class="<<wcID(this.columnX.checkbox)>> standard"  title="??" tabindex="3" size="2" autocomplete="off">
…

1. Implement the grid row change script as we already explained
2. Implement the change handler for all checkboxes:
   jQuery('.<<wcID(this.columnX.checkbox)>>').change(function(ev){FoxInCloud.DOMEvent(ev);});