Allow ButtonGroupFor and Data Binding

3 posts, 0 answers
  1. Shafi
    Shafi avatar
    51 posts
    Member since:
    Dec 2014

    Posted 18 May Link to this post

    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. Joana
    Admin
    Joana avatar
    166 posts

    Posted 22 May Link to this post

    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.
  3. Joana
    Admin
    Joana avatar
    166 posts

    Posted 07 Jun Link to this post

    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.
Back to Top