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

[Ahmed]

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 ?

[Boyan Dimitrov]

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

 

 

[Ahmed]

Thanks you so much ....

[Yuriy]

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

[Boyan Dimitrov]

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

 

 

[Ahmed]

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

[Boyan Dimitrov]

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

 

 

[Ahmed]

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 ?

[Boyan Dimitrov]

Hello Ahmed,

Please add this code after the grid is initialized. 

Regards,
Boyan Dimitrov
Telerik

 

 

[Ahmed]

[quote]Boyan Dimitrov said:

Hello Ahmed,

Please add this code after the grid is initialized. 

Regards,
Boyan Dimitrov
Telerik

 

 

[/quote]

 

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 ?

[Dimiter Madjarov]

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