We have some issues when using the telerik grid.
Actualy the problems is that the width of the column headings is being increased by few pixel.
Code :
@(Html.Telerik().Grid<Model>()
.Name("GridDemoRequest")
.Columns(columns =>
{
columns.Bound("Code").Width(60);
columns.Bound("Format").Width(150);
columns.Bound("ID").Width(60)
columns.Bound("SubmittedBy").Width(80);
columns.Bound("Date").Format("{0:MM/dd/yyyy}").Width(70);
columns.Bound("BCode")
.Scrollable(scrolling => scrolling.Enabled(true).Height(300))
.Pageable(paging =>paging.Style(GridPagerStyles.NextPreviousAndNumeric).PageSize(GridPagecount).Position(GridPagerPosition.Bottom))
.Filterable()
.Resizable(resizing => resizing.Columns(false))
.Groupable(grouping => grouping.Enabled(false))
)
Please find the snap regading issue.
snap.png.
If I comment the following code for the grid.
//.Scrollable(scrolling => scrolling.Enabled(true).Height(300))
It works fine.Please suggest me the solution regarding above issue.
Thanks
Hari
6 Answers, 1 is accepted
The provided Grid declaration is incomplete. Anyway, if you have explicit widths for all columns, try removing one of them, otherwise a discrepancy may occur between your settings and the available horizontal space.
You can refer to our demos, which use scrolling and column widths, and work as expected.
http://demos.telerik.com/aspnet-mvc/grid
By the way, in such cases it is good to mention which browser exhibits the issue.
Kind regards,
Dimo
the Telerik team
Rank 1
I have removed explicit width in code.
Please look on the Original code :
@(Html.Telerik().Grid<Model>()
.Name("DemoAssayRequest")
.Columns(columns =>
{
columns.Bound("Code");
columns.Bound("Format");
columns.Bound("RequestID")
columns.Bound("SubmittedBy");
columns.Bound("RequestDate").Format("{0:MM/dd/yyyy}");
columns.Bound("Code")
.HeaderTemplate("<input type='checkbox' title='check all records' value='chkall' id='checkAllRecords' />")
.HeaderHtmlAttributes(new { style = "text-align:center" })
.Title("").Width(40).HtmlAttributes(new { style = "text-align:center" }).Sortable(false).Filterable(false);
})
.ClientEvents(events => events.OnRowDataBound("Demo_onRowDataBound").OnDataBound("Demo_onDataBound"))
.DetailView(details => details.ClientTemplate(
Html.Telerik().Grid<RequestSearchDetails>().HtmlAttributes(new { style = "width: 800px" })
.Name("Status_<#= Code #>")
.Columns(columns =>
{
columns.Bound("Compound").Width(120);
columns.Bound("Batch").Width(60);
columns.Bound("Volume").Width(60);
columns.Bound("Concentration").Width(60);
columns.Bound("Well").Width(60);
})
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("RequestDetails", "Request", new { PlateBarCode = "<#= Code #>" }))
.Pageable(paging => paging.Enabled(false))
.Sortable(sorting => sorting
.SortMode(GridSortMode.MultipleColumn)
)
.ClientEvents(events => events.OnRowDataBound("DemoDetail_onRowDataBound"))
.Footer(false)
.Resizable(resizing => resizing.Columns(false))
.Filterable(filtering => filtering.Enabled(false))
.ToHtmlString()
))
.DataBinding(dataBinding =>
{
dataBinding.Ajax().Select("_Index", "Request");
})
.Scrollable(scrolling => scrolling.Enabled(true).Height(300))
.Sortable(sorting => sorting.SortMode(GridSortMode.MultipleColumn))
.Pageable(paging => paging.Style(GridPagerStyles.NextPreviousAndNumeric).PageSize(GridPagecount).Position(GridPagerPosition.Bottom))
.Filterable()
.Resizable(resizing => resizing.Columns(false))
.Groupable(grouping => grouping.Enabled(false))
)
Problem is remain same.
Thanks
Hari
Your code works as expected on my side.
I see that you are using a custom skin. Does the misalignment occur when using some of our skins? If not, then check the header cell paddings and data cell paddings for inconsistencies.
If you need further assistance, please send a full runnable demo, so that I can test locally.
Best wishes,
Dimo
the Telerik team
Rank 1
Problem has been fixed.
Rank 1
I am facing problem that.....
On resizing of one column (of Telerik mvc grid ) other columns are also resizing ....How to avoid this.... or else pls tell me how to get width of the column
in the client events of grid or in javascript........
Pls inform me....I am waiting for your reply
Thanks & Regards,
Mahesh
Rank 1
I also facing an issue with telerik hierarchical mvc gird. My requirement is to add scroll bar only to child at run time. Able to add that but when ever i add Scrollable(scrolling => scrolling.Height(60)) to child grid facing alignment issue.We are using ajax custom binding. Kindly let us know how to solve this. Please see the below code for your reference.
CODE
---------------------
@(Html.Telerik().Grid<SpaceX.Model.Purchasing.PurchaseOrder>()
.Name("PurchaseOrders")
.DataKeys(dataKeys =>
{
dataKeys.Add(p => p.PurchaseOrderID);
})
.Columns(columns =>
{
columns.Bound(p => p.SAPPONumber).Title("PO Number").Sortable(true).Width(140);//PO Number Will chnage once we get appropriate fields
columns.Bound(p => p.PurchaseOrderSpec).Title("PO Type").Sortable(false).Width(140);// PO Type
columns.Bound(p => p.Buyer).ClientTemplate("<#=Buyer!=null?Buyer.DisplayName:\"\"#>").Title("Buyer Name").Sortable(false).Width(140); // Po Quantity
columns.Bound(p => p.ShipToAddress).Title("Shipping Destination").ClientTemplate("<input type='hidden' id='POType_<#= PurchaseOrderID#>' value='<#= PurchaseOrderTypeID#>'><#= ShipToAddress #><div style='float:right'><input name='btnView' type='button' value='View..' onclick='POView(<#= PurchaseOrderID #>,<#= PurchaseOrderTypeID#>)' style='width:70px'/></div>").Width(70).Sortable(false);// Shipping Destination
columns.Bound(p => p.PurchaseOrderTypeID).Hidden();
})
.DataBinding(dataBinding => dataBinding.Ajax().OperationMode(GridOperationMode.Client))
.ClientEvents(events => events.OnRowDataBound("po_onRowDataBound"))
.Selectable()
.Sortable()
.Pageable(paging => paging.PageSize(10).Style(GridPagerStyles.PageSizeDropDown | GridPagerStyles.NextPreviousAndNumeric))
.DetailView(poLinedetailView => poLinedetailView.ClientTemplate(
Html.Telerik().Grid<SpaceX.Model.Purchasing.PurchaseOrderLine>()
.Name("Polines__<#= PurchaseOrderID #>")
.DataKeys(keys => keys.Add(pol => pol.PurchaseOrderID))
.Columns(columns =>
{
columns.Bound(pol => pol.PurchaseOrderLineID).Width(50).ClientTemplate("<input type='checkbox' POiD='<#= PurchaseOrderID #>' name='PurchaseOrderLineID' id='<#= PurchaseOrderLineID #>' value='<#= PurchaseOrderLineID #>' onclick='SelectRow(this);' />").Title("Select").Sortable(false);
columns.Bound(pol => pol.Part).ClientTemplate("<#=Part!=null?Part.PartNumber:\"\"#>").Title("PartNumber").Width(101).HtmlAttributes(new { style = "overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" }); ;
columns.Bound(pol => pol.SAPPOLineNo).Title("Line #").Width(140);
columns.Bound(pol => pol.OpenOrderQuantity).Title("Open Quantity").Width(200);
columns.Bound(pol => pol.TotalIntransitQuantity).Title("In-transit Quantity").Width(180);
columns.Bound(pol => pol.ExpectedReceiptDate).Title("Desired Received Date").Format("{0:MM/dd/yyyy}").Width(200);
columns.Bound(pol => pol.PurchaseUnitOfMeasure).Title("Purchase UoM").Width(200);
columns.Bound(pol => pol.TotalReceivedQuantity).Title("Shipment Quantity").ClientTemplate("<input type='text' Class='Quantity' id='txtQty_<#= PurchaseOrderLineID #>' name='txtQty' style='width:60px' disabled='disabled' value='<#= OpenOrderQuantity #>' onblur='ChangedValue(this)' oldvalue='<#=OpenOrderQuantity#>'/><div style='float:right'><input name='btnView' id='btnView' type='button' value='...' onclick='DeliveryScheduleView(<#= PurchaseOrderLineID #>)' style='width:40px'/></div>").Width(200).Sortable(false);
columns.Bound(pol => pol.PurchaseOrderLineID).Title("").Width("200px").ClientTemplate("<img id='img_<#=PurchaseOrderLineID#>' name='imgValid' src='' style='display:none'></img><span id='msg_<#=PurchaseOrderLineID#>' style='color:red'></span>");
})
.DataBinding(dataBinding => dataBinding.Ajax().OperationMode(GridOperationMode.Client))
.ClientEvents(events => events.OnDataBinding("poLines_dataBinding"))
.ClientEvents(events => events.OnRowDataBound("poLines_onRowDataBound"))
.Selectable()
.Sortable()
.ToHtmlString()
)// poLinedetailView.Template
)
)
Adding scroll height code
---------------------------------------------
function poLines_dataBinding(e) {
var grid = $(this).data("tGrid"),
masterRow = $(this).closest("tr.t-detail-row").prev(),
dataItem = $("#PurchaseOrders").data("tGrid").dataItem(masterRow);
grid.dataBind(dataItem.PurchaseOrderLineItems);
if (dataItem.PurchaseOrderLineItems.length > 2) {
$(this).closest("tr.t-detail-row").find('.t-grid-content').css({ overflow: 'auto', height: '60px' })
}
else {
$(this).closest("tr.t-detail-row").find('.t-grid-content').css({ overflow: 'visible', height: 'auto' })
}
}