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...
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
If I have a kendo combobox that contains more than 1 value I would like to insert "-ALL- as the DataTextField and "9999" as the DataValueField. Currently, if I have only a single record I use the DataBound event to test for that and if it = 1 then I load a grid based on this value, but if the length > 1 then I would like to add the -All-. I don't understand the insert as described by telerik.
#(Html.Kendo().ComboBox()
.Name("FAList")
.Placeholder("Select Fiscal Agency...")
.DataTextField("Text")
.DataValueField("Value")
.HtmlAttributes(new { style = "width:50%;" })
.Filter("startswith")
.AutoBind(true)
.MinLength(3)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetUserAgencyList", "Entities");
})
.ServerFiltering(true);
})
.Events(e => e
.Change("onFAChange")
.DataBound("onFADataBound")
)
)
and then the function for binding the data
function onFADataBound(e) {
// the agency list dropdown
var combobox = $("#FAList").data("kendoComboBox");
// if there is only a single record then set that in the combobox and load the grid based on that
if (e.sender.dataSource.view().length == 1) {
e.sender.select(0);
var filter = this.value();
$.get('/City/CityGrid_Read', { id: filter }, function (data) {
var grid = $("#FollowUpGrid").data("kendoGrid");
grid.dataSource.read();
})
}
if (e.sender.dataSource.view().length > 1) {
}
}
Answered at: Adding an item dynamically in kendo combobox
Combining that with your code:
if (e.sender.dataSource.view().length > 1) {
$("#FAList").data("kendoComboBox").dataSource.add({ Text: "-All-",
Value: "0" });
}
Something like that! I hope you get this implemented :)
An alternative could be to change the Placeholder text in this event method where length > 1
as per example on: http://www.telerik.com/forums/placeholder-text
$("#FAList").data("kendoComboBox").input.attr("placeholder", "-All-");
I am using the 2016.3.914.440 version of kendo and have a question on the ComboBox. If my datasource only returns a single value, how can I assign that to the ComboBox so the user doesn't need to enter a value? I tried the .SelectIndex(0), but that works under all situations, so I thought in the .DataBound I would check for the record count and if = 1 then I wanted to assign to the ComboBox.
The code I have is the following.
#(Html.Kendo().ComboBox()
.Name("FAList")
.Placeholder("Select Fiscal Agency...")
.DataTextField("Text")
.DataValueField("Value")
.HtmlAttributes(new { style = "width:50%;" })
.Filter("startswith")
.AutoBind(true)
.MinLength(3)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetUserAgencyList", "Entities");
})
.ServerFiltering(true);
})
.Events(e => e
.Change("onFAChange")
.DataBound("onFADataBound")
)
)
But I don't know how to finish the onFADataBound event
function onFADataBound(e) {
var dropdown = $("#FAList").data("kendoComboBox");
var count = dropdown.dataSource.data().length
alert('FA Count: ' + count)
}
So how would I find the text and value of the datasource record and assign that to the DataTextField and DataValueField.
You can select the first item via the select method.
function onFADataBound(e) {
if (e.sender.dataSource.view().length == 1) {
e.sender.select(1);
}
}
Note that the selected item's index will be 1 if you have an optionLabel (placeholder) and 0 otherwise.
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("");
When I set the selected item in the Kendo ComboBox, it will display the Value and not the Text of the Item.
foreach (var v in Model.Projects)
{
SelectListItem item = new SelectListItem();
item.Value = v.Project_Id;
item.Text = v.Description;
if (v.Project_Id.Equals(Model.Project_Id))
{
item.Selected = true;
}
list.Add(item);
}
}
#(Html.Kendo().ComboBox()
.Name("mycombo")
.BindTo(list)
.Enable(true)
.AutoBind(false)
)
Try updating your ComboBox wrapper with the DataTextField and DataValueField to tell it specifically what fields to use.
#(Html.Kendo().ComboBox()
.Name("mycombo")
.BindTo(list)
.Enable(true)
.DataTextField("Text")
.DataValueField("Value")
.AutoBind(false))
Just need to set the auto bind to true, so the text would be loaded immediately and not only when the user clicked the combo box.
#(Html.Kendo().ComboBox()
.Name("mycombo")
.BindTo(list)
.Enable(true)
.AutoBind(true)