[Solved] Row Cell Width changes when edit

[Frank Michael]

See the attached Screen Shot.
According to the training video I have set the column width already.

Html.Telerik().Grid<WorkitemGridRow>()
        //.BindTo(Model.gridRows)
        .Name("WorkitemGrid")
        .Localizable("de-DE") //ToDo Culture allgemein ersetzen
        .ToolBar(tb =>
        {
            tb.Insert();
        })
        .DataBinding(b => b.Ajax()
            .Select<WorkitemController>(sc => sc.AjaxGridSelect(Model.fatherKey??String.Empty))
            .Delete<WorkitemController>(sc => sc.AjaxGridDelete(String.Empty)) // Parameter is added by Grid engine
            .Insert<WorkitemController>(sc => sc.AjaxGridInsert(Model.fatherKey ?? String.Empty))
            .Update<WorkitemController>(sc => sc.AjaxGridUpdate(String.Empty)) // Parameter is added by Grid engine
        )
        .DataKeys(k => k.Add(r => r.RowKey))
        .Columns(c =>
        {
            c.Command(s =>
            {
                s.Select();
                s.Edit();
                s.Delete();
            }).Width(200);
            c.Bound(r => r.Title).Width(150);
            if (Model.viewSprints) c.Bound(s => s.SprintTitle)
                .ReadOnly(false).HtmlAttributes(new { name = "SprintTitle" }).Width(150);
            c.Bound(r => r.RemainingDays).Format("{0}").Width(15).Title("Days").Width(15);
            c.Bound(r => r.RemainingHours).Format("{0}").Width(15).Title("Hours").Width(15);
            c.Bound(r => r.FreeRemainingDays).Format("{0}").ReadOnly(true).Width(15).Title("Free\nDays");
            c.Bound(r => r.FreeRemainingHours).Format("{0}").ReadOnly(true).Width(15).Title("Free\nHours");
            c.Bound(r => r.chartlet)
                .ClientTemplate("<img src='<#= chartlet #>' alt=''>")
                .Title("Chart").ReadOnly(true);
            c.Bound(r => r.Urgent).ReadOnly(false).Width(15)
                .ClientTemplate("<input type='checkbox' disabled='disabled' name='Urgent' <#= Urgent? checked='checked' : '' #> />");
            c.Bound(r => r.Important).ReadOnly(false).Width(15)
                .ClientTemplate("<input type='checkbox' disabled='disabled' name='Important' <#= Important? checked='checked' : '' #> />");
            c.Bound(r => r.Status).ReadOnly(false).Width(30);
        })
        .Sortable()
        .Pageable()
        .Groupable()
        .Filterable()
        .Render();

However this did not help.
Probably I do have to make sure, that the content is smaller?

[Frank Michael]

Even if I define a width for the dropdown listbox it is too long.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<%= Html.DropDownList(null,
    new SelectList((IEnumerable<Sprint>)ViewData["sprints"], "RowKey", "Title", Model),
    new {Width = "145px" })%>

Rendered Html

<td name="SprintTitle"><select name="SprintTitle" id="SprintTitle" width="145px"><option value="04db01e7-478c-4c1c-b484-e2eabaed62ca">Beginn der Selbst&amp;#228;ndigkeit</option>
</select><span id="SprintTitle_validationMessage" class="field-validation-valid"></span></td>

[Frank Michael]

Can you quickly tell my if my requirement is out of scope or in scope of Telerik Grid?
Is it an error on my behalf? Should I invest time to debug? Or are you working on a solution?

[Frank Michael]

I think the problem is twofold.

1. The grid colum width is not determined, even if a fixed width is defined in the grid. Yes, the width attribute renders to the column of the table, but the table Row becomes wider, if the table Column text is wider.
2. In the edit row, it is the same problem, only that the cell becomes wider, if one input field for example is wider. Then it squeezes the other cells. This is especially a problem, if there is a dropdown, that becomes very wide if the content text is wide.

I essence this means cutting down all the texts to that they are smaller than the defined col width. Which is a challenge.
Any other ideas?

[Frank Michael]

Ok - at the end it is pure css styling.
After analyzing the rendered html I solved it with

.t-grid tbody tr td input,select
{
    width: 95%;
    min-width : 10%
}