Inline Editing Alignment w/ Headers

[Joshua]

Is anyone else having this issue? Ajax binding, inline editing. Hit edit, and the width of the controls suddenly change and do not fall under the same width of the headers in the grid. Results in a very ugly looking inline edit form. Is there a known fix for this?

[Atanas Korchev]

Hello Joshua,

Try setting the widths of the columns. The inline form is implemented as a nested table and without column widths it cannot be sized properly as the parent table. The ajax editing online demo shows a typical configuration.

Best wishes,
Atanas Korchev
the Telerik team

[William]

I'm having this issue to, and while the alignment is not as bad, I still see this issue when I set the column widths for every column. I'm not really digging this solution either because almost all of the grids that I build need to span the full width of its container so I don't want to have to set column widths in this case.

Also, the header disappears after I hit update when inline editing.  Is this related to the column alignment issue or is it another issue. 

[Joshua]

Setting the width does not have the desired effect. I can see the code samples, and for all intents and purposes, my code is the same - as it seems. Furthermore, when I set the width of a column, it's not actually setting the width to my specification. Perhaps this is a culprit? There is an unanswered post regarding this that I found. I'm sure this is related.

[Joshua]

Everyone:

I've found a fix:
.HtmlAttributes(new {Style = "width: 200px"});

The key here is to set the width of all your columns to something larger than what you think they'll all be. It won't actually get set to according to the width you type in, but it fixes the problem. There seems to be some mechanism that is automatically laying out the widths of the columns. I'm certain this is the culprit. Instead of fighting with it, I decided to rely on it.

It's really hacky, but it works perfectly. That's all I care about. One thing to note is that if you put too many columns in the grid the behavior will suddenly break. This hack relies on the columns all being automatically lain out somehow by the mystery mechanism.

Telerik, can you please provide feedback on this behavior? This bug was very very insidious and I've spent about 20 hours researching this for my upcoming release. I, to my own risk, placed a lot of bets on the Telerik controls because the samples really sold me. Unfortunately there are a lot of edge cases that I've learned do not match up to the samples. This is a great example of that. I understand what the risks are to bleeding edge technology, and so I'm not complaining, but I would love to understand what's going on here. Are code samples needed?

[Aaron]

Agreed.

It seems that when pushed to the edge cases, the Telerik grid control strains to perform as anticipated. This is especially true when dealing with Ajax editing.

For what it's worth, I abandoned InLine editing in favor of PopUp editing because of the column alignment issue. Of course, Ajax PopUp editing has it's own issues, such as hidden columns that fail to stay hidden, and Title overrides which aren't carried into the popup. Some of this can be cured with some dirty hardcoded javascript in the onEdit() client-method.

*EDIT*: Actually it looks like Ajax PopUp grabs a copy of the EditorFor template as the guts for it's PopUp form. It appears to load the EditorFor only once with an empty/new object and uses the result as a PopUp template; it does not call the EditorFor partial view for each row of data.

[Makoto]

I am also experiencing this issue, but only in IE 8. However, if I turn on Compatibility Mode, the columns align again, but then some new problems are introduce with compatibility mode turned on. 

It seems like the editor form that gets shown during editing is messing up the parent table's column widths.  If I set the form to be hidden (display:none), then the columns are correct again.  If you use IE dev tools to inpsect the layout of the header columns during editing, you'll see that they are increased in size, but I haven't figured out how to prevent this from happening yet.

What I'm doing is setting widths explicitly for all my columns except for the last one.  Works fine in every other browser.

----------  EDIT -------------
I also wanted to mention that I'm using a drop down list (regular <select> tag) as one of the editor templates, and that seems to be causing the issue.  If I hide the drop down, the problem goes away.

If I use Telerik's DropDownList control, then the column widths are fixed too, but I'm wondering if this is overkill since I just need a simple drop down list, don't need the additional features... but I suppose if it works, then I'll just end up using it.

[Rosen]

Hi Makoto,

Can you please provide a small sample in which the mentioned behavior can be observed?

All the best,
Rosen
the Telerik team

[Makoto]

I have attached a sample project that replicates this issue.

This only seems to happen in IE 8.

Also, it seems to only happen when I use the Html.DropDownList() extension method, versus manually creating the <select> element.  It seems like the <span> tag that gets inserted for showing the validation message is what might be causing it.

There's an editor control called ProductType that uses a DropDownList.  You'll also see commented out the implementation using Telerik's drop down list, which works fine.

[Rosen]

Hi Makoto,

Indeed I was able to observed the mention behavior. It seems to be caused by the bigger width of the select element. In order to correct this I suggest you to set table-layout to be fixed:

<%: Html.Telerik().Grid<GridWidths.Models.Product>()
       .TableHtmlAttributes(new {style = "table-layout:fixed"})

All the best,
Rosen
the Telerik team

[Makoto]

Thanks.  This helped somewhat.  With grids that have hidden columns, the alignment isn't quite right using this technique.

I've tried moving the hidden column around so that it's the last column, second to last, and different positions, and event tried explicitly setting the hidden column's width to 0, but it still messes up a bit.

[Darren]

I know it has been a few months, but I just thought I would post how I made this work. 

In my case, I had two hidden columns that were being displayed every time I went into Edit mode, using Inline Edit and Ajax binding.  In order to "hide" them, I moved them to the end and adjusted the width of the columns to occupy the entire space allotted to them.  The code for the grid is below:

@{ Html.Telerik().Grid<TrawlLogbook.Models.TicketCatchSpeciesDetail>()
      .Name("SpeciesDetails")
      .TableHtmlAttributes(new { style = "table-layout:fixed" })
      .DataKeys(key =>
      {
          key.Add(k => k.SpeciesDetailId);
          key.Add(k => k.TicketSampleId);
      })
      .ToolBar(t =>
      {
          t.Insert().ButtonType(GridButtonType.Text);
      })
      .DataBinding(db =>
      {
          db.Ajax()
              .Select("GetCatchDetails", "SpeciesComp")
              .Insert("InsertCatchDetails", "SpeciesComp")
              .Update("UpdateCatchDetails", "SpeciesComp")
              .Delete("DeleteCatchDetails", "SpeciesComp");
      })
      .Columns(cols =>
          {
              cols.Bound(det => det.Species)
                  .Title("Species")
                  .Width(250);
              cols.Bound(det => det.NumberOfFishWeighed)
                  .Title("Number Weighed")
                  .HtmlAttributes(new {style = "text-align: right"})
                  .Width(125);
              cols.Bound(det => det.Weight)
                  .Title("Weight")
                  .HtmlAttributes(new { style = "text-align: right" })
                  .Width(125);
              cols.Bound(det => det.AverageWeight)
                  .Title("Average Weight")
                  .HtmlAttributes(new { style = "text-align: right" })
                  .Width(130)
                  .ReadOnly();
              cols.Bound(det => det.SpeciesPercent)
                  .Title("Species Percent")
                 .HtmlAttributes(new { style = "text-align: right" })
                 .Format("{0:P}")
                 .Width(130)
                 .ReadOnly();
             cols.Command(commands =>
                 {
                     commands.Edit();
                     commands.Delete();
                 })
                 .Title("Actions")
                 .Width(190);
             cols.Bound(det => det.TicketSampleId)
                 .Hidden()
                 .ReadOnly()
                 .Width(0);
             cols.Bound(det => det.SpeciesDetailId)
                 .Hidden()
                 .ReadOnly()
                 .Width(0);
         })
     .Editable(e => e.Mode(GridEditMode.InLine))
     .Scrollable(s => s.Height(150))
     .NoRecordsTemplate(" ")
     .ClientEvents(evnts => evnts.OnEdit("SpeciesDetails_OnEdit"))
     .Render();

I hope this helps someone else struggling with this issue!

-Darren