[Solved] Horizontal Scrolling - Row data not aligning with columns in IE.

[Reid]

Hello All,

I have attached a screen shot where a Grid is not syncing the row with it's headers.  The row scrolls but the headers do not.  This happens in IE, Firefox is fine.

Any suggestions?
Thanks,

Reid

[Petur Subev]

Hello Reid,

Probably something is going wrong with the CSS used in this page. Does the problem persist if you remove all custom styles applied? If it does please share the code used for the View so we can check it.

Regards,
Petur Subev
the Telerik team

[Reid]

Hello Petur,

Thanks for responding.

There are other grids in the project that do not do this, all under the same Site.Master/styles/JS.    I also removed all custom .css loading the site raw with just the StyleSheetRegistar at the top of the page.

<%: Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css")) %>

<%: Html.Telerik().Grid(Model.PayerUsers)  //(Model.ExcludedGroupsSearchResults.ExcludedProviderGroupList)
    .Name("Grid")
    .DataKeys(keys =>
   {
      keys.Add(u => u.MembershipID);
   })
    .ToolBar(commands =>
   {
     commands.Insert().ButtonType(GridButtonType.Text).ImageHtmlAttributes(new { style = "margin-left:0" });
    })


     .TableHtmlAttributes(new { style = "height:" + ( Model.GridModel.Height > 0 ? Model.GridModel.Height + "px" : "100%" ) })
     .TableHtmlAttributes(new { style = "width:" + ( Model.GridModel.Width > 0 ? Model.GridModel.Width + "px" : "100%" ) })
     .DataBinding(dataBinding => dataBinding.Ajax()
     .Select("_AjaxLoadingPayerUsers", "Users")
     .Update("_AjaxUpdatePayerUser", "Users")
     .Insert("_AjaxInsertPayerUser", "Users")
     .Delete("_AjaxDeletePayerUser", "Users"))
     .Columns(columns =>
          {
              columns.Bound(eg => eg.Enabled).Width(100)
                .ClientTemplate("<input type='checkbox' disabled='disabled' name='Enabled' <#= Enabled? \"checked='checked'\" : \"\" #> />");
                 columns.Bound(eg => eg.Title).Width(225).Title("Title");
                 columns.Bound(eg => eg.UserName).Width(225).Title("User");
                 columns.Bound(eg => eg.Email).Width(225).Title("Email");
                 columns.Bound(eg => eg.PhoneNumber).Width(225).Title("Phone");
                 columns.Bound(eg => eg.Member.IsApproved).Width(200).Title("Approved");
                 columns.Bound(eg => eg.Member.IsLockedOut).Width(200).Title("Locked Out");
                 columns.Bound(eg => eg.Member.IsOnline).Width(200).Title("Online");
                 columns.Bound(eg => eg.Member.LastActivityDate).Width(225).Title("Last Active");
                 columns.Bound(eg => eg.Member.LastLoginDate).Width(225).Title("Last Login");
                 columns.Bound(eg => eg.Member.LastPasswordChangedDate).Width(275).Title("Last Password Change");
                 columns.Bound(eg => eg.Member.Comment).Width(275).Title("Comment");
                 columns.Command(commands =>
                     {
                          commands.Edit().ButtonType(GridButtonType.Text);
                          commands.Delete().ButtonType(GridButtonType.Text);
                           }).Width(125).Title("Commands");
                      })
                      // http://demos.telerik.com/aspnet-mvc/grid/clientrowtemplate
                      .ClientRowTemplate(grid =>
                       "<div class='payeruser-details'>" +
                          // "<img class='t-widget' src='" +
                         // Url.Content("~/Content/Grid/Customers/") +
                         // "<#= CustomerID#>.jpg' alt='<#= ContactName #>' title='<#= ContactName #>' />" +
                            "<h3 class='t-widget'><#= UserName #></h3>" +
                               "<dl>" +
                               "<dt>Name:</dt><dd><#= UserName #></dd>" +
                                "<dt>Email:</dt><dd><#= eg.Email #></dd>" +
                                              "</dl><dl class='t-widget'>" +
                                                "<dt>Title:</dt><dd><#= Title #></dd>" +
                                                "<dt>Phone:</dt><dd><#= PhoneNumber #></dd>" +
                                                "</dl>" + "<div class='commands'>" +
                                                grid.EditButton(null) + grid.DeleteButton(null) +
                                                "</div>" +
                                            "</div>")

                                            // .ClientEvents(events => events.OnError("onError"))
                                            // .ClientEvents(events => events.OnRowSelect("onRowSelect"))
                                            .Editable(editing => editing.Mode(GridEditMode.PopUp))
                                            .Editable(config => config.DefaultDataItem(new PayerUserModel()
                                            {
                                                CreatedOn = DateTime.Now,
                                                LastModified=DateTime.Now
                                            }))
                                            .Pageable()
                                            .Groupable()
                                            .Scrollable()
                                            .Selectable()
                                            .Sortable(sorting => sorting.OrderBy(sortOrder => sortOrder.Add(eg => eg.CreatedOn).Descending()))
                                            .Filterable()


                                %>

I cannot see the problem here.  Also Petur, if you know why the ClientRowTemplate is not showing please let me know.  The link above is to there source of yhe Telerik code on a demo.,


Thanks,

Reid

[Petur Subev]

Hello Reid,

The ClientRowTemplate is used when the data is received via Ajax (if you perform sort,page or group the template will be activated).
In the code you shared you are passing an initial value to the Grid, this is why the template is not used. You can define RowTemplate which displays the row the same way as the ClientRowTemplate or you can remove the initial load and let the Grid make an Ajax call to get its data.
As for the columns misalignment question I am still unable to replicate the problem. Please check the attached project and see if I missed something ? The only significant difference is the commented lines used to assign TableHtmlAttributes.


All the best,
Petur Subev
the Telerik team

[Reid]

Thank you very much for assembling a downloadable solution to model what I am doing. I have a question or two.

If I use this in the Grid declaration below the page fails to load.

<%: Html.Telerik().Grid(IEnumerable<PayPlusTPA.MVC.Models.PayerUserModel>)Model.PayerUsers)

If I return to the code in place I had it loads ..

<%: Html.Telerik().Grid(Model.PayerUsers).Name("Grid") %>

This is strange because that is the datatype, it is a List<PayerUserModel> member of the view model class.

With respect to the issue of the columns and headers not aligning on horizontal scroll, it is not happening in your solution, it is still happening in mine.  I attached another shot that shows the columns and below, the second of two records in a crunched or bunched up state.  As mentioned, there are four other grids working fine under the JS and .CSS declared in the master that this template uses.  Not sure why it does not want to behave in IE.

I pasted in your code exactly in the ClientRowTemplate( ** portion and it has not effect.  I only see the columns in the model.  This link is what I am after .. http://demos.telerik.com/aspnet-mvc/grid/clientrowtemplate

Stil confused as to why the grid just renders the default row ..  I guess it has to do with that issue of how the Grid() constructor only wants to work with the Model.PayerUsers, a List<> of the PayerUserModel class.

Thanks,

Reid

[Petur Subev]

Hi Reid,

Could you please modify the demo project I prepared to replicate the issues so I can check what exactly is going wrong?
Thank you for the understanding.

Kind regards,
Petur Subev
the Telerik team

[Reid]

Hello Petur,

This issue has been resolved.  The problem was that I was not binding to Ajax correctly.  Using the right declaration in the grid coupled with the Ajax Insert, Update, Delete and Select methods it now works.  It came with the understanding that when you use the following you are binding server side

<%: Html.Telerik().Grid(Model.PayerUsers)

and when you use the following type of data binding you are binding to the client.

<%: Html.Telerik().Grid<PayPlusTPA.MVC.Models.PayerUserModel>()

Thanks for the help.

Reid