How to remove class "k-button" and add classes from bootstrap like "btn btn-danger" ?

11 posts, 1 answers
  1. Ahmed Amin
    Ahmed Amin avatar
    34 posts
    Member since:
    Apr 2015

    Posted 15 Apr 2015 Link to this post

    Hi

     i have add Kendo grid in my view that fetch data from text inputs throw JS Code and it works good, i have add Edit and Destroy Command buttons but i don't need default class from the and i try to set classes as:

    columns.Command(command =>
    {
        command.Edit().HtmlAttributes(new { @class = "btn btn-success" });
        command.Destroy().HtmlAttributes(new { @class = "btn btn-danger" });
    });

    but after grid has data i found two buttons has default class and when i use inspect element i see that:

    <a class="k-button k-button-icontext k-grid-edit btn btn-success" href="#"><span class="k-icon k-edit"></span>Edit</a>
     
    <a class="k-button k-button-icontext k-grid-delete btn btn-danger" href="#"><span class="k-icon k-delete"></span>Delete</a>

    and i see that class of bootstrap works as it should be in i remove class "k-button"

     so please how can i do that and let bootstrap calsses works as i need ??

    Full Grid Code:

    @model MhafezClinic.Models.DBContext.PTData
     
    @{
        ViewBag.Title = "FindData";
    }
     
    <h2 class="text-danger text-center">الإستعلام عن المرضى فى جميع العيادات</h2>
     
    <fieldset>
        <legend class="panel-heading panel text-primary" dir="rtl">
            <span class="glyphicon glyphicon-search"></span>
            <span>إبحث عن طريق الإسم أو رقم الملف الطبى أو رقم الهاتف ...</span>
        </legend>
        <div class="panel panel-default k-pr">
            <div class="panel-heading">
                <table class="table table-bordered" dir="rtl">
                    <tbody>
                        <tr>
                            <td style="width: 120px; text-align: center; font-size: medium; font-weight: bold; vertical-align:middle">
                                إسم المريض:
                            </td>
                            <td>
                                <input type="text" data-val="false" id="PT_Name" class="form-control" style="margin:auto; min-width:250px;" />
                            </td>
                            <td style="width: 120px; text-align: center; font-size: medium; font-weight: bold; vertical-align:middle">
                                رقم الملف الطبى:
                            </td>
                            <td>
                                <input type="text" data-val="false" id="PT_Clinic_ID" class="form-control" style="width: 150px; margin:auto; text-align:center;" />
                            </td>
                            <td style="width: 120px; text-align: center; font-size: medium; font-weight: bold; vertical-align:middle">
                                تليفون المريض:
                            </td>
                            <td>
                                <input type="text" data-val="false" id="PT_Phone" class="form-control" style="width: 150px; margin:auto; text-align:center;" />
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:center;" colspan="6">
                                <input id="showGrid" style="font-size: medium; font-weight: bold" type="submit" value="إستعلام" class="btn btn-primary" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br />
                <div class="k-rtl">
                    @(Html.Kendo().Grid<MhafezClinic.Models.DBContext.PTData>()
                        .Name("SHPTData")
                        .HtmlAttributes(new { style = "font-weight:bold; vertical-align:middle; font-size:medium;" })
                        .AutoBind(false)
                        .Columns(columns =>
            {
                columns.Bound(e => e.ClinicCode)
                    .ClientTemplate("#=ClinicCode.Clinic_Code_Name#").Title("كود العيادة")
                    .Sortable(false).HtmlAttributes(new { @style = "text-align:center;" })
                    .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(75)
                    .Filterable(false);
                columns.Bound(e => e.PT_Clinic_ID)
                    .HtmlAttributes(new { @style = "text-align:center;" })
                    .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(165)
                    .Title("رقم الملف الطبى");
                columns.Bound(e => e.PT_Name)
                    .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
                    .Title("إسم المريض").Width(145);
                columns.Bound(e => e.PT_Address)
                    .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Filterable(false)
                    .Sortable(false).Title("العنوان").Width(192);
                columns.Bound(e => e.PT_Phone)
                    .HtmlAttributes(new { @style = "text-align:center;" })
                    .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(109)
                    .Filterable(false).Sortable(false).Title("رقم التليفون");
                columns.Bound(e => e.PT_Age)
                    .HtmlAttributes(new { @style = "text-align:center;" })
                    .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(50)
                    .Filterable(false).Sortable(false).Title("السن");
                columns.Bound(e => e.PT_First_Visit_Date)
                    .HtmlAttributes(new { @style = "text-align:center;" })
                    .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(105)
                    .Filterable(false).Sortable(false).Title("تاريخ أول زيارة");
     
                columns.Command(command =>
                {
                    command.Edit().HtmlAttributes(new { @class = "btn btn-success" });
                    command.Destroy().HtmlAttributes(new { @class = "btn btn-danger" });
                });
            })
     
            .Pageable()
            .Sortable()
                    .Filterable(filterable => filterable
                              .Operators(operators => operators
                                                .ForString(str => str.Clear()
                                                .StartsWith("يبدء بـ")
                                                .IsEqualTo("يساوى").IsNotEqualTo("لا يساوى")
                                              ))
     
                               .Operators(operators => operators
                                                 .ForNumber(str => str.Clear()
                                                 .IsEqualTo("يساوى").IsNotEqualTo("لا يساوى")
                                                 .IsGreaterThanOrEqualTo("أكبر من أو يساوى")
                                                 .IsGreaterThan("أكبر من").IsLessThanOrEqualTo("أقل من أو يساوى")
                                                 .IsLessThan("أقل من")
                                                ))
     
                                                .Messages(m =>
                                                    m.And("و").Or("أو")
                                                    .Filter("بحث").Clear("إلغاء")
                                                    .Info("حدد فلتر البحث الذى تريده"))
                )
     
                .Editable(editable => editable.Mode(GridEditMode.PopUp))
     
                .DataSource(source => source.Ajax()
                        .Model(model =>
                            {
                                model.Id(e => e.PT_ID);
                                model.Field(e => e.PT_ID).Editable(false);
                            })
                      .Events(events => events.Error("error_handler"))
                      .Read(read => read.Action("GetDataAll", "PTDatas").Data("getAdditionalData"))
                              .Update(update => update.Action("Update_Order", "Orders"))
                                      .Destroy(des => des.Action("Update_Order", "Orders"))
     
                    ))
                </div>
            </div>
        </div>
    </fieldset>
     
    @section scripts{
        <script type="text/javascript">
            function error_handler(e) {
                if (e.errors) {
                    var message = "Errors:\n";
                    $.each(e.errors, function (key, value) {
                        if ('errors' in value) {
                            $.each(value.errors, function () {
                                message += this + "\n";
                            });
                        }
                    });
                    alert(message);
                }
            }
        </script>
     
        <script>
            function getAdditionalData() {
                return {
                    PT_Name: $('#PT_Name').val(),
                    PT_Clinic_ID: $('#PT_Clinic_ID').val(),
                    PT_Phone: $('#PT_Phone').val(),
                };
            }
     
            $(document).ready(function () {
                $('#showGrid').click(function () {
     
                    if ((!$('#PT_Name').val()) && (!$('#PT_Clinic_ID').val()) && (!$('#PT_Phone').val())) {
                        $("#SHPTData").data("kendoGrid").dataSource.data([]);
                        alert("من فضلك ادخل القيمة المراد البحث عنها");
                        return;
                    }
     
                    else if (($('#PT_Name').val() && $('#PT_Clinic_ID').val()) || ($('#PT_Name').val() && $('#PT_Phone').val()) || ($('#PT_Clinic_ID').val() && $('#PT_Name').val())) {
     
                        $("#SHPTData").data("kendoGrid").dataSource.data([]);
                        alert("لا يمكن البحث بأكثر من شرط فى نفس الوقت");
                        return;
                    }
                    else {
                        $('#SHPTData').data('kendoGrid').dataSource.fetch();
                    }
                });
            });
        </script>
    }

    and please are there is any way to display message in grid when there is No Data ?

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 17 Apr 2015 Link to this post

    Hello Ahmed,

    For example you can find those buttons using jQuery selector and remove the "k-button" class. 

    Please refer to this forum discussion regarding your second questions. 

    Regards,
    Boyan Dimitrov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Ahmed Amin
    Ahmed Amin avatar
    34 posts
    Member since:
    Apr 2015

    Posted 17 Apr 2015 in reply to Boyan Dimitrov Link to this post

    Thanks a lot Boyan Dimitrov

     

    can you please give me small example for jQuery selector depending on my grid code to let me know how can i do it ?

    about second questions i see the link  but as you see i add the grid from html helper not add it as JS - so please you can help me with that ?

    Thanks a lot ...

  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 21 Apr 2015 Link to this post

    Hello Ahmed,

    Straight to your questions: 

       1. You can remove the k-button class only from edit and delete buttons as shown:

    $(".btn-success").removeClass( "k-button" );
    $(".btn-danger").removeClass( "k-button" );

        2. Please refer to this example with Kendo Grid UI. 

    Regards,
    Boyan Dimitrov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. Ahmed Amin
    Ahmed Amin avatar
    34 posts
    Member since:
    Apr 2015

    Posted 21 Apr 2015 in reply to Boyan Dimitrov Link to this post

    Thanks a lot ,

    but i don't know where to add this code ? i try to add it as:

    $(document).ready(function () {
        $('#showGrid').click(function () {
     
            if ((!$('#Clinic_Code_ID').val()) && (!$('#Doctor_ID').val()) && (!$('#Visit_Date').val())) {
                $("#SHPTData").data("kendoGrid").dataSource.data([]);
                alert("من فضلك ادخل القيمة المراد البحث عنها");
                return;
            }
            else {
                $('#SHPTData').data('kendoGrid').dataSource.fetch();
                $(".btn-success").removeClass("k-button");
            }
        });
     

    but it's not working ? hope to find help with that please ?

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 23 Apr 2015 Link to this post

    Hello Ahmed,

    Please add this code after the grid is initialized. 

    Regards,
    Boyan Dimitrov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  8. Ahmed Amin
    Ahmed Amin avatar
    34 posts
    Member since:
    Apr 2015

    Posted 23 Apr 2015 in reply to Boyan Dimitrov Link to this post

    Boyan Dimitrov said:

    Hello Ahmed,

    Please add this code after the grid is initialized. 

    Regards,
    Boyan Dimitrov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     

     

    Thanks for trying help - sorry for that i don't understand where is the correct place for code

    Code you please give me sample for code complete depending on my code ?

  9. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 24 Apr 2015 Link to this post

    Hello Ahmed,

    I would like to apologize for the misunderstanding in our communication. It is my fault.  

    The code snippet for removing the "k-button" class should be executed in the grid dataBound event handler. At this moment the grid is bound and the jQuery selector will return the correct result, otherwise the result will be empty.

    Please refer to this code snippet:

     

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("grid")
        .AutoBind(false)
        .Columns(columns =>
        {
           //removed for brevity
        })
        .Events(e => e.DataBound("dataBoundHandler"))

    function dataBoundHandler() {
            $(".btn-success").removeClass("k-button");
            $(".btn-danger").removeClass("k-button");
        }


    Regards,
    Boyan Dimitrov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  10. Ahmed Amin
    Ahmed Amin avatar
    34 posts
    Member since:
    Apr 2015

    Posted 25 Apr 2015 in reply to Boyan Dimitrov Link to this post

    Thanks you so much ....
  11. Yuriy
    Yuriy avatar
    4 posts
    Member since:
    Jul 2015

    Posted 23 Mar Link to this post

    Hi,

    Just to finalize this exercise: when grid goes to edit mode, it sticks "Update" and "Cancel" buttons with same k-button class, and when you click either, it "goes back" to initial buttons "Edit" and "Delete" with k-button class again. Any suggestions how to remove 'k-button' in those (Edit/Cancel) cases? Or, in other words, is there a way to make grid buttons "bootstrap friendly/ready" without jumping hoops using jquery to remove 'k-button' class on every grid event?

    Thanks,

    -Yuriy

  12. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 25 Mar Link to this post

    Hello Yuriy,

    There is no Grid configuration property for achieving the task out of the box. The first approach would be to handle all the required events and manually remove the class i.e. dataBound, edit, cancel. Another possibility would be to use custom buttons added via template and trigger the editing via the Grid API - editRow, removeRow. The downside of this approach is that you should manually replace the buttons with the update/cancel ones in the edit event handler.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready