How to Center Custom Button in Grid cell ?

[Ahmed]

Hi

please i have create my grid and set bootstrap theme to it and add 3 custom button on it and every thing works fine but buttons not centered in each grid cell it's align to right (i have add rtl css) as you can see in attached image

 so please how can i set them center vertically and Horizontally in each grid cell ?

[Ahmed]

I forget to add HTML Code:

@model IEnumerable<MhafezClinic.Models.DBContext.PTData>
@using Microsoft.AspNet.Identity;
@using Microsoft.AspNet.Identity.EntityFramework;
@using MhafezClinic.Models.DBContext;
@using MhafezClinic.Models;


@{
    ViewBag.Title = "المرضى";
}

<br />

<style>
    .k-grid-EditData {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        color: #fff;
        background-color: #d9534f;
        border-color: #d43f3a;
    }

    .k-grid-AddKashf {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        color: #fff;
        background-color: #5cb85c;
        border-color: #4cae4c;
    }

    .k-grid-PTSheet {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        color: #fff;
        background-color: #337ab7;
        border-color: #2e6da4;
    }
</style>

@if (User.IsInRole("Manager") | User.IsInRole("DataEntry"))
{
    <p style="font-size: medium;" dir="rtl">
        @Html.ActionLink("إضافة مريض", "Create", null, new { @class = "btn btn-primary", @style = "font-size: medium; font-weight:bold" })
    </p>
}


<div class="k-rtl">
    @(Html.Kendo().Grid<MhafezClinic.Models.DBContext.PTData>()
    .Name("SHPTData")
    .HtmlAttributes(new { style = "font-weight:bold;" })

    .Columns(columns =>
        {
            columns.Bound(e => e.ClinicCode)
                .ClientTemplate("#=ClinicCode.Clinic_Code_Name#")
                .Title("كود العيادة")
                .Sortable(false)
                .HtmlAttributes(new { @style = "font-size:medium; font-weight:bold; text-align:center; vertical-align:middle" })
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(50)
                .Filterable(false);

            columns.Bound(e => e.PT_Clinic_ID)
                .HtmlAttributes(new { @style = "font-size:medium; font-weight:bold; text-align:center; vertical-align:middle" })
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(75)
                .Title("رقم الملف الطبى");

            columns.Bound(e => e.PT_Name)
                .HtmlAttributes(new { @style = "font-size:medium; font-weight:bold; vertical-align:middle" })
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
                .Title("إسم المريض");

            columns.Bound(e => e.PT_Address)
                .HtmlAttributes(new { @style = "font-size:medium; font-weight:bold; vertical-align:middle" })
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Filterable(false)
                .Sortable(false)
                .Title("العنوان");

            columns.Bound(e => e.PT_Phone)
                .HtmlAttributes(new { @style = "font-size:medium; font-weight:bold; text-align:center; vertical-align:middle" })
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(100)
                .Filterable(false).Sortable(false).Title("رقم التليفون");

            columns.Bound(e => e.PT_Age)
                .HtmlAttributes(new { @style = "font-size:medium; font-weight:bold; text-align:center; vertical-align:middle" })
                .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 = "font-size:medium; font-weight:bold; text-align:center; vertical-align:middle" })
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(105)
                .Filterable(false).Sortable(false).Title("تاريخ أول زيارة");

            if (User.IsInRole("DataEntry"))
            {
                columns.Command(command => command.Custom("EditData").Text("تعديل").Click("EditData"));
                columns.Command(command => command.Custom("AddKashf").Text("حجز كشف").Click("EditData"));
                columns.Command(command => command.Custom("PTSheet").Text("السجل الطبى").Click("EditData"));
            }
            else if (User.IsInRole("Manager"))
            {
                columns.Command(command => command.Custom("EditData").Text("تعديل").Click("EditData"));
                columns.Command(command => command.Custom("DeleteData").Text("حذف").Click("EditData"));
                columns.Command(command => command.Custom("AddKashf").Text("حجز كشف").Click("EditData"));
                columns.Command(command => command.Custom("PTSheet").Text("السجل الطبى").Click("EditData"));
            }

            else if (User.IsInRole("Doctors"))
            {
                columns.Command(command => command.Custom("AddKashf").Text("السجل الطبى").Click("EditData"));
            }


        })

    .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("Read_SHPTData", "PTDatas"))
    ))
</div>






@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 type="text/javascript">
        function EditData(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            window.location.href = "/PTDatas/Edit/" + dataItem.PT_ID;
        }
    </script>
}

 

 

[Vladimir Iliev]

Hi Ahmed,

You can add custom CSS style to the desired column using the "HtmlAttributes" builder which to center the content of the cells:

columns.Command(c =>
    {
        c.Edit();
        c.Destroy();
    })
    .HtmlAttributes(new { style="text-align: center;" });

Regards,
Vladimir Iliev
Telerik

 

 

[Ahmed]

Thanks a lot ...