I have a requirement to provide placeholder for all controls in my TPC form. I wanted to know if there is a way to do so. I have tried placing placeholder in Template like:
<input id='#Html.GetUniqueId(Model.Name)_input' data-tpc-role="lookup-input" name="#Model.MetaField.FieldName" data-tpc-default-value="#Model.GetLookupValue()" data-tpc-value="#Model.GetLookupValue()"
placeholder ="myplaceholdertext" type="text" #MvcHtmlString.Create(#Model.ValidationAttributes) data-tpc-custom-validation="lookup"/>
and through script
$(document).on("tpc:ready", function(){
var picklistName = "mypicklistname";
//Set Text to Placeholder Value
tpc.forms[0][picklistName].get_kendoInput().text("Please select an option.");
});
None of these work.
Let me know if this is the correct forum to ask TPC related questions
TIA
You have the kendo control but the value you want to set is the first item in its dataSource. Don't forget to refresh the control to make it show:
$(document).on("tpc:ready", function(){
var picklist = tpc.forms[0]["mypicklistname"];
//Set Text to Placeholder Value
picklist.get_kendoInput().dataSource.data()[0].Label = "Please select an option.";
picklist.get_kendoInput().refresh();
});
Related
I am using Any+Time DatePicker/TimePicker to allow my users to select a date and time in vb.net. But I am unable to retrieve the values in code behind. Can someone please point me in the right direction?
Any+Time URL
I am using the plugin like so:
**aspx head:**
<script>
var curDateTime = new Date();
</script>
**aspx body:**
<input type="text" id="calDwnBgn"/>
<script>AnyTime.picker('calDwnBgn', { askSecond: false, earliest: new Date(curDateTime.getFullYear(), curDateTime.getMonth(), curDateTime.getDate(), curDateTime.getHours(), curDateTime.getMinutes(), 0), format: "%m/%e/%Z %k:%i:00" });</script>
I am trying to access the value in the code behind like this:
Dim txtStrt As TextBox = TryCast(fv1.FindControl("calDwnBgn"), TextBox)
Thanks in advance,
Billy
I thought that I had to find the control in my form and then use the TextBox properties to get the value but I was able to get the value in code behind by adding the name attribute to the input tag and calling Page.Request.Form in code behind:
<input type="text" id="calDwnBgn" name="_calDwnBgn"/>
Then in code behind:
Page.Request.Form("_calDwnBgn").ToString()
I am using PrimeNG in my angular app, I have issue with p-dropdown
Question
I have two dropdowns for country and caste_category, I provide caste_reservation for only India , in case of other country selection , the OPEN option from caste_category needs to get selected and make the disable that dropdown.
If I have well understood your need, you have to set onChange event on country dropdown. This event will call a method that will trigger disabled property on caste dropdown depending on the country selected. It will also select OPEN option on this dropdown if the country is not India.
HTML
<p-dropdown [options]="countries" [(ngModel)]="applicant.country" (onChange)="updateCountry()"></p-dropdown>
<p-dropdown [options]="castes" [(ngModel)]="caste" [disabled]="disableCasteDropdown"></p-dropdown>
TS
updateCountry() {
if(this.applicant.country!=='India') {
this.disableCasteDropdown = true;
this.caste = 'o';
} else {
this.disableCasteDropdown = false;
this.caste = null;
}
}
See Plunker
Is it what you're looking for ?
If you are using Directive form controls you can disable the input, dropdown etc... by adding disabled: true in the form control
Using disabled attribute in html results to this message in console :
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.
Example:
form = new FormGroup({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});
I want to change input type from password to text.
What i have done:
1) In xml view:
<input type="Password" id="idPassword" showValueHelp="true" /> // enabling showValueHelp a button right corner in input text
2) In controller :
var oInput = this.getView().byId("idPassword");
oInput.attachValueHelpRequest(function(){
oInput.type = "Text"; //change input type as per documentation.
console.log(oInput); // I can see type="Text" in console
});
Actually It is not reflecting in browser.
There is not method called type.You should use
oInput.setType("Text");
or
oInput.setType(sap.m.InputType.Text);
Note:default type is Text.So you dont have to set it at all
I am trying to implement an short bio form where each user could edit and update its bio. Based on the fact that if the user has filled the form before or not, the previous text or nothing, gets returned as an initial text in the Textarea.
Here is the block I have for taking the username from the keyboard, searching the dbase for a value and trying to output it on the textarea before the form gets submitted by the user.
A kind of profile memory if you like.
#{
Validation.RequireField("currentuser");
Validation.Add("bioprint", Validator.StringLength(3000, 0, "Your bio should not exceed 3000 characters"));
var init = "";
var currentuser = Request["currentuser"];
var db = Database.Open("ResearchA");
var cbio = db.QuerySingle("SELECT bios FROM usernamesb WHERE username = #0",currentuser); //get current bio string
if (cbio == null) {init = cbio;} //check if string is NULL
else {init = "Tell us about you...";}
if(IsPost && Validation.IsValid()) {
var userbio = #Request["Bio"];
var insertbio = "UPDATE usernamesb SET bios = #0 WHERE username = #1";
db.Execute(insertbio, userbio, currentuser); //Update database with a new entry.
}
}
And here is how I have my controls setup in the HTML block:
<input type="text" name="currentuser" id="currentuser" value="#Request.Form["currentuser"]"/>
<textarea name="Bio" rows="10" cols="50" placeholder ="#cbio"></textarea>
However I dont get the already existing string output.
Thanks a lot for the interest guys!!
Your cbio variable is currently being loaded with a single row from the database. You need to get one of the fields from that row. Two ways of doing that, either change your database query to be:
var cbio = db.QueryValue("SELECT bios FROM usernamesb ...
which will return just the string. Or leave your database query the same, and change your way of accessing the field from the row by changing the html part:
<textarea name="Bio" rows="10" cols="50">#cbio.bios</textarea>
If you want to set the text in a <textarea> you put the value to be displayed between the opening and closing tags:
<textarea name="Bio" rows="10" cols="50">#cbio</textarea>
I have a name picker attached to the input but also want to allow type-ahead in a second field attached to the name picker, and then add the selected entry in the type-ahead control to the dojo name text box control.
In the typeahead onchange event, I can get the value of it and I can get the values in the Name Text Box control, but each entry in the NameTextBox is a spanned link like this:
<SPAN tabIndex=0 val="**abbreviatedNotesName**"><A class=lotusFilter tabIndex=-1 href="javascript:;">**commonNotesName**<SPAN class=lotusClose>x</SPAN></A></SPAN>
Do I need to re-write the innerHTML of the NameTextBox, and guess at the commonname from the typeahead result? Or, is there a better way? Thanks for any help/suggestions.
Here's the code:
<div id="copyToRow">
<div class="namePickerContainer">
<xe:namePicker id="namePicker1" for="fld_copyto_recipients">
<xe:this.dataProvider>
<xe:namePickerAggregator>
<xe:this.dataProviders>
<xe:dominoNABNamePicker addressBookSel="all"
nameList="peopleAndGroups">
</xe:dominoNABNamePicker>
<xe:dominoViewNamePicker labelColumn="$1"
viewName="($VIMPeople)" databaseName="#{javascript:viewScope.personalNAB;}"
label="#{javascript:viewScope.personalNABTitle;}">
</xe:dominoViewNamePicker>
</xe:this.dataProviders>
</xe:namePickerAggregator>
</xe:this.dataProvider>
</xe:namePicker>
<xp:div id="copyToContainer" styleClass="addresseeContainer">
<xe:djextNameTextBox id="fld_copyto_recipients"
value="#{sendFilesDoc.file_CopyToRecipients}" multipleSeparator=","
style="min-height:1.5em;" multipleTrim="true">
</xe:djextNameTextBox>
<xp:inputTextarea id="copyto_typeahead">
<xp:typeAhead mode="partial" minChars="1"
preventFiltering="true">
<xp:this.valueList><![CDATA[#{javascript:getComponent("namePicker1").getTypeAheadValue(this)}]]></xp:this.valueList>
</xp:typeAhead>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="copyToRow">
<xp:this.script><![CDATA[var copyTo = XSP.getElementById("#{id:copyto_typeahead}");
var result = XSP.getElementById("#{id:copyToTA}");
var newEntry = '<SPAN tabIndex=0 val="' + copyTo.value + '"><A class=lotusFilter tabIndex=-1 href="javascript:;">' + copyTo.value + '<SPAN class=lotusClose>x</SPAN></A></SPAN>';
//Format: <SPAN tabIndex=0 val="<abbreviated NotesName>"><A class=lotusFilter tabIndex=-1 href="javascript:;">common NotesName<SPAN class=lotusClose>x</SPAN></A></SPAN>
result.value = copyTo.value;
var copyToRecipients = XSP.getElementById("#{id:fld_copyto_recipients}");
//<INPUT style="MIN-HEIGHT: 1.5em" id=view:_id1:include1:fld_copyto_recipients type=text name=view:_id1:include1:fld_copyto_recipients dojoType="extlib.dijit.NameTextBox">
var copyToValue = copyToRecipients.innerHTML;
alert('copytorecipients innerHTML = ' + copyToValue);
alert('copytorecipients value = ' + document.getElementById("#{id:fld_copyto_recipients}").value); <-- undefined
var copyToArray = new Array();
var a = document.getElementsByName("#{id:fld_copyto_recipients}");
copyToArray = (a[0].value.split(','));
copyToArray.push(result.value);
//copyToRecipients.value = copyToArray.join(','); <-- this does not work
alert('copyToArray value = ' + copyToArray.join(','));
result.value = copyToArray.join(',');
copyTo.value = "";
return;]]></xp:this.script>
</xp:eventHandler>
</xp:inputTextarea>
</xp:div>
<xp:inputText id="copyToTA">
</xp:inputText>
</div></div>
What I think was tripping me up was required validation on the NameTextBox seemed to prevent the onchange event in the typeahead from firing. Who knows? Went through a lot of iterations ... I ended up adding Tommy Valand's JS function to control when validation is triggered & that seemed to fix things.
Bound the NameTextBox to the datasource field. Bound the typeahead to a requestScope variable. The typeahead onchange event code below also does a partial refresh on a container panel that wraps the 2 inputs.
/* append the typeahead name to those already selected */
var curVals:java.util.Vector = sendFilesDoc.getItemValue("file_SendToRecipients");
curVals.addElement(requestScope.sendToTypeAhead);
sendFilesDoc.replaceItemValue("file_SendToRecipients",curVals);
requestScope.sendToTypeAhead = null;
Then in the NameTextBox onChange event that also partial refreshes the container panel:
/*
remove duplicates that can be picked if the format of the displayed name in the right panel of the
name picker dialog doesn't match the column returned from the picker -- for instance, this will
happen on internet-style names stored in the user's personal names.nsf
e.g. FName LName <user#somecompany.com>
*/
var thisField:javax.faces.component.UIInput = getComponent("fld_sendto_recipients");
var theNames = #Unique(thisField.getValue());
thisField.value = theNames;
So you end up with something similar to how MSN hotmail works. Just have one final issue to try to resolve and that's how to get the cursor to return to the typeahead field after either using the namepicker or making a typeahead choice. Added this code as per this post on the client onchange event of the NameTextBox but the cursor just jumps into the typeahead field but then immediately jumps out:
/* set focus back on the typeahead input -- the input is a child of the typeahead dojo widget */
/* matches any <input> that is a child of the .dijitInputField class of the <div> for the typeahead */
var el = dojo.query('div[widgetid*="sendto_typeahead"] .dijitInputField > input').at(-1)[0].focus();
Any help??? Or, suggestions for solution improvement??