Cascading ComboBox with CheckBox

[ziental]

Hi,

I need to filter a combobox based on the value of a check box.
I explain.

I have a checkbox that will start unchecked (value 0).
And below is a combobox that will use an api to fetch the data.
If the user selects this checkbox, the data from the combobox must be updated.

Very similar to this example: https://demos.telerik.com/aspnet-core/combobox/cascadingcombobox
But using the checkbox.

Can someone help me?
I am using ASP.NET MVC Core.

 

[Eyup]

Hello,

In the mentioned demo you will notice that there is a built-in integration between combos to achieve parent and child-like relationship:

.CascadeFrom("categories")

Here is a whole bucket of information on this implementation:
https://docs.telerik.com/kendo-ui/controls/editors/combobox/cascading

Now, in your case there is a checkbox instead of master combo:
https://demos.telerik.com/aspnet-core/styling/checkboxes

And naturally, it does not support this property, but worry not - for I bring forward the light of the solution:

1. Define the CheckBox and the Combo
2. Attach onclick or onchange event to the checkbox:

@(Html.Kendo().CheckBox()
.Name("Hellos")
.HtmlAttributes(new { onclick = "checkBoxClick(this);" }))

3. And in JavaScript rebind the combo using the new value:

function checkBoxClick(checkBox) {
    // rebind combo depending on checkBox.checked
    alert(checkBox.checked);
}

I hope this will prove helpful. Give it a try and let me know if it works for you.

Regards,
Eyup
Progress Telerik

[ziental]

Sorry for my ignorance.

I am using ASP.NET MVC and how do I bind again?

I will load the data from the combobox when the page starts, but when the checkbox is clicked the data should be loaded again.

Can you help me with this?

<div class="row p-1">
    <div class="col-4"><h6>Only Export</h6></div>
    <div class="col-8">
        @(Html.Kendo().CheckBoxFor(m => m.OnlyExport).HtmlAttributes(new { onclick = "checkBoxClick(this);" }))
    </div>
</div>
<div class="row p-1">
    <div class="col-4"><h6>Protocol</h6></div>
    <div class="col-8">
        @(Html.Kendo().DropDownListFor(m => m.Protocol)
            .DataValueField("ProtocolID")
            .DataTextField("ProtocolName")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetProtocols", "PostTestList").Data("filterProtocols");
                });
            })
            .HtmlAttributes(new { style = "width: 100%" })
        )
    </div>
</div>
<script>
    function checkBoxClick(checkBox) {
        // BIND COMBOBOX
    }
    function GetOnlyExport() {
        var OnlyExportValue = 0;
        if (this.checked) { value = 1; }
        return OnlyExportValue;
    }
    function filterProtocols() {
        return {
            OnlyExport: GetOnlyExport()
        };
    }
</script>

 

[Eyup]

Hello,

Accept my apologies for not including this specific logic in the provided code snippets.
Here is how you can do that:

function checkBoxClick(checkBox) {
    // rebind combo depending on checkBox.checked
    var dropDownList = $("#DropDownListName").data().kendoDropDownList;
    dropDownList.dataSource.read();
}
function filterProtocols() {
    return {
        OnlyExport: $("#CheckBoxName")[0].checked ? 1 : 0
    };
}

That should do the trick.

Regards,
Eyup
Progress Telerik