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

Allow ButtonGroupFor and Data Binding

2 Answers 58 Views
ButtonGroup
This is a migrated thread and some comments may be shown as answers.
Shafi
Top achievements
Rank 1
Shafi asked on 18 May 2018, 10:18 PM

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

 

2 Answers, 1 is accepted

Sort by
0
Joana
Telerik team
answered on 22 May 2018, 07:30 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Joana
Telerik team
answered on 07 Jun 2018, 09:52 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ButtonGroup
Asked by
Shafi
Top achievements
Rank 1
Answers by
Joana
Telerik team
Share this question
or