I have binded a Telerik dropdownlist with viewbag. It's working well. But listed items are wrapped.
Instead of coming in single line like 'United Arab Emirates' , It comes like
United
Arab
Emirates
How could I unwrap the line item
Thanks in advance
Is this in regard to Telerik ASP.net controls?
If so,
Have you tried setting the "NoWrap" property in the aspx of the combo box?
NoWrap="false"
I would check the width of the control, which would include the container for dropdown list values. You may have to change the CSS width... but it wouldn't be dynamic based on the dropdown values.
Here is a Telerik suggestion.
Are you actually using a dropdown list, or are you using a Telerik ComboBox? The combobox has a lot more options than a normal drop list, and in most cases it is very easy to convert from one control to the other. It's like a drop down list on steriods. Using the combo box, there is an awesome property called DropDownAutoWidth which you can set to enabled/disabled. Enabling will auto-size the width of the drop down based on the items that are in the drop down.
Try the code at this demo: Prevent Wrap of Kendo UI Drop down list item.
In the demo, you can change the text of any item in drop down and you will notice that the drop down width will automatically adjust so no wrapping of any item occurs. Put the JavaScript in this demo inside the document.ready event.
Markup
<select id="ddl1">
<option value="1">1</option>
<option value="2">option 2</option>
<option value="3">longer option 3</option>
<option value="4">even longer option 4 dssd s dssas </option>
</select>
JavaScript
$(document).ready(function() {
$("#ddl1").kendoDropDownList();
setWidth($("#ddl1"));
});
function setWidth(el)
{
var d = el;
var p = d.data("kendoDropDownList").popup.element;
var w = p.css("visibility","hidden").show().outerWidth();
p.hide().css("visibility","visible");
d.closest(".k-widget").width(w);
}
Related
I have a kendo ui dropdownlist
<select id="mySelect"
kendo-drop-down-list
k-options="controller.mySelect"
ng-model="controller.model">
</select>
Then when I change another select I am successfully refreshing the select by
$("#initiative_select").data("kendoDropDownList").dataSource.read();
But the initial selection is blank, I want to make the first item selected,
I have try to do that on dataBound by
dataBound: function(e) {
e.sender.select(e.sender.dataItem(0));
}
But it's not working.
I think you could use this on your dataBound function
if (this.select() === -1) { //check whether any item is selected
this.select(0);
this.trigger("change");
}
As mentioned by ggkrustev, the issue on github
a DEMO here
I want to add some animation to existing script I have right now. This is simple "go to div" script which goes to specific Div when someone change the option in dropdown list, but it functions "onchange" instead of link click. Now I would like to add animation, some smooth scroll when it goes to that Div because right now it just snaps to it and customer could be disoriented, thinking what happened.
This is my script inside HEAD
<script type="text/javascript">
function mylinkfunction(e) {
window.location.hash="#reservation_summary";
}
</script>
And this is the trigger mylinkfunction(); in dropdown list, among other "onchange" triggers.
<select class="inputbox" onchange="roomsCalc(this.value);mylinkfunction();removeHash();" style="width:150px" id="roomselect'.$rowr->id.'" name="jh-select-price['.$rowr->id.']">
I've found few solutions but everything was made for onclick and when someone click on a link, tried to implement some of these but it didn't work for "onChange" trigger.
I would be very thankful for some help.
Add jQuery to your project (if you haven't already!) and use jQuery's .animate() function along with scrollTop to achieve the desired effect.
So the select will look something like what you already have:
<select onchange="mylinkfunction();">
<option value="one">Uno</option>
<option value="two">Dos</option>
<option value="three">Tres</option>
</select>
...And mylinkfunction() will look like this:
function mylinkfunction(e) {
$('html, body').animate({
scrollTop: $("#reservation_summary").offset().top
}, 2000);
}
I have a radio button, to which I need to add the class "validate-one-required-by-name" using Prototype, but only if the current URL contains the text "/checkout/"
Here's the code for my radio button:
<input id="cm1" name="adj[delivery_comment]" value="Mañana - 10am a 12pm" title="Mañana" class="input-text delivery-comment" type="radio"> <strong>Mañana</strong> (10am a 12pm)</input>
I am very new to prototype, and I've been searchng for days, but I can't find a solution.
Any ideas are welcome.
Thanks!
Make sure you do this after the DOM has loaded inside
document.observe('dom:loaded',function(){
//after DOM loaded you can manipulate it
if(window.location.href.include('/checkout/'))
{
//If its one that one radio button you can do it like this
$('cm1').addClassName('validate-one-required-by-name');
//lets say its any element with the 'delivery-comment' class
$$('.delivery-comment').invoke('addClassName','validate-one-required-by-name');
//or all of the radio buttons in the DOM
$$('input[type="radio"]').invoke('addClassName','validate-one-required-by-name');
}
});
i am using ajax to get details from database as in this Example along with it
i used jquery autocomplete combo as in this Example.
The combo box works fine without the auto complete.
When the auto complete is active the details are not generated in the onChange Event of the combo box.
<select name="sitemCode" id="itemCode" onchange="showItem(this.value)">
<option value = " 0 ">Select Item Code</option>
How can i make it work with the autocomplete jquery ? Please Help
Have you tried like this ??
$('#itemCode').change(function() {
var itemCode= $("#itemCode option:selected").text();
showItem(itemCode);
});
I've recently started trying out d3.js for visualization. I don't have much of a background in JS or web scripting, so sorry if this is an easy thing that I'm asking.
The exact example doesn't matter too much. I am making a graph, something like this
I want there to be a drop down menu on the page that lists different data sources. The user could then select the data source and the graph would update.
I created a drop down menu using the example here. However, I am unsure how to get the value as I need the line
d3.json("miserables.json", function(json) {
to update with the new name.
Your html file should look something like this...
<select id="json_sources" name="json_sources">
<option value ="source1.json" selected>Source 1</option>
<option value ="source2.json">Source 2</option>
<option value ="source3.json">Source 3</option>
</select>
Then you add an event listener for the change event on the select element (.on in d3.js):
var dropdown = d3.select("#json_sources")
var change = function() {
var source = dropdown.node().options[dropdown.node().selectedIndex].value;
d3.json(source, function(json) {
//continue doing stuff here.
})
}
dropdown.on("change", change)
change(); //trigger json on load