I want to add a blank selection item for KendoUi dropdownlist. I followed the same as mentioned in the below link.
http://www.kendoui.com/forums/ui/dropdownlist/how-to-allow-blank-selection-with-kendodropdownlist.aspx
But if I call the below in document.ready event,
$("#ddl").data("kendoDropDownList").one("open", function() {
$(this.ul[0].firstChild).html(" ");
});
I get error 'one' is null or undefined error. I have added the required reference files. What might be causing this? Is there any other way to add blank selection option?
I have defined the combobox as below in my mvc view.
<span class="list">
#(Html.Kendo().DropDownList()
.Name("facility").Events(events => events.Change("facilityChange"))
.OptionLabel(" ")
.DataSource(source => source.Read(read => read.Action("_GetFacilitiesForComboBox", "SuccessionInfo")))
.DataTextField("FacilityName")
.DataValueField("FacilityId")
.Value(Model.NextJobFacilityId.ToString())
.HtmlAttributes(new { style = "width:300px" })
)
</span>
Please help.
Achieved it by adding css
.k-popup .k-list .k-item {
min-height: 1.8em;
}
Reference - http://www.kendoui.com/forums/ui/dropdownlist/empty-selectitems-do-no-display-correctly.aspx
Related
I have in my application a Kendo Multiselect component where I select my available options.
my View is like this:
div class="editor-field col-width45">
<div>
#(Html.Kendo().MultiSelectFor(model => model.FeaturesValues)
.DataTextField("Name")
.HtmlAttributes(new { #class = "size100Percent", Id = "FeaturesSelect" })
.DataValueField("Id")
.Placeholder("Selecione...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetFeatures", "Role");
})
.ServerFiltering(false);
}))
</div>
</div>
I want to select all the options at once, and not be selecting one by one.
I looked for a way to do this and all the solutions brought me to this result:
I added a button in my View.
I created a Js function to select all:
my code stayed like this:
div class="editor-field col-width45">
<div>
#(Html.Kendo().MultiSelectFor(model => model.FeaturesValues)
.DataTextField("Name")
.HtmlAttributes(new { #class = "size100Percent", Id = "FeaturesSelect" })
.DataValueField("Id")
.Placeholder("Selecione...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetFeatures", "Role");
})
.ServerFiltering(false);
}))
</div>
</br>
<div>
#(Html.Kendo().Button()
.Name("SelectAll")
.HtmlAttributes(new { type = "button" })
.Content("Selecionar todos")
.Events(ev => ev.Click("selectAll")))
</div>
JavaScript:
function selectAll() {
var multiSelect = $("#FeaturesSelect").data("kendoMultiSelect");
var selectedValues = [];
for (var i = 0; i < multiSelect.dataSource.data().length; i++) {
var item = multiSelect.dataSource.data()[i];
selectedValues.push(item.Id);
}
multiSelect.value(selectedValues);
multiSelect.trigger("change");
}
my result is this:
multiselect with button add all
Everything is working perfectly !!!
My question is:
Is it possible to create a checkbox inside the kendo Multiselect, to be used as select all, and not have this button?
What I want is something like this:
[multiselect without button][2]
enter image description here
You can add checkbox to header template which can be used to select - de select all elements.
Check this demo dojo
Though example here is shown using a Kendo UI JS, you can accomplish it using Kendo ASP.NET as well.
#(Html.Kendo().MultiSelect()
....
.HeaderTemplate("<label><input type='checkbox' id='selectAll'> Select All</label>")
I have prepared a quick dojo for you here. https://dojo.telerik.com/UpAFIdEx
This should hopefully be what you are after. I have just applied some simple styling just to get things looking a bit like your second image. but if you are using bootstrap or have css that handles positioning of elements this should work for you.
Any issues/questions let me know.
I have Kendo ComboBox useing it in MVC Project.
#(Html.Kendo().ComboBox()
.Name("ddl")
.DataTextField("cName")
.DataValueField("iID")
.HtmlAttributes(new { style = "font-size:95%;" })
.AutoBind(true)
.Animation(false)
.Filter(FilterType.StartsWith)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("MethodName", "ControllerName");
});
})
)
But I want validation for this ComboBox on Button Click if no value is selected in ComboBox then button click not occur.
Do anyone have any ideas for validating this ComboBox?
I am assuming your button is supposed to submit value you have selected in the ComboBox.
1) store your combobox in a variable combobox (optional)
2) validate in following way
$("#submitbutton").click(function() {
if (combobox.value() != '') {
// submit here
}
});
I am trying to set up an Ajax call whenever the user enters information into a particular field on my ASP MVC web page. Below is the jQuery .blur method
$('#MailingZip').blur(function () {
alert("here");
if ($('#MailingState').val() != "" && $('#div.channelName').text() != "") {
alert("inside Mailing Zip");
getDrmTerritory($('#MailingZip').val(), $('#MailingState').val(), $('#div.channelName').text());
}
});
and here is the control from the view.
<div class="M-editor-label">
#Html.LabelFor(model => model.MailingZip)<span class="req">*</span>
</div>
<div class="M-editor-field">
#Html.TextBoxFor(model => model.MailingZip, new { maxlength = 15, onchange = "CheckTerritory('M');" })
#Html.ValidationMessageFor(model => model.MailingZip)
</div>
I just started w/jQuery a couple weeks ago, so I'm not sure what's wrong. FYI, none of the alerts are working and if I set a breakpoint at the first if statement it doesn't fire.
Make sure you put your code inside of the $(document).ready() function, this ensures that the DOM is fully loaded before you manipulate any of its contents:-
$(document).ready(function() {
// your code here!
});
Can Anyone explain to me the structures of this codes?
For an instance .Name("products") is the DropDownList name, I would like to know for what are those (what do you call this (Name, OptionLabel, etc.)) because it really confuse me. I'm stuck in creating a cascading DropDownList.
#(Html.Kendo().DropDownList()
.Name("products")
.OptionLabel("Select product...")
.DataTextField("ProductName")
.DataValueField("ProductID")
.DataSource(source => {
source.Read(read =>
{
read.Action("Type", "ComboBox")
.Data("filterProducts");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("categories")
)
<script>
function filterProducts() {
return {
categories: $("#categories").val()
};
}
</script>
<p>
<label for="orders">Orders:</label>
#(Html.Kendo().DropDownList()
.Name("orders")
.OptionLabel("Select order...")
.DataTextField("ShipCity")
.DataValueField("OrderID")
.DataSource(source => {
source.Read(read =>
{
read.Action("SubType", "ComboBox")
.Data("filterOrders");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("products")
)
<script>
function filterOrders() {
return {
products: $("#filterOrders").val()
};
}
</script>
.Name("orders"): This is the unique name to assign to the dropdown html element.
.OptionLabel("Select order..."): This is what the dropdown should display when no option is selected.
.DataTextField("ShipCity"): This is the property of the datasource that populates the dropdown options that should be displayed in the dropdown.
.DataValueField("OrderID"): This is the property of the bound datasource that populates the dropdown options that should be used as the value to bind to the underlying model of the view.
read.Action("SubType", "ComboBox"): This defines the Action and Controller that should be called to retrieve the collection that will populate the dropdown options
.Data("filterOrders"): this is used to assign parameters to the above read.Action method
.ServerFiltering(true):
.Enable(false): Whether or not the dropdown is enabled.
.AutoBind(false): Whether or not the dropdown should immediately bind to its dropdown datasource (or wait for the cascade from dropdown to be assigned a value)
.CascadeFrom("products"): The other DropDownList to cascade from. If AutoBind is false, then this dropdown will only bind to its options datasource once the other dropdown has been assigned a value by the user.
I have a kendo grid in mvc with column property .Encoded(false)
In the controller I replaced Environment.NewLine with
<br>
But in the view there is a text instead of real new line. I tried both:
<br> or <br/>
It is not working either. What am I doing wrong?
Finally I solved it myself.
in the Grid:
columns.Bound(m => m.Address).Width(150).Encoded(false).ClientTemplate("#= getHtmlNewLinesString(Address) #");
and in the js:
function getHtmlNewLinesString(text) {
var regexp = new RegExp('\n', 'g');
return text.replace(regexp, '<br>');
}
You can also use css to solve this.
in html file:
col.Bound(c => c.Text)
//.Encoded(false)
.Title("text")
.HtmlAttributes(new { Class = "keepLineBreak" });
in css file:
.keepLineBreak {
white-space: pre-wrap;
}
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
The filter is not working in this case because the cell includes <br>.