How is a cell/column width set when using grideditmode.inline?

[Marianne]

<p>For a .netcore 3.1 web application I have a grid using grideditmode.inline and the columns are loaded using columns.LoadSettings(Model.columns)</p><p>The width of the editable columns is set in the Model.columns but no matter how I change the size, it always displays the same width.&nbsp; The width is too small in either state (editable or view) that you cannot see a full number if it is longer than 4 characters.</p><p>The columns that are set to not editable seem to follow the column width setting as passed in the columns.LoadSettings(Model.columns).&nbsp; I set the first editable field to a ridiculously large number and it made no difference.</p><p>What am I missing?</p><p>&nbsp;</p><p>&nbsp;</p>

This is a snippet of the columns - only showing a section for brevity since it is over 40 columns total (only half are visible.)

     IList<GridColumnSettings> columns = new List<GridColumnSettings>
        {
            new GridColumnSettings
            {
                Member = "rowId",
                //Member = "rowId",
                Title = "Row Id",
                Visible = false
                //Locked = true
            },
            new GridColumnSettings
            {
                Member = "fgid",
                Visible = false
            },
            new GridColumnSettings
            {
                Member = "PartNumber",
                //Member = "PartNumber",
                Title = "Part",
                Width = "150px",
                Filterable = true,
                //Visible = true,
                Locked = true
            },
            new GridColumnSettings
            {
                Member = "currentMon1",
                Title = titles[0],
                Visible = true,
                Width = "500px",
                Filterable = false,
                Locked = false
            },
             new GridColumnSettings
            {
                Member = "currentMon1Id",
                Title = "Mon1Id",
                Visible = false
            },

 

 

 

this is the grid:

  @(Html.Kendo().Grid<PartRowView>().Name("grid1")
        .Sortable()
        .Editable(x => x.Mode(GridEditMode.InLine))
        .Scrollable()
        .Filterable()
        .Resizable(r => r.Columns(true))
        .ToolBar(tools => tools.Excel().IconClass("k-icon k-i-download"))
        .Excel(excel => excel
             .FileName(Model.filename)
             .Filterable(true)
            .AllPages(true)
            .ProxyURL("/forecast/TestPage?handler=Save")
          )
        .Columns(columns => columns.LoadSettings(Model.columns)
        )
    .DataSource(ds => ds.Ajax()
    .Events(events => events.Error("errors_handler"))
    .ServerOperation(false)
    .Read(r => r.Url(Url.Action() +"?handler=Read").Data("forgeryToken"))
    .Update(u => u.Url(Url.Action() +"?handler=Update").Data("forgeryToken"))
    .Model(model =>
    {
        model.Id(p => p.rowId);
        model.Field(p => p.PartNumber).Editable(false);
        model.Field(p => p.currentMon1Id).Editable(false);
        model.Field(p => p.currentMon2Id).Editable(false);
        model.Field(p => p.currentMon3Id).Editable(false);
        model.Field(p => p.currentMon4Id).Editable(false);
        model.Field(p => p.currentMon5Id).Editable(false);
        model.Field(p => p.currentMon6Id).Editable(false);
        model.Field(p => p.currentMon7Id).Editable(false);
        model.Field(p => p.currentMon8Id).Editable(false);
        model.Field(p => p.currentMon9Id).Editable(false);
        model.Field(p => p.currentMon10Id).Editable(false);
        model.Field(p => p.currentMon11Id).Editable(false);
        model.Field(p => p.currentMon12Id).Editable(false);
        model.Field(p => p.currentMon13Id).Editable(false);
        model.Field(p => p.currentMon14Id).Editable(false);
        model.Field(p => p.currentMon15Id).Editable(false);
        model.Field(p => p.currentMon16Id).Editable(false);
        model.Field(p => p.currentMon17Id).Editable(false);
        model.Field(p => p.currentMon18Id).Editable(false);
    })
        .PageSize(100)
    )
    .Pageable()
)

[Aleksandar]

Hello Marianne,

I see you have posted the same question in a support ticket, so I will paste the answer provided, in case it is helpful for the community.

From the details provided I see that the column fields are of type String. From the screenshots provided I see that it is the default ASP.NET Editor that is being used, but not the Telerik TextBox. In general, you can configure the editor for the properties of type String by customizing the default editor, located in the ~/Views/Shared/EditorTemplates/ folder and selecting the String.cshtml

That said, I tested the reported behavior and I see that the makeForwardColumnSettings method generates columns with a width of 90px. If the number is large, in non-edit mode an ellipsis will added in case the number will not fit the column. You can, for example, control this by updating the styling of the td elements of the Grid:

<style>
    #grid1 > div.k-grid-content.k-auto-scrollable > table > tbody > tr > td {
        text-overflow: clip;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

 

Applying the above styling does not truncate the numbers, but note that in case a number is too large it will indeed be clipped:

I have set the width of the first column to 150px to demonstrate that in a wider column the complete number is displayed.

In edit mode, when the Telerik UI TextBox is used paddings are applied depending on the theme used. You will need a wide enough column in order to render the Textbox and it's content:

I can suggest reviewing the Column Width section of the documentation and the general section on Width for the Grid. I can suggest setting wider columns and a fixed Grid width, so that a horizontal scrollbar appears, if of course this fits your scenario.

I hope this helps.

Regards,
Aleksandar
Progress Telerik