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

 
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" })

  )

 
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.

How did you resolve this issue?

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

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

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:

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