[Solved] Probem with texbox width in edit mode and server callback

[Ju]

Hello,

I'm new with telerik grid in ASP.Net MVC3.
I'm trying to do a simple grid with edit mode in line.

I used poco to display my data.
When i'm in display mode, everything is ok in my grid. But when i'm calling the edit mode, nothing is aligned anymore. Textbox are too large for columns (see the attach file)

Here is my code

@model List<ProtoFTCarto.Models.FormateurDto>

@{
   ViewBag.Title = "Index";
}
<br />
<div class="blockTitle">
   Formateurs (Grille simple via ajax)</div>
<div style="display: block;" class="blockContent">
@(Html.Telerik().Grid(Model)
.Name("Grid")
   .TableHtmlAttributes(new { style = "table-layout:fixed" })
.DataKeys(keys => keys.Add(c => c.Identifiant))
   .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.BareImage).ImageHtmlAttributes(new { style = "margin-left:0" }))
   .DataBinding(dataBinding =>
   {
      dataBinding.Ajax()
         .Select("_Index", "SLA2")
         .Insert("_Insert", "SLA2")
         .Update("_Update", "SLA2")
         .Delete("_Delete", "SLA2");
   })
.Columns(columns =>
{
   columns.Command(commands =>
   {
      commands.Edit().ButtonType(GridButtonType.BareImage);
      commands.Delete().ButtonType(GridButtonType.BareImage);
   }).Width(30).Title("Commands");
columns.Bound(p => p.Nom).Width(210);
columns.Bound(p => p.Prenom).Width(130);
;

})
   .Editable(editing => editing.Mode(GridEditMode.InLine))
   )
</div>

Thanks for your help.

Ju (from France)

[Demon]

Hi,

You should check what styles makes those textboxes too wide. Compare your implementation with a similar demo on Telerik's website:

http://demos.telerik.com/aspnet-mvc/grid/editingajax

[Ju]

The class of the textbox is "text-box single-line" in both example.
I can't find the css class in the example. I've seracgh for text-box and only find : font-size:100%;

It's the same in my solution. I tried to put back the original css file but the table content does always the same.

What is strange is that in ajax mode it works fine. Also if i connect the database without using a intermediate object class, it works fine also. I don't understand what's going on.

Do you have any other ideas ?

I'm not sure it's only the texbox. The width of the first column is also modified.

[Atanas Korchev]

Hi,

 The problem is that you have set the width of all columns. However the total width of the grid is higher that the sum of all column widths. You need to leave one of the columns without set width so it can take the rest of the table width:

.Columns(columns =>
{
   columns.Command(commands =>
   {
      commands.Edit().ButtonType(GridButtonType.BareImage);
      commands.Delete().ButtonType(GridButtonType.BareImage);
   }).Width(30).Title("Commands");
columns.Bound(p => p.Nom);
columns.Bound(p => p.Prenom).Width(130);
;

})

Greetings,
Atanas Korchev
the Telerik team

[Ju]

Thanks for your help. It works fine now.