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

[Solved] Grid column allignment issue

3 Answers 130 Views

General Discussions

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

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

Amitesh asked on 03 Aug 2010, 12:24 AM

Hi
I have 2 problems with the Telerik grid
1) I have about 12 columns on my grid so I need a horizontal scroll bar inorder to display the columns properly. To achive this I have my grid wrapped in div element and on the div element I have set the overflow style to scroll which enables the horizontal scroll bar. However the grid container does not extend to contain the columns. The columns extend outside the grid container

2) Initially the grid will not have any rows. Users enter new row details by click on the Add new record button which put the grid in add mode with a row to take input. This row however is not at all alligned with the column headers. The input textboxs are all of different sizes and appear under under different column headers. However after I insert the first row, and then adding the next row, the input boxes allign with the column headers. This is really an annoying problem

Can anybody please point me int he correct direction

Below is my code for the grid:

<div id="invoiceLineItemsGrid" style="overflow:scroll">

<%= Html.Telerik()

.Grid(Model.InvoiceLineItems)

.Name("InvoiceLineItemGrid")

.DataKeys(keys =>

{

keys.Add(i => i.StagingId).RouteKey("StagingId");

})

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

.DataBinding(dataBinding => dataBinding.Ajax()

.Select("GetEnteredInvoiceLineItems", "SupplierInvoice")

.Insert("InsertLineItem", "SupplierInvoice")

.Update("EditLineItem", "SupplierInvoice"))

.Columns(columns =>

{

columns.Bound(i => i.Quantity).Title("Qty").Width(50);

columns.Bound(i => i.ProductCode).Title("Product Code").Width(110);

columns.Bound(i => i.AccountCode).Title("Account Code").ClientTemplate("<#= AccountCode.AccountName #>").Width(110);

columns.Bound(i => i.ProductDescription).Title("Product Description").Width(130);

columns.Bound(i => i.UnitPrice).Format("{0:C2}").Title("Unit Price (Exc)").Width(120);

columns.Bound(i => i.DiscountPercent).Title("Disc %").Width(60);

columns.Bound(i => i.UnitCost.ExcTax).Title("Total Price (Exc)").Width(120);

columns.Bound(i => i.JobNumber).Title("Job Number");

columns.Bound(i => i.TaxCode).Title("GST Code").ClientTemplate("<#= TaxCode.Code #>");

columns.Bound(i => i.UnitCost.Tax).Title("GST");

columns.Bound(i => i.UnitDescription).Title("Unit Description");

columns.Command(commands => { commands.Edit(); }).Width(150).Title("Actions");

})

.ClientEvents(events => events

.OnRowDataBound("InvoiceLineItemGrid_OnRowDataBound"))

%>

</div>

[Solved] Grid column allignment issue

3 Answers, 1 is accepted