Binding kendo UI rangeSlider with other controls - data-binding

I am trying to bind a range slider with two text input controls. Ideally, I want change in either range slider, text input or viewModel property to update all these controls visually and in sync. But here is my observation.
Changing range slider values by dragging the thumb, updates the viewModel and input text control values
Editing the text in input field in UI updates the viewModel but the rangeSlider is not updated.
Changing the range property in console eg. viewModel.range[0]=-10, does not update the text input value or range slider.
Changing the range slider value programmatically(slider.value([-7. 10])) does not update viewModel or input text.
Here is the code:
Javascript
<script type="text/javascript">
var viewModel = kendo.observable({
range: [-7, 3]
});
$(document).ready(function() {
var slider = $("#slider").kendoRangeSlider({
min: -10,
max: 10
});
kendo.bind($(".QFContent"), viewModel);
});
</script>
HTML
<div class='QFContent'>
<div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'>
<div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'>
<span class='readoutText tab-ctrl-formatted-fixedsize'></span>
<input data-bind="value: range[0]" data-value-update="keyup" type='text'></input>
</div>
<div class='QFReadout QFUpperBound tab-ctrl-formatted-border-hover'>
<span class='readoutText tab-ctrl-formatted-fixedsize'></span>
<input data-bind="value: range[1]" data-value-update="keyup" type='text'></input>
</div>
<div id="slider" class='QFSlider QFBar' data-bind="value : range">
<input></input>
<input></input>
</div>
</div>

You have to do a bit more work with updating the range as I don't think binding the value to an array[0]/[1] will actually update it.
You will need to call a function that will update the range values when the input box changes. I went ahead and used kendo numerictextboxes, but a regular input box works just as well.
http://jsbin.com/eBOJeceN/2/edit
-- Edit, small bug in that sample, "undefined" isn't undefined. Updated jsbin http://jsbin.com/eBOJeceN/4/edit

Related

How to position google autocomplete predictions?

I have a table with a list of contacts as seen in the image. I also have an event that gets triggered when a row is clicked so it can show the selected contact detail (I am using angular NGIF directive to show and hide the detail)
The thing is because my google input is placed inside an NGIF block, when user expands the contact detail and tries to type in it, the predictions (pac-container) is showing on the row that I clicked (within the table) rather than underneath the google input autocomplete search box.
I tried to manipulate the css of the class pac-container but I couldn't figure out a way to override the css of that class.
Here is my the html of my autocomplete search box
<div *ngIf="showGoogleAddress" class="mg-b-10" fxLayoutGap="10px" fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlexFill>
<div fxFlex>
<mat-form-field appearance="outline" class="form-field">
<mat-label>Google Address Search Box</mat-label>
<input [debounceTime]="500" ngxAutocomPlace autocomplete="off" (selectedPlace)="placeChanged($event)" placeholder="ex: Phoenix, Arizona" matInput #googleAddress="matInput" >
<mat-icon matSuffix>location_on</mat-icon>
<mat-hint>Search for compolete address, or city</mat-hint>
</mat-form-field>
</div>
</div>
also, here is a screenshot of the entire form after expanding the detail
If the google autocomplete box was outside the NGIF, then it will render the predictions just fine without an issue. It seems that because I am using NGIF directive, the google component is not able to determine the right position (calculate the right position) to render its predictions..
When I tried
.pac-container {
position: absolute !important;
z-index: 100000;
}
it did not work.
I had to go with a DOM Manipulation way using JS.. so I added a (keyUp) event handler on google search box with a method to calculate the position like the following:
adjustResPosition() {
setTimeout(() => {
var gSearchBar = document.getElementById('googleBar');
var topPos = (gSearchBar?.getBoundingClientRect().top || 0) + window.scrollY + 25;
var leftPos = (gSearchBar?.getBoundingClientRect().left || 0) + window.scrollX;
var gPreds = document.querySelector('.pac-container');
gPreds?.setAttribute('style', `top: ${topPos}px; position: absolute!important; width: auto; left: ${leftPos}px`);
}, 600);
}
The reason why I put setTimeout to 600ms is because I have a debounce 500 ms each until it grabs the next predictions and put it in the pac-container div
Note, this is not an optimal solution and it can be improved with ViewChild or ElementRef

how to show drop down list on top of drop down box (always)

i am using syncfusion pager, dropdownlist in our application
please open the below link.
https://stackblitz.com/edit/angular-nv6myv?file=src%2Fapp%2Fapp.component.html
data will change based on the number of items selected from dropdown.
after selecting the 20 items from drop down go to bottom of the page by scrolling.
drop down list is showing bottom of the drop down box. but i want to show dropdown list items always top of the dropdown box.
Please provide any solution.
i just saw your code on your link, and i tried this:
<div class="container-fluid">
<div class="card" *ngFor="let student of tempArray">
<div class='card-body'>
<p class="text-truncate">{{student.name}} {{student.standard}}</p>
</div>
</div>
<br/><br/><br/><br/><br/>
<div class='card'>
<div class='card-body'>
<div class="fixed-footer" *ngIf="students.length > paginationData[0].value">
<ejs-pager [pageCount]="3" [pageSize]="value" (click)="selectedPage($event)"
[totalRecordsCount]='students.length'></ejs-pager>
<ejs-dropdownlist [dataSource]="paginationData" [fields]="fields" (change)="valueChange($event)" [popupHeight]=150 [value]="value"></ejs-dropdownlist>
</div></div>
</div>
</div>
what i did here is that i put the list items and the drop down box on a separate card.
it's a little messy, just please arrange the indentions.
In the dropdownlist open event, you can get the popupHight and set a negative value into popup offsetY property, refer to below code.
onddlPopupOpen(event: PopupEventArgs, ddlObj) {
event.popup.offsetY = -(parseInt(ddlObj.popupHeight));
event.popup.collision = { X: 'fit', Y: 'fit' };
event.popup.dataBind();
event.popup.refreshPosition(ddlObj.element, false);
}
This will open the popup in the top.
Sample

Making buttons equally sized based on biggest button in HTML form

In the code sample below I have a simple form with two submit buttons.
<form>
<input type="submit" value="< Previous">
<input type="submit" value="Next >">
</form>
Depending on the value attribute the buttons will get different sizes, like the image below:
Is there a method I can use to make the buttons equally sized based on the widest button? I use Bootstrap if that's any advantage...
I know that I could use a fix CSS-width (or similar) to set equal widths on the buttons. But since I don't know how wide the value will be in advance it won't solve the problem... (or will it?).
Use JQuery
var prev = $('#prev').width();
var next = $('#next').width();
if (prev > next) {
$('#next').width(prev);
} else {
$('#prev').width(next);
}
Here is a jsfiddle I made..

Checkbox styling - targeting a specific input element

Within a series of check boxes (lets say 3 options) I am looking to target a specific input element on the checking/unchecking of the associated label.
HAML
.choice-select-button
= check_box_tag("order[recipes][]", recipe.id, selected)
= label_tag do
= t(".step_4.tick_box_to_select")
Renders HTML
<div class="choice-select-button">
<input type="checkbox" name="order[recipes][]" id="order_recipes_" value="6" checked="checked">
<label>Click to select</label>
</div>
Each <input> is assigned same id, namely id="order_recipes_" so if I give set <label for="order_recipes_"> and the user then 'un-checks' the label then only the first input on the page with the id="order_recipes_" is styled according to my css instructions.
The only differentiator I can see for the choice-select-button.input is it's value. As such I was looking at giving the label a for= that targets inputs with the id="order_recipes_ AND value="6". First up, is this doable, and secondly, is the best way to do something like this or is there a much more simple method?
Thanks in advance.
According to the rrails doc:
check_box_tag(name, value = "1", checked = false, options = {}) Link
Creates a check box form input tag.
Options
:disabled - If set to true, the user will not be able to use this
input.
Any other key creates standard HTML options for the tag.
you can generate different ids like this:
check_box_tag("order[recipes][]", recipe.id, selected, {id: recipe.id})

autoit - IE click a button based on its text.

I have a button on a form that I need to click and it looks something like this
<button id="****" class="****">Click Me</button>
I am using the following code to click other buttons which works fine but that is because the other buttons has a value="*****" assigned to it
$oButtons = _IETagnameGetCollection($oIE, "button")
For $oButton in $oButtons
If String($oButton.value) = "Click Me" Then
_IEAction($oButton, "click")
EndIf
Next
I know that the $oButton.value is what is getting the value for the button, but what other "operator" is there besides value that can get the anchor text of the button?
The example that you posted should be used only in a situation when you don't have an ID of the element. ID is always unique.
If the button that you want to click has an ID, you can use it as a reference to that button.
EXAMPLE:
HTML:
<button id="MyButton" class="someClass">Click Me</button>
CODE:
$oBtn = _IEGetObjById($oIE, "MyButton")
_IEAction($oBtn, "click")
Apart from .Value you can use all of the below:
$oBtn.innerText
$oBtn.outerText
$oBtn.innerHtml
$oBtn.outerHtml
$oBtn.classname
$oBtn.id
$oBtn.name
$oBtn.href
$oBtn.src
$oBtn.click
$oBtn.focus
...
Note that you can use $oBtn.value to read or write to the "Value" property of the html element, but for eg. "itemProp" property $oBtn.itemProp won't work
EXAMPLE:
HTML:
<button id="MyButton" class="someClass" itemprop="streetAddressSubmit" >Click Me</button>
This wont work:
$ItempropValue = $oBtn.itemprop
This is how it should be done:
$ItempropValue = $oBtn.getAttributeNode ('itemprop').NodeValue

Resources