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

4 Answers 1247 Views
Grid
Ahmed
Top achievements
Rank 2
Ahmed asked on 15 Apr 2015, 09:39 PM

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 ?

4 Answers, 1 is accepted

Sort by
0
Accepted
Boyan Dimitrov
Telerik team
answered on 24 Apr 2015, 07:15 AM

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.

 
Ahmed
Top achievements
Rank 2
commented on 25 Apr 2015, 07:28 AM

Thanks you so much ....
Yuriy
Top achievements
Rank 1
commented on 23 Mar 2016, 05:22 PM

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

0
Boyan Dimitrov
Telerik team
answered on 17 Apr 2015, 03:01 PM

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.

 
Ahmed
Top achievements
Rank 2
commented on 17 Apr 2015, 10:25 PM

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

0
Boyan Dimitrov
Telerik team
answered on 21 Apr 2015, 12:07 PM

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.

 
Ahmed
Top achievements
Rank 2
commented on 21 Apr 2015, 01:14 PM

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
Telerik team
commented on 23 Apr 2015, 10:52 AM

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.

 
Ahmed
Top achievements
Rank 2
commented on 23 Apr 2015, 12:13 PM

[quote]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.

 

[/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 ?

0
Dimiter Madjarov
Telerik team
answered on 25 Mar 2016, 11:50 AM

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
Tags
Grid
Asked by
Ahmed
Top achievements
Rank 2
Answers by
Boyan Dimitrov
Telerik team
Dimiter Madjarov
Telerik team
Share this question
or