I have two multiselects (vendors and buyers) that are required selections to load a grid which lists POs when a user presses a "search" button. I am trying to learn about how to add validation so that you cannot load the grid unless the two multiselects have something selected. The documentation that I've found deals with forms so trying to figure out how to implement validation for my usecase.
<label for="vendorslist" style="color:white; line-height:3.2; padding-right:3px; padding-top:5px">Vendors</label>
<div class="nav-item dropdown" style="padding-right:10px;">
@(Html.Kendo().MultiSelect()
.Name("vendorslist")
.Filter(FilterType.Contains)
.Placeholder("Select Vendor...")
.AutoClose(false)
.AutoBind(false)
.DataTextField("displayvalue")
.DataValueField("keyvalue")
.AutoWidth(true)
.HtmlAttributes(new { style = " font-size:inherit; width:250px" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetVendorList", "UVL").Data("GetFacilityCode");
}).ServerFiltering(false);
})
.Events(events => events.Open("vendorsListOpen"))
)
</div>
<label for="buyerslist" style="color:white; line-height:3.2; padding-right:3px; padding-top:5px">Buyers</label>
<div class="nav-item dropdown" style="padding-right:10px;">
@(Html.Kendo().MultiSelect()
.Name("buyerslist")
.AutoClose(false)
.AutoBind(false)
.Placeholder("Select Buyer...")
.Filter(FilterType.Contains)
.DataTextField("agent")
.AutoWidth(true)
.HtmlAttributes(new { style = " font-size:inherit; width:150px" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetBuyers", "PODashboard").Data("GetFacilityCode").Type(HttpVerbs.Get);
}).ServerFiltering(false);
})
)
</div>
Function ran when reading grid that pulls selections to use for params when calling API:
function getPOParams() {
//grab facility
var dataText = $("#Facility").data("kendoDropDownList").text();
var facility = dataText.split('-');
var _facilityCode = $.trim(facility[0]);
var _facilityDesc = $.trim(facility[1]);
//grab vendor
var multiselect = $("#vendorslist").data("kendoMultiSelect");
var _vendors = [];
var items = multiselect.value();
for (var i = 0; i < items.length; i++) {
_vendors.push(items[i].trim());
}
//grab buyer
var buyerMultiselect = $("#buyerslist").data("kendoMultiSelect");
var _buyers = [];
var buyerItems = buyerMultiselect.value();
for (var i = 0; i < buyerItems.length; i++) {
_buyers.push(buyerItems[i].agent.trim());
}
//grab PO#
var _poText = $("#poNumTextbox").data("kendoMaskedTextBox").value().toString();
//grab status
var _statusText = $("#StatusDropDownList").data("kendoDropDownList").value();
return {
vendorCode: _vendors,
buyer: _buyers,
facilityCode: _facilityCode,
facilityDesc: _facilityDesc,
statusText: _statusText,
poNumText: _poText
};
}