Make Multiselects required for loading grid

[SK]

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
    };
}

 

[Mihaela]

Hi,

I would suggest handling the "click" event of the "Search" button and displaying an error message if any of the MultiSelect controls is not selected. 

For example:

<span id="errorMsg" style="color: red;"></span>

<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")
      ...
      )
</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")
      ...
     )
</div>

<button id="btnSearch">Search</button>

<script>
    $(document).ready(function () {
        $("#btnSearch").on("click", function () {
            $("#errorMsg").html(""); //reset the error message
            var multiselect1 = $("#vendorslist").data("kendoMultiSelect");
            var multiselect2 = $("#buyerslist").data("kendoMultiSelect");
            var vendorItems = multiselect1.value();
            var buyerItems = multiselect2.value();
            if (!(vendorItems.length > 0 && buyerItems.length > 0)) { //check the values of both MultiSelect controls
                $("#errorMsg").html("Please select a vender and a buyer."); //populate the error message
            }
        });
</script>

Please give this example a try and let me know if it works for you.

 

Regards, Mihaela Progress Telerik