How Do You Save Input from a CheckboxGroup?

[Timothy]

I'm a bit blown away that with all the demos that Telerik displays to feature these components, outside of DataGrid, you can't find an example on how to save user input.  I mean, we're not building static websites, guys. 

So, I've successfully fed data to a Dialog with a nested CheckboxGroup.  My checkboxes appear with labels supplied by the data.  If a user makes changes to the checkbox selections, I want to persist those changes when they click on the Dialog's "Save" button.  How do I persist the data back to the controller?  There's plenty of explanations for DataGrid, but, what about all the other components, like CheckboxGroup/Dialog.

Thanks in advance

[Anton Mironov]

Hi Timothy,

Thank you for the details provided.

Actually, we are free to use the API of the CheckBoxGropup. The Telerik UI Components are wrappers of the Kendo UI Widgets, so we can use the client-side API here:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/checkboxgroup

In order to achieve the desired behavior, I used the following approach:

1. Use the "Change" Event of the CheckBoxGroup.
2. In the Event handler, get the currently selected options and save them. I am using a global scope variable in the example below("selectedCheckboxValues"), but feel free to send them to an Action Method of the Controller via an Ajax request if needed.
3. When the dialog window opens, get the instance of the CheckBoxGroup and set the value saved in step 2.
4. Here is an example:
   

   // In the CheckBoxGroup:
   .Events(e => e.Change("onCheckboxChange")) 
   
   // The Event handlers and global scope variable:
       var selectedCheckboxValues = [];
       
       function showDialog() {
           var dialog = $("#dialog").data("kendoWindow");
           var checkboxGroup = $("#checkboxgroup").data("kendoCheckBoxGroup");
       
           checkboxGroup.value(selectedCheckboxValues);
       
           dialog.open();
       }
       
       function onCheckboxChange(e) {
           selectedCheckboxValues = this.value(); 
       }

Here is a REPL example that I prepared for the case. It implements the approach above:

• https://netcorerepl.telerik.com/mzEwlDbP02k575TU56

Feel free to test the REPL example on your side and let me know if this is the desired result.

Kind Regards,
Anton Mironov
Progress Telerik