Custom popup editor for Kendo grid

[Tim]

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>

}

[Alexander Popov]

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