This is a migrated thread and some comments may be shown as answers.

Cascading ComboBox with CheckBox

3 Answers 90 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
ziental
Top achievements
Rank 1
ziental asked on 03 Oct 2018, 12:03 PM

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.

 

3 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 03 Oct 2018, 12:32 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
ziental
Top achievements
Rank 1
answered on 04 Oct 2018, 04:23 PM

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>  

 

0
Eyup
Telerik team
answered on 06 Oct 2018, 02:06 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ComboBox
Asked by
ziental
Top achievements
Rank 1
Answers by
Eyup
Telerik team
ziental
Top achievements
Rank 1
Share this question
or