Rank 2
Iron
Veteran
Iron
I have a kendo form with two drop down list editors.
How can I from Javascript set the selected value of one of the drop downs.
Both drop downs are using server side filtering .
There is a possibility that the value i need to set is not in the already pulled data , but it is guaranteed to be in the full datasource.
Any direction would be appreciated.
@(Html.Kendo().Form<KitMasterViewModel>()
.Name("KitInfoForm")
.HtmlAttributes(new { action = @Url.Action("ValidationKitMaster", "KitsOverview"), method = "POST" })
.FormData(Model)
.Layout("grid")
.Grid( c => c.Cols(2).Gutter(4))
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.Items(items =>
{
items.AddGroup()
.Label("Kit Information")
.Items(i =>
{
i.Add()
.Field(f => f.SeqKit)
.Label(l => l.Text("Kit Number:"));
i.Add()
.Field(f => f.DateSchedule)
.Label(l => l.Text("Date Required"));
i.Add()
.Field(f => f.KitQty)
.Editor(E =>
{
E.NumericTextBox<int>()
.HtmlAttributes(new {style = "text-align:right" })
.Format("N0");
})
.Label(l => l.Text("Kit Quantity:"));
i.Add()
.Field(f => f.PickOrder)
.Label(l => l.Text("Pick Order:"))
.Editor(E => {
E.DropDownList()
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>()
{
new SelectListItem()
{
Text="Lowest Quantity",
Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.LowestQty}",
},
new SelectListItem()
{
Text="FIFO Order",
Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.FIFO}"
},
new SelectListItem()
{
Text="Match Quantity",
Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.ClosestMatch}"
},
new SelectListItem()
{
Text="Custom Order",
Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.Custom}"
},
});
});
i.Add()
.Field(f => f.ID)
.Label(" ")
.EditorTemplate("<input name='ID' type='hidden' />");
});
items.AddGroup()
.Label("Source")
.Items(i =>
{
i.Add()
.Field(f => f.IDBom)
.Label("Assigned Bill of Material")
.Editor(e =>
{
e.DropDownList()
.DataValueField("IDBom")
.DataTextField("LongName")
.HtmlAttributes(new { style = "width:100%"})
.Filter("contains")
.Events(item => item.Change("BillChanged"))
.MinLength(3)
.Height(520)
.Template("<table><tr><td style='width:200px' >#: data.PartNumber #</td><td style='width:50px'>#: data.Revision #</td></tr></table>")
.DataSource(
source =>
{
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.PageSize(80)
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read("GetBOMMasters", "BillOfMaterial");
})
.Schema(schema =>
{
schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
.Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
});
}
);
});
i.Add()
.Field(f => f.IDAVL)
.Label("Assigned Constraint")
.Editor(e =>
{
e.DropDownList()
.Name("ddlAVL")
.HtmlAttributes(new { })
.DataTextField("NameAVL")
.DataValueField("IDAVL")
.HtmlAttributes(new { style = "width:100%" })
.Height(520)
.MinLength(3)
.Filter(FilterType.Contains)
.DataSource(
source =>
{
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.PageSize(80)
.Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
.Transport(transport =>
{
transport.Read("GetAVLMasters", "BOMEdit");
})
.Schema(schema =>
{
schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
.Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
});
}
);
});
});
})
)
<script type="text/javascript">
$(document).ready(function () {
$("input[type='text'], textarea").attr('spellcheck', false);
});
function BillChanged(e) {
var ddl = e.sender;
var selectedValue = ddl.value();
$.ajax({
url: "@Url.Action("GetBOMMasters", "BillOfMaterial",new { id = UrlParameter.Optional, operation = UrlParameter.Optional })" + "/" + selectedValue,
type: 'POST',
contentType: 'application/json;',
data: JSON.stringify({ id: selectedValue }),
success: function (bom) {
if (bom.Data.length>0) {
var idAVL = bom.Data[0].IDAVL;
// I need to set the value of ddlAVL to idAVL here
// but i am at a loss to how to do it
debugger;
}
}
});
}
function NavigateComponents() {
location.href = "@Url.Action("KitsOverview", "KitsOverview",new {id=Model.ID, operation = "components"})";
}
function NavigateKitInfo() {
location.href = "@Url.Action("KitsOverview", "KitsOverview",new { id = Model.ID, operation = "info"})";
}
function NavigateOverview() {
location.href = "@Url.Action("KitsOverview", "KitsOverview", new { id = UrlParameter.Optional, operation = UrlParameter.Optional})";
}
</script>4 Answers, 1 is accepted
Hello David,
Thank you for writing to us.
Generally, we provided cascading dropdownlist implementation using the .CascadeFrom() property and this scenario also uses .ServerFiltering() as you can see in this live sample:
https://demos.telerik.com/aspnet-mvc/dropdownlist/cascadingdropdownlist
As for the specific question, I have prepared a live sample to demonstrate how you can achieve this requirement:
https://dojo.telerik.com/usetiJiW/4
Feel free to check it and let me know if it helps you.
Regards,
Eyup
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 2
Iron
Veteran
Iron
Eyup,
I tried to incorporate the reference you provided in your supplied code.
But it is coming up as undefined.
I am using the mvc wrappers not sure if that is the issue (see original provided code).
var ddl = $(".k-form-field-wrap .k-dropdownlist input").last().data().kendoDropDownList;
I have enclosed a snapshot of the error as well in the debugger.
thanks
Dave
Hi Dave,
For older versions you can use this class name:
var ddl = $(".k-form-field-wrap .k-dropdown input").last().data().kendoDropDownList;https://dojo.telerik.com/usetiJiW/8
Rank 2
Iron
Veteran
Iron
Eyup that worked.
thanks
Rank 2
Iron
Veteran
Iron
Just a follow-up question.
I checked and i am using a fairly new version 2022.1.301
When you say "older versions" is that because the kendo version used in the MVC distro is a little older.
I just want to make sure i do not have something misconfigured and am using the latest available.
thanks
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
@Scripts.Render("~/bundles/jquery")
<link href="@Url.Content("~/Content/kendo/2022.1.301/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2022.1.301/kendo.blueopal.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@*<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">*@
<script src="@Url.Content("~/Scripts/kendo/2022.1.301/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2022.1.301/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2022.1.301/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2022.1.301/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
Hi David,
I am glad the solution has proven helpful.
As for the Kendo version, it would be best if you open the page and check the version in the browser console: