Custom popup editor for Kendo grid

2 posts, 0 answers
  1. Tim
    Tim avatar
    10 posts
    Member since:
    May 2014

    Posted 04 Dec 2014 Link to this post

    My custom editor template consists of a table with one row of two columns. Each of those columns have a table. The two tables have a one to one relationship. All CRUD operations are working fine, concerning Inserts, Updates, and Deletes. My only complaint is appearance. I can't get the kendo created and controlled Update and Cancel buttons to float all the way to the right after exhausting ever example I could find. 

    I've tried:
    .k-edit-buttons {
        float: right;
    }

    didn't work. It puts the buttons about half way there. The code in my form looks like the following:

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        <table id="crossarm_values" style="height: 500px; margin: 20px 20px 20px 40px; background-color: rgba(10, 10, 10, 0.11);" class="ui-grid-b ui-corner-all ui-shadow ui-dialog-titlebar">
            <tr id="crossarm_data">
                <td style="width: 375px; height: 475px; margin: 1px 1px 1px 1px;">
                    <fieldset id="master">
                        <legend style="font-family: 'Bookman Old Style'; color:orangered; font-weight: bold; font-size:16px; border: none;">Master Crossarm Data</legend>
                        <table style="font-size: 12px; color:black; width: 325px; height: 375px; margin-bottom: 85px; margin-left: 20px;">
                            @Html.HiddenFor(e => e.EquipmentId)
                            <tr style="margin-left: 1px; margin-right: 5px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 150px;">
                                    @Html.LabelFor(e => e.EquipmentName)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(e => e.EquipmentName)
                                </td>
                            </tr>
                            <tr style="margin-left: 1px; margin-right: 5px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 150px;">
                                    @Html.LabelFor(e => e.EquipmentDescription)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(e => e.EquipmentDescription)
                                </td>
                            </tr>
                            <tr style="margin-left: 1px; margin-right: 5px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 150px;">
                                    @Html.LabelFor(c => c.Category)
                                </td>
                                <td style="width: 130px;">
                                    @Html.DropDownListFor(c => c.Category, Model.CategoryTypes)
                                </td>
                            </tr>
                            <tr style="margin-left: 1px;margin-right: 5px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 150px;">
                                    @Html.LabelFor(e => e.EquipmentType)
                                </td>
                                <td style="width: 130px;">
                                    @Html.DropDownListFor(t => t.EquipmentType, Model.CrossarmTypes, "-- Select A Type --")
                                </td>
                            </tr>
                            <tr style="margin-left: 1px;margin-right: 5px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 150px;">
                                    @Html.LabelFor(e => e.Length)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(e => e.Length)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 150px;">
                                    @Html.LabelFor(e => e.Height)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(e => e.Height)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 150px;">
                                    @Html.LabelFor(e => e.Width)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(e => e.Width)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 150px;">
                                    @Html.LabelFor(e => e.CanEditLength)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(e => e.CanEditLength)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 150px;">
                                    @Html.LabelFor(e => e.CanEditHeight)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(e => e.CanEditHeight)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 150px;">
                                    @Html.LabelFor(e => e.CanEditWidth)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(e => e.CanEditWidth)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px; margin-right: 5px; width: 150px;">
                                    @Html.LabelFor(e => e.IsObsolete)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(e => e.IsObsolete)
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
                <td style="width: 50px; padding: 15px 15px 15px 15px;"></td>
                <td style="width: 325px; height: 475px; margin: 1px 1px 1px 1px; float: right;">
                    <fieldset id="detail">
                        <legend style="font-family: 'Bookman Old Style'; color:orangered; font-weight: bold; font-size:16px;">Detail Crossarm Data</legend>
                        <table style="font-size: 12px; color:black; width: 300px; height: 465px; margin-left: 10px;">
                            @Html.HiddenFor(c => c.CrossarmId)
                            <tr style="margin-left: 1px; margin-right: 5px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.AttachOffset)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(c => c.AttachOffset)
                                </td>
                            </tr>
                            <tr style="margin-left: 1px;margin-right: 5px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.AttachSlope)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(c => c.AttachSlope)
                                </td>
                            </tr>
                            <tr style="margin-left: 1px;margin-right: 5px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.CanAttachOffset)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(c => c.CanAttachOffset)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.CanAttachSlope)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(c => c.CanAttachSlope)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.Number, null, new { pattern = @"\d{0, 12}" })
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(c => c.Number)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.Weight)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(c => c.Weight)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.Slope)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(c => c.Slope)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.VerticalOffset)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(c => c.VerticalOffset)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.HasBrace)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(c => c.HasBrace)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.HorizontalBraceSpace)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(c => c.HorizontalBraceSpace)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.VerticalBraceSpace)
                                </td>
                                <td style="width: 130px;">
                                    @Html.EditorFor(c => c.VerticalBraceSpace)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(s => s.Species)
                                </td>
                                <td style="width: 130px;">
                                    @Html.DropDownListFor(s => s.Species, Model.SpeciesTypes)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.Quantity)
                                </td>
                                <td style="width: 40px;">
                                    @Html.EditorFor(c => c.Quantity)
                                </td>
                            </tr>
                            <tr style="width: 275px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @Html.LabelFor(c => c.CrossarmSortOrder)
                                </td>
                                <td style="width: 40px;">
                                    @Html.EditorFor(c => c.CrossarmSortOrder)
                                </td>
                            </tr>
                            <tr style="margin-left: 1px; margin-right: 5px;">
                                <td style="margin-left: 1px;margin-right: 5px; width: 175px;">
                                    @*@Html.LabelFor(c => c.EquipmentName)*@
                                </td>
                                <td style="width: 130px;">
                                    @*@Html.EditorFor(e => e.EquipmentName, new { disabled = "disabled", @readonly = "readonly" })*@
                                    @*@Html.DisplayFor(e => e.EquipmentName)*@
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
            </tr>
            <tr id="crossarm_list" style="display: none">
                @foreach (var item in @ViewBag.Crossarms)
                {
                    <td>@item</td>
                }
            </tr>
        </table>

    }










  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 08 Dec 2014 Link to this post

    Hi Tim,

    This could be achieved by overriding the CSS properties of the built-in button classes. For example: 
    <style>
      .k-grid-update, .k-grid-cancel{
          float: left;
      }
    </style>


    Regards,
    Alexander Popov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top