This is a migrated thread and some comments may be shown as answers.

[Solved] Strange Layout Behaviour and ColumnWidth

2 Answers 129 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Phil Applegate asked on 12 Aug 2010, 03:23 PM

ie8-withautocomplete-on-the-page.png

firefox-editing.png

ie8-columnwidth-does-not-apply.png

firefox-columnwidth-does-not-apply.png

I'm using Q2 713 version. My page does not reference any css besides default ones having been linked by StyleSheetRegistrar (also tested when referencing the default ASP.NET Site.css).
I have an ajax-bound editable grid which uses EditorTemplates in order to show DropDowns in edit mode.
I've also tried to apply .HtmlAttributes(new { style = "overflow: auto" }) to the grid.
Here's the grid's definition:

<% Html.Telerik().Grid<BusinessAccountDTO>()

.Name("BusinessAccountsGrid")

.DataKeys(dataKeys => dataKeys.Add(c => c.BusinessAccountID))

.ToolBar(commands => commands.Insert())

.Columns(colums =>

{

colums.Bound(o => o.Rating).Width(50);

colums.Bound(o => o.RegisterDate).ReadOnly(true).Width(50);

colums.Bound(o => o.LastUpdateDateTime).ReadOnly(true).Width(50);

colums.Bound(o => o.RegionID).ClientTemplate("<#= Region #>").Filterable(false).Width(350); ;

colums.Bound(o => o.BusinessAccountTypeID).ClientTemplate("<#= BusinessAccountType #>").Filterable(false).Width(350);

colums.Bound(o => o.BusinessTypeID).ClientTemplate("<#= BusinessType #>").Filterable(false).Width(350);

colums.Bound(o => o.BusinessStatusID).ClientTemplate("<#= BusinessStatus #>").Filterable(false).Width(350);

colums.Bound(o => o.AccountStateID).ClientTemplate("<#= AccountState #>").Filterable(false).Width(350);

colums.Bound(o => o.ManagerAccountID).ClientTemplate("<#= ManagerAccount #>").Filterable(false).Width(450);

colums.Bound(o => o.AspNetUserId).ClientTemplate("<#= AspNetUser #>").Filterable(false).Width(50);

colums.Command(commands =>

{

commands.Edit();

commands.Delete();

}).Width(450);

})

.DataBinding(dataBinding => dataBinding

.Ajax()

.Select("SelectAjax", "People", new { searchMenuId = 0 })

.Insert("InsertAjax", "People")

.Update("UpdateAjax", "People")

.Delete("DeleteAjax", "People")

)

.Pageable(pager => pager.PageSize(5))

.Sortable()

.Filterable()

.Render(); %>

There are some issues with the grid:
1. Specified column width for some reason does not get applied so that the width of columns actually depends on the column header text. Column width gets applied only if .Scrollable() is set, but I do not want my grid to be .Scrollable() (see attachment)!
2. In edit mode after the "Edit" button gets pressed the whole row content gets shifted to the left (see attachment). Once editing is complete the row elements either move back to the right place or stay being shifted permanently.
3. If I render Telerik AutoComplete control (on the same page but outside the grid), the grid works fine in Firefox 3 but does not work in IE8 due to the javascript error:

Message: Expected identifier, string or number

Line: 1

Char: 2772

Code: 0

URI: http://localhost:11014/Scripts/2010.2.713/telerik.autocomplete.min.js

Message: Object doesn't support this property or method

Line: 94

Char: 1

Code: 0

URI: http://localhost:11014/People/Select

In the line 94 starts a javascript block generated by the AutoComplete control:

<script type="text/javascript">

//<![CDATA[

jQuery(document).ready(function(){

jQuery('#AjaxAutoComplete').tAutoComplete({autoFill:true, ............

jQuery('#BusinessAccountsGrid').tGrid({columns:[{"title": ............

//]]>

</script>

4. For some reason client side validation does not show the ErrorMessage (specified within DataAnnotation attribute), the record being modified/created just does not get updated/created without any UI messages (required css was copied from Examples).

BTW, when my page is loaded, for a little while the grid has no records in it and is collapsed, then ajax request is made and the grid
becomes populated with data and expands. How can I force the grid to stay expanded even when it still hasn't received the data from server?

2 Answers, 1 is accepted

answered on 12 Aug 2010, 04:08 PM

firefox-after-editing-completed-with-default-site-css.png

Here's how it looks with the default Site.css theme: after editing was completed, row elements do not shift back to their positions.