How to change the width of the edit textbox when GridEditMode.InLine

[Bob]

The grid looks correct in display mode but when I switch to edit mode the textbox is too narrow.

How can I set the width?

I included a screenshot, just in case I'm not clear.

[Vladimir Iliev]

Hi Bob,

 
Basically you can define custom editor template for this field with adding UIHint attribute over the model property. Then you should place the editor template under the Views -> Shared -> EditorTemplates folder in current project. Please check the example below:

• Model:

  public class Order
  {
      public int OrderID { get; set; }
      public DateTime OrderDate { get; set; }
  
      [UIHint("TextEditorTemplate")]
      public string OrderDescription { get; set; }
      public int EmployeeId { get; set; }
  }

• TextEditorTemplate.cshtml:

  @model string
  
  @(Html.TextBoxFor(m => m, new {@class = "k-input k-textbox" })
  )

Kind Regards,
Vladimir Iliev
the Telerik team

[Bob]

That will work but I really want to size the edit textbox dynamically. Why can't it simply be the width of the containing column (-20px)?

Using the template approach I'd actually have to have a template for each column and although it looks fine when the grid isn't expanding to use all of the available monitor real estate. (ss4.png), it doesn't fill the column when the browser is expaned to full monitor resolution (ss5.png)

Isn't there a better approach?

@model string

  

    @(Html.TextBoxFor(m => m,

        new { @class = "k-input k-textbox", style = "width:280px" })

)

[Vladimir Iliev]

Hi Bob,

 
Please note that by default the input size will be dynamically calculated by the containing column width - 20px. You should try to remove the width attribute and If the input is not re-sizing as expected most probably the other styles on the page are interfering with the current input styles. If this is the case you should provide run-able project where the issue is reproduced - hopefully this will help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
the Telerik team

[Murad Ajani]

Sorry for the earlier post.  I solved the issue.

[Patrick]

Murad Ajani, how did you solve this issue?

I am trying everything that I can..  I have changed the CSS, the templates for each object (Numeric, String. etc.) but it does not work.

It would be very nice and helpfull,

thanks in advance!

Antonio.

[Patrick]

I have already solved the problem.
Thanks anyway.

[Divya]

How did you resolve this issue?

I have the same issue and trying to solve it without creating an editor template

[Alex Hajigeorgieva]

Hi, Divya,

The Kendo UI Grid with inline editing stretches its editors to 100% (with small variation for different themes) when using the built in widgets - the Numerics, Date/Time Pickers/ textboxes, dropdowns etc.

For MVC, if you have an editor defined in ~\Views\Shared\EditorTemplates, it has this definition and automatically receive the k-textbox class and width as demonstrated in this online demo in the ProductName column:

https://demos.telerik.com/aspnet-mvc/grid/editing-inline

@model object

@Html.Kendo().TextBoxFor(model => model)

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Jennifer]

I found a fix for my this issue in my website. Note that I am using the bootstrap version of Kendo css.

I needed to have fixed widths on columns so I added the following css rules to my site.css.

Caveats:

• These custom css rules need to be loaded AFTER any other css files\rules (in particular the kendo css).
• Note that in my CSS I set the left margin to 0px on a bunch of Kendo cell "edit" classes.
  • This is because I noticed a rule in the kendo css which calculated the left margin that made the input box skew awkwardly left instead of stay nicely centered. Please disregard the second CSS rule if this is not the case for you.

My css rules:

.text-box, .single-line {
    width: 100%;
}

.k-edit-cell > .k-textbox, .k-edit-cell > .k-widget, .k-edit-cell > .text-box, .k-grid-edit-row > td > .k-textbox, .k-grid-edit-row > td > .k-widget, .k-grid-edit-row > td > .text-box {
    margin-left:0px;
}

 

// My grid/view code for reference:

@(Html.Kendo().Grid<DevTraining.Domain.Models.EventBE>()
    .Name("grdMain")

    .Excel(excel => excel.FileName("EventMaster_ExcelExport_" + DateTime.Now.ToString("d") + ".xlsx").AllPages(true))

    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Custom().Text("Import from Excel").HtmlAttributes(new { id = "btnImportExcel", Class= "k-button k-button-icontext btn-excel-upload", href="", onClick = "excelUpload_Click();" });
        toolbar.Excel();
        toolbar.Save().HtmlAttributes(new { Class = "k-primary k-button k-button-icontext", style = "float:right" });
    })

    .Columns(columns =>
    {
        columns.Bound(x => x.LineNumber).HtmlAttributes(new { @class = "text-center" }).HeaderHtmlAttributes(new { @class = "text-center" }).Hidden(true).Width(0);

        columns.Bound(x => x.StockNumber).HtmlAttributes(new { @class = "text-center" }).HeaderHtmlAttributes(new { @class = "text-center" }).Locked(true).Lockable(false).Width(120);

        columns.Bound(x => x.EventID).HtmlAttributes(new { @class = "text-center" }).HeaderHtmlAttributes(new { @class = "text-center" }).Width(120);

       // excluding some columns for brevity sake...

        columns.Bound(x => x.DetailItemDescription).HtmlAttributes(new { @class = "text-left" }).HeaderHtmlAttributes(new { @class = "text-center" }).Width(510);
        columns.Bound(x => x.ImageURL).HtmlAttributes(new { @class = "text-center" }).HeaderHtmlAttributes(new { @class = "text-center" }).Width(575);
        columns.Bound(x => x.LastUpdateTimestamp).HtmlAttributes(new { @class = "text-center" }).HeaderHtmlAttributes(new { @class = "text-center" }).Format("{0:MM/dd/yyyy hh:mm:ss tt}").Width(160);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(25)
        .ServerOperation(false)
        .Events(events => events.Error("onErrorAjax"))
        .Read(read => read.Action("GetEvents", "Events").Data("getDataForGrid"))
        .Create(update => update.Action("CreateAction", "Events"))
        .Destroy(update => update.Action("DeleteAction", "Events").Data("getDataForGrid"))
        .Update(update => update.Action("UpdateAction", "Events").Data("getDataForGrid"))

        .Model(model =>
        {
            model.Field(x => x.Tier2OrderMultipleNumber).Editable(false);
            model.Field(x => x.Tier2PromoEachCostAmount).Editable(true);
            model.Id(x => x.StockNumber);
        })

)
.Editable(editable => editable.Mode(GridEditMode.InCell))
.AutoBind(true)
.Pageable(pageable => pageable.ButtonCount(5))
.Sortable()
.Filterable()
.Scrollable(scrollable => scrollable.Enabled(true).Height(400))
.Reorderable(reorderable => reorderable.Columns(true))
.Resizable(resizable => resizable.Columns(false))
.ColumnMenu()

 

[Alex Hajigeorgieva]

Hello, Jennifer,

I tested with Bootstrap-v4 adding the shared margin style but I see no difference. The best way to figure out CSS is to use the browser inspector and see what styles are interfering with the built-in ones

I am under the impression that the issue you were facing has been corrected, let me know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Jennifer]

Yes, you are correct on both accounts, I was simply posting what worked in my particular case. Note that (previous to my solution) I did not have any custom CSS overriding any kendo CSS. So I figured I'd go ahead and share what worked for me. Not best practice to simply fix code without knowing why it broke in the first place but you are often told to find the quickest fix as a dev and move on.