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)
});
Related
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();
});
I'm trying to populate a form on a webpage that uses Knockout JS. When I insert a value into a particular text box it appears to have taken the value but when I submit the form it retains it's previous value. With a bit of digging around I've discovered that Knockout JS uses data-binding to update the underlying value. When I insert a value into the input text box the Knockout JS is not being triggered and therefore not updating the underlying value. This post is for something similar but with a check box and dropdown box rather than a text box. But I can't figure out how to get it working with a text box.
The actual website I'm trying update requires a login, however I think this page on the Knockout JS Site http://knockoutjs.com/examples/helloWorld.html will suffice for testing purposes.
Basically what I need is, using VBA, to enter a FirstName and LastName in the 2 text boxes (where it currently says 'Planet' and 'Earth'). You should see the 2 input values appear immediately below where it says 'Hello Planet Earth'. Typing it manually into the text boxes works fine. But I just can't get it to work in VBA.
Here' what I have so far...
Sub KnockoutTest()
Dim IE As New InternetExplorer
Dim hDoc As HTMLDocument
IE.Visible = True
'Load webpage and loop until loading is complete.
IE.Navigate "http://knockoutjs.com/examples/helloWorld.html"
Do While (IE.Busy Or IE.ReadyState <> READYSTATE_COMPLETE)
DoEvents
Loop
Set hDoc = IE.Document
Set firstName = hDoc.getElementsByClassName("liveExample").Item(0).all.Item(1)
Set lastName = hDoc.getElementsByClassName("liveExample").Item(0).all.Item(3)
firstName.Click
firstName.Value = "Joe"
lastName.Click
lastName.Value = "Bloggs"
'Close ie object
Set IE = Nothing
Application.ScreenUpdating = True
End Sub
Anyone got any ideas on how I get the knockout events to fire?
The actual html from the text box on the page I'm trying to update is this....
<input type="text" ondrop="return false;" onpaste="return false;" data-bind="numericValue: Markup, visible: IsCellEditable(), selected: IsCellEditable(), event: { blur: blurZoneMarkup, keypress: function (data, event) { return $parent.isDecimal(data, event, hdnIsDiscount) }, keydown: function (data, event) { $(event.target).data('tabcode', event.which || event.keyCode); { return true; } } }" style="width: 90%; display: none;">
Any help or advice would be much appreciated. I've been trying to solve this for 3 days now!
Basically, you would need to handle such automated inputs as 'HTMLevents' and trigger them. An updated snippet from your original code:
With hDoc
Set evt = hDoc.createEvent("HTMLEvents")
evt.initEvent "change", True, False
firstName.Value = "Joe"
firstName.dispatchEvent evt
End With
Tested this code and works fine for the website that link that you have provided.
I have done tons of website automations with VBA and the most robust approach is to create one event, specific to each field that you would want to fill, assign a value to the field, and dispatch the event that you have created.
For further information, refer to the documentation on MSDN https://msdn.microsoft.com/en-us/ie/ff975247(v=vs.94)
I want to show a popup dialog containing a dijit.ComboBox with data populated using ajax request or data store.
The problem I am facing is that the combobox is always disabled.
My selected code is:
<div dojoType="dojo.data.ItemFileReadStore" id="osTypeStore" data-dojo-id="osTypeStore" url="/AjaxPopulateOS.json">
</div>
<select id="osType" data-dojo-type="dijit.form.ComboBox"
data-dojo-props="
id:'osType',
store: osTypeStore,
placeHolder: 'Select a schdule type'" >
</select>
Any ideas
I believe it is because there are no items in it? Is it grayed out totally - and have the Disabled class parameter set?
Check that dijit.byId('osTypeStore') returns a store and that it has items in it.
If this is the case, change your code to
store: 'osTypeStore'
Note the quotes. This forces parser to evaluate the string into a dijit - and the store might not have been initialized correctly as a true variable at the point it is read. In other words, in combobox constructor - the javascript variable is undefined.
If this does not help, try forcing to set store after onShow has run for your dialog.
dialog.onShow = function() {
dijit.byId('osType').set('store', dijit.byId('osTypeStore'));
}
Try forcing it to enabled using the property of the combo
enabled: true,
Other than that, check it using Firebug or debug bar or something similar :)
I have two Hyper Links on to a DOJO DIv
var create = dojo.create("div",{
id:"create_links",
className:"iconRow1",
innerHTML:"<a class='popupLink' href='javascript:openCreateDialog()'>Create </a> <span>|</span><a href='javascript:openUploadDialog()'>Batch </a>"
},dojo.query(".ui-jqgrid-titlebar")[0]);
On click of the Batch Hyperlink , i have a function
function openUploadDialog()
{
// Here i want to disable the Create Hyper Link tried this way
dojo.byId('create_links')[1].disabled=true; // Not working
}
See whether i can answer your question.
HTML Part:
<div id="create_links">
g
h
</div>
JS Part:
dojo.addOnLoad(function() {
var a = dojo.query("#create_links a")[1];
dojo.connect(a,'click',function(e){
console.log(e.preventDefault())
})
})
#Kiran, you are treating the return of dojo.byId('create_links') like an array when that statement will return to you a node on the dom.
Also, hyperlinks don't support a disabled attribute to prevent them from being actionable. You could probably create a click handler that returns false to accomplish this type of functionality, or like #rajkamal mentioned, calling e.preventDefault(). #rajkamal also provides a good solution to selection the link properly.
Is there any way to disable all input fields in an div container with dojo?
Something like:
dijit.byId('main').disable -> Input
That's how I do it:
dojo.query("input, button, textarea, select", container).attr("disabled", true);
This one-liner disables all form elements in the given container.
Sure there is. Open up this form test page for example, launch FireBug and execute in the console:
var container = dojo.query('div')[13];
console.log(container);
dojo.query('input', container).forEach(
function(inputElem){
console.log(inputElem);
inputElem.disabled = 'disabled';
}
)
Notes:
On that test page form elements are actually dijit form widgets, but in this sample I'm treating them as if they were normal input tags
The second dojo.query selects all input elements within the container element. If the container had some unique id, you could simplify the sample by having only one dojo.query: dojo.query('#containerId input').forEach( ...
forEach loops through all found input elements and applies the given function on them.
Update: There's also a shortcut for setting an attribute value using NodeList's attr function instead of forEach. attr takes first the attribute name and then the value or an object with name/value pairs:
var container = dojo.query('div')[13];
dojo.query('input', container).attr('disabled', 'disabled');
Something else to keep in mind is the difference between A Dijit and a regular DomNode. If you want all Dijit's within a DomNode, you can convert them from Nodes -> Dijit refs with query no problem:
// find all widget-dom-nodes in a div, convert them to dijit reference:
var widgets = dojo.query("[widgetId]", someDiv).map(dijit.byNode);
// now iterate over that array making each disabled in dijit-land:
dojo.forEach(widgets, function(w){ w.attr("disabled", "disabled"); }
It really just depends on if your inputs are regular Dom input tags or have been converted into the rich Dijit templates (which all do have a regular input within them, just controlled by the widget reference instead)
I would do it like this:
var widgets;
require(["dijit/registry", "dojo/dom"], function(registry, dom){
widgets = registry.findWidgets(dom.byId(domId));
});
require(["dojo/_base/array"], function(array){
array.forEach(widgets, function(widget, index) {
widget.set("disabled", true);
});
});
Method findWidgets is essential to get all widgets underneath a specific DOM.