How to Center Custom Button in Grid cell ?

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

    Posted 14 Apr 2015 Link to this post

    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 ?

  2.
  3. Ahmed
    Ahmed avatar
    34 posts
    Member since:
    Apr 2015

    Posted 14 Apr 2015 in reply to Ahmed Link to this post

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

     

  5. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2198 posts

    Posted 16 Apr 2015 Link to this post

    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
     

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

     
  7. Ahmed
    Ahmed avatar
    34 posts
    Member since:
    Apr 2015

    Posted 16 Apr 2015 in reply to Vladimir Iliev Link to this post

    Thanks a lot ...
  8.
Back to Top