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,
- The IDs I provided were just samples; you must set the checkboxes'
ID
andclass
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">
…
- Implement the grid row change script as we already explained
- Implement the change handler for all checkboxes:
jQuery('.<<wcID(this.columnX.checkbox)>>').change(function(ev){FoxInCloud.DOMEvent(ev);});