Allow ButtonGroupFor and Data Binding

[Shafi]

I find this particular component anti-MVC as it is not offering features compared to every other Kendo UI MVC components. I need to have it bind to a model's property and generate button(s) from a data source. Each generated button can be customized like a Grid's columns are customized using the HtmlHelper. This is how I use it right now:

<div class="row">
    <div class="col-sm-12">
        <div class="form-group">
            @Html.LabelFor(m => m.PaymentModeId, new { @class = "control-label" })
            @(Html.Kendo().ButtonGroup()
                .Name("PaymentModeTest")
                .HtmlAttributes(new { @class = "form-control" })
                .Selection("single")
                .Index(0)
                .Items(t =>
                {
                    t.Add().Text("Cash");
                    t.Add().Text("Cheque");
                    t.Add().Text("Debit");
                    t.Add().Text("Free");
                    t.Add().Text("Credit Card");
                    t.Add().Text("eDirham");
                })
                .Events(ev => ev.Select("UpdateUiPaymentMode"))
            )
        </div>
    </div>
</div>

 

Here is the binding trick:

<input type="hidden" name="PaymentModeId" id="PaymentModeId" value=1 />

 

And the JS:

@section Scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#divPaymentModeCheque').hide();
            $('#divPaymentModeDebit').hide();
            $('#divPaymentModeCreditCard').hide();
            $('#divPaymentModeEDirham').hide();
        });

        function UpdateUiPaymentMode(e) {
            // 0: Cash, 1
            // 1: Cheque, 2
            // 2: Debit, 3
            // 3: Free, 4
            // 4: Credit Card, 5
            // 5: e-Dirham, 9

            $('#divPaymentModeCheque').hide();
            $('#divPaymentModeDebit').hide();
            $('#divPaymentModeCreditCard').hide();
            $('#divPaymentModeEDirham').hide();

            switch (e.indices.toString()) {
                case "0":
                    // Cash
                    $('#PaymentModeId').val(1);
                    break;

                case "1":
                    // Cheque
                    $('#divPaymentModeCheque').show();
                    $('#PaymentModeId').val(2);
                    break;

                case "2":
                    // Debit
                    $('#divPaymentModeDebit').show();
                    $('#PaymentModeId').val(3);
                    break;

                case "3":
                    // Free
                    $('#PaymentModeId').val(4);
                    break;

                case "4":
                    // Credit Card
                    $('#divPaymentModeCreditCard').show();
                    $('#PaymentModeId').val(5);
                    break;

                case "5":
                    // eDirham
                    $('#divPaymentModeEDirham').show();
                    $('#PaymentModeId').val(9);
                    break;
            }
        }
    </script>
}

 

[Joana]

Hi Muhamed,

I logged the implementation of ButtonGroupFor in our github repo where you could track its progress:

https://github.com/telerik/kendo-ui-core/issues/4244

We will prioritize the enhancements for the ButtonGroup widget and implement them accordingly. Thank you once again for your feedback and feature request.

Regards,
Joana
Progress Telerik

[Joana]

Hello Muhamed,

We reviewed the feature request and we decided that the implementation of ButtonGroupFor moves away from the concept of the widget. ButtonGroup is designed to show a list of buttons and is not supposed to behave like, for example, CheckBoxList would. We have logged a task in our backlog to illustrate how to send the value of a selected item to the server. Basically, the approach would be to store the selected value in a hidden field on the page. I will update this thread once the article is ready. 

However, the github item will be modified to implement BindTo setting similar to the following one of the TreeView widget:

https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/TreeViewBuilder#methods-BindTo(System.Collections.Generic.IEnumerable%3CKendo.Mvc.UI.TreeViewItemModel%3E)

Regards,
Joana
Progress Telerik