I have a Kendo DropDownList, but strangely enough I can not set its initial value.
Html.Kendo().DropDownList()
.Name("PersonalCoachName")
.BindTo(new SelectList((List<string>)ViewData["coachResources"]))
.HtmlAttributes(new { style = "font-size:8pt;" })
ViewData["coachResources"] is a List of string type. Regardless I use
.BindTo(new SelectList((List<string>)ViewData["coachResources"], "Default"))
or
.SelectedIndex(3)
DropDownList does not change it value and only display the 1st value in the list. I need help on this. Thanks.
The value works only in jquery, not in html helper. So it works in Jquery like
var dropdownlist = $("#PersonalCoachName").data("kendoDropDownList");
dropdownlist.value(coachId);
dropdownlist.refresh();
Use the Value-method. See example code below.
#(Html.Kendo().DropDownList()
.Name("DropDownListName")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(model.DropDownListItems)
.Value(model.Selected)
)
EDIT:
DropDownList needs to be bind to List<SelectListItem> and it can be initialized as seen below.
var items = new List<SelectListItem>
{
new SelectListItem { Text = "Item0", Value = "0" },
new SelectListItem { Text = "Item1", Value = "1" }
};
In addition, I would recommend to use MVVM to attach it to view.
public class DropDownViewModel
{
public String Selected;
public List<SelectListItem> DropDownListItems;
public DropDownViewModel(String selected, List<SelectListItem> dropDownListItems)
{
Selected = selected;
DropDownListItems = dropDownListItems;
}
}
Use the property 'index' while initializing the kendo combobox to set the Default value.
$("#fabric").kendoComboBox({
autoWidth: true,
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Cotton", value: "1" },
{ text: "Polyester", value: "2" },
{ text: "Cotton/Polyester", value: "3" },
{ text: "Rib Knit", value: "4" }
],
filter: "contains",
suggest: true,
index: 3
});
There are two ways to set default value when initializing a kendo dropdown list.
$("#yourdropdownlist").kendoDropDownList({
dataTextField: "valueName",
dataValueField: "valueCode",
dataSource: [
{ valueName: "A", valueCode: "0" },
{ valueName: "B", valueCode: "1" }
],
//Method 1 -set index
//index: 0
//Method 2 - set default value and text
value: "0",
text:"行政区划"
});
This was my dropdown:
#(Html.Kendo().DropDownList()
.HtmlAttributes(new { style = "width:95%", id = "customerSelection" })
.Name("customers-dropdown")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model)
.OptionLabel("Select Customer...")
)
I wanted to select the default option "Select Customer..." upon some function. I was able to do this using following code:
var dropdownBox = $("#customerSelection").data("kendoDropDownList");
dropdownBox.text("");
dropdownBox.value("");
Related
Can someone please help me how can I change the contents of Formats dropdown in richtexteditor ej2 syncfusion?
At the moment, default values are: Paragraph, Code, Quotation, Heading 1 etc.
I want to remove the Code, Quotation and add a new custom Format called "My Paragraph".
I have gone through the documentation and apparently, it is not listed.
Help will be appreciated.
Here is what my current configuration is:
#Html.EJS().RichTextEditor("table").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).InsertImageSettings(new RichTextEditorImageSettings() { Path = "/Uploads/", SaveUrl = "/Home/Save" }).ShowCharCount(true).MaxLength(2000).Created("created").Render()
Controller method return configuration in viewbag
var tools = new
{
tooltipText = "Custom Tools",
template = "<button class='e-tbar-btn e-btn' tabindex='-1' id='custom_tbar' style='width:100%'><div class='e-tbar-btn-text rtecustomtool' style='font-weight: 500;'> Custom Tools</div></button>"
};
ViewBag.tools = new object[] {
"Bold", "Italic", "Underline", "StrikeThrough",
"FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "OrderedList", "UnorderedList",
"Outdent", "Indent", "CreateTable","|",
"CreateLink", "Image", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", tools,"|", "Undo", "Redo"
};
ViewBag.table = new[] {
"tableRows","tableColumns","tableCellVerticalAlign","tableCellHorizontalAlign","backgroundcolor"
};
ViewBag.value="";
You can modify the existing “format” option using Format property as shown below.
[View]
#Html.EJS().RichTextEditor("default").Format((object)ViewBag.types).ActionBegin("onBegin").Render()
<script>
function onBegin(e) {
alert(e.element.textContent + " is Selected");
}
</script>
[Controller]
public ActionResult Index()
{
object format1 = new { text = "Paragraph", value = "P" };
object format2 = new { text = "My Paragraph", value = "BlockQuote" };
object format3 = new { text = "Heading 1", value = "H1" };
object format4 = new { text = "Heading 2", value = "H2" };
ViewBag.types = new { width = "40px",
types = new[] { format1, format2, format3, format4 }
};
return View();
}
If the newly added item has any predefined format, you can mention that format in value. Else if you want to perform custom action, then you can get the selected item through actionBegin event of RTE and perform required action there. Now the items will be displayed in toolbar as shown below
Sample
I am using Kendo UI Multiselect:
http://demos.kendoui.com/web/multiselect/events.html
I have this Data:
var data =
[
{ text: "Shirt-Black", value: "1" },
{ text: "Shirt-Brown", value: "2" },
{ text: "Shirt-Blue", value: "3" },
{ text: "Cap-Green", value: "4" },
{ text: "Cap-Red", value: "5" },
{ text: "Cap-White", value: "6" },
{ text: "Jacket-Denim", value: "7" }
];
Now I want that if I select "Shirt-Brown" then rest entries for shirt i.e. "Shirt-Black" and "Shirt-Blue" should not appear in the list which means that the user should not be able to choose the Shirt of two colors.
Similarly, If a "Cap" of any color has been chosen then user should not be able to choose the "Cap" of any other color.
Is there any way to achieve this?
This is not build-in functionality. You can't even use dataSource filter() method because it will remove selected items from list as well.
However, this code will do what you're asking:
$("#select").kendoMultiSelect({
...
change: function(e) {
var dataItems = e.sender.dataItems();
var categories = [];
for(var i = 0; i < dataItems.length; i++){
var category = dataItems[i].text.substring(0, dataItems[i].text.indexOf('-'));
categories.push(category);
}
e.sender.ul.find('li').each(function(index, value){
var $li = $(value);
var hidden = false;
for(var i = 0; i < categories.length; i++){
var category = categories[i];
if ($li.text().match("^" + category)){
$li.css('display', 'none');
hidden = true;
}
}
if(!hidden){
$li.css('display', 'list-item');
}
});
}
});
Working KendoUi Dojo: http://dojo.telerik.com/AGisi
Have a grid-template with a kendo combobox in:
<script id="templateSample" type="text/kendo-tmpl">
#*Active holds the selected value*#
# alert(Active) # //
#(Html.Kendo().ComboBox()
.Name("ComboBoxSample")
.BindTo(new List<SelectListItem>()
{
new SelectListItem()
{
Value = "true",
Text = "Yes",
Selected = false,
},
new SelectListItem()
{
Value = "false",
Text = "No",
Selected = false,
}
})
.DataTextField("Text")
.DataValueField("Value")
.SelectedIndex(1)
.ToClientTemplate()
)
</script>
The template appears whenever a row is expanded (see http://demos.telerik.com/aspnet-mvc/grid/hierarchy).
I can't figure out how to set selected index with the item currently selected.
To set selected item, I can chose to use SelectListItem.Selected or Combobox.SelectedItem, but how to set a value from the item currently showing in the template ??
Thanks.
I have found a way to solve this problem using javascript.
Add an event to the grid:
.Events(e=>e.DetailInit("aftertemplateload"))
And the script:
function aftertemplateload(e) {
$("#ComboBoxSample" + e.data.Id).data("kendoComboBox").value(e.data.Active);
}
and remember to add the new id to the combobox:
#(Html.Kendo().ComboBox()
.Name("ComboBoxSample#=Id#")
.BindTo(new List<SelectListItem>()
{ etc...
With KendoUI 2013.3.1109
I am using KendoUI's scheduler
I am using a template for the reservation form, but via googling and perusing the forums, I read about re-using their recurrence form. I even figured out via experimenting that one could select which period options are available by, for instance, running:
$("#recurrenceEditor").kendoRecurrenceEditor(
{
frequencies: ["never", "daily", "weekly", "monthly"]
});
});
The code above will not load the 'yearly' option in the drop down.
There is no API documentation for kendoRecurrenceEditor on the website, but I was wondering if it is possible to tweak additional options, like removing the 'never' tag on when a recurrence should expire and so on.
So I initialize the Kendo recurrence editor:
$("#recurrenceEditor").kendoRecurrenceEditor({
change: function() {
onRecurrenceEditorChange();
}
});
Then I tweak what's visible inside #recurrenceEditor
var onRecurrenceEditorChange = function() {
var recurrenceKendoNumericTextBox = $('#recurrenceEditor .k-widget.k-numerictextbox.k-recur-count input[data-role="numerictextbox"]')
.data('kendoNumericTextBox');
if (recurrenceKendoNumericTextBox != null) {
var recurrenceEditorNeverEndOption = _container.find('#recurrenceEditor label:has(.k-recur-end-never)');
if (recurrenceEditorNeverEndOption != null)
recurrenceEditorNeverEndOption.hide();
recurrenceKendoNumericTextBox.max(10);
var recurrenceKendoDatePicker = _container.find('#recurrenceEditor .k-datepicker input[data-role="datepicker"]').data("kendoDatePicker");
if (recurrenceKendoDatePicker != null) {
var maxDate = window.moment().add('months', 2).toDate();
recurrenceKendoDatePicker.max(maxDate);
recurrenceKendoDatePicker.value(maxDate);
}
}
};
Then if you want to tweak the intervals, hack around it this way:
var recurrencePeriodKendoDropDownList = $('.k-widget.k-dropdown input[data-role="dropdownlist"]').data("kendoDropDownList");
var recurrencePeriodFilters = [
{
field: "value",
operator: "neq",
value: 'yearly'
}, {
field: "value",
operator: "neq",
value: 'monthly'
},
// if it's a newres, don't hide 'Never' option which matches to "",
{
field: "value",
operator: "neq",
value: someBoolConditionIhave ? "fake" : ""
}
];
I am using kendo ui multiple select
http://demos.kendoui.com/web/multiselect/events.html
i have this code
var data =
[
{ text: "Africa", value: "1" },
{ text: "Europe", value: "2" },
{ text: "Asia", value: "3" },
{ text: "North America", value: "4" },
{ text: "South America", value: "5" },
{ text: "Antarctica", value: "6" },
{ text: "Australia", value: "7" }
];
var multi = $("#select").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: data
}).data("kendoMultiSelect");
now i can add the values using this
multi.value(["5", "3"]);
now i want to remove from the selected values
is there any way to remove the values using value or text
for example if i want to remove 5 then is there any method like multi.remove(["5"]);
or any other way to remove it???
For removing element from a MultiSelect programmatically, you can use:
// Elements to be removed
var subtract = ["1", "5"];
// Get copy of current selected elements
var values = multi.value().slice();
// Remove elements from subtract
values = $.grep(values, function(a) {
return $.inArray(a, subtract) == -1;
});
// Clean filtering
multi.dataSource.filter({});
// Set new values
multi.value(values);
Where subtract are the elements to be removed (in this example "1" and "5").
TIP: For adding, you can use:
// Elements to add
var add = ["4", "5"];
// Get copy of current selected elements
var values = multi.value().slice();
// Merge withe elements to add
var merge = $.merge(values, add);
// Clean filtering
multi.dataSource.filter({});
// Remove duplicates and set them back
multi.value($.unique(merge));
Running example in here : http://jsfiddle.net/OnaBai/9WfGA/
This is already answered but this mught help someone. I had the same issue, wanted to remove values but didn't had the values to remove. This helped me out. It will remove all the selected values from dropdown
Add a css class to page
.hide-selected > li.k-state-selected {
display: none;
}
and add this code to pageload
var multiselect= $("#select").data("kendoMultiSelect");
multiselect.ul.addClass('hide-selected');