Razor および Telerik Grid コントロールを使用して、C# で MVC-3 デザイン パターンを使用しています。製品のリリースを妨げる小さな問題が 1 つあります。
標準のテレリック スタイルを使用しているだけなので、カスタム CSS はありません。ただし、予想どおり、すべてが非常に見栄えがよくなります... 水平方向に右にスクロールします。
スクロールする前に:
スクロール後:
Telerik コントロール自体は、実際には水平スクロールをサポートしていないように見えるため、その周りに div タグをポップし、その上にスクロール バーを設定しました。Telerik ウィンドウ コントロールを使用しても、同じことが起こります。Telerik は垂直スクロールをサポートしており、.Scrollable() を設定するとアクティブになります。.Scrollable("Horizontal") などのように言う方法はありますか。
私の推測では、ヘッダーとフッターがすべての列を含むように拡張されていないことに関係しているようです。私がそれを修正できる方法はありますか？私は最後の日かそこらでテレリック スタイル シートと JQuery を掘り下げてみましたが、役に立ちませんでした。
ご協力いただきありがとうございます。
編集1:以下の回答の1つが指摘したように、すべての列に .Width(xxx) を追加する必要があり、機能します。私は前にこれをしましたが、うまくいきませんでした。今まで言わなかったことをお詫びします。
編集 2: 要求されたコード:
<div id="ListContent">
@{
Html.Telerik()
.Grid<YeatsClinical.PatientPortal.Web.ViewModels.PatientEducation>("PatientEducations")
.Name("grid")
.DataKeys(k => k.Add(o => o.MrPatientEducationId))
.Columns(c =>
{
c.Bound(o => o.MrPatientEducationId).ReadOnly().Width(100);
c.Command(s =>
{
s.Select();
}).Width(100);
c.Bound(o => o.PatientId).Visible(false).Width(100);
c.Bound(o => o.MrPatientEncounterId).Visible(false).Width(100);
c.Bound(o => o.MrPatientEducationResourceId).Visible(false).Width(100);
c.Bound(o => o.GivenAsPrint).Width(100);
c.Bound(o => o.DatePrinted).Width(100);
c.Bound(o => o.SentViaEmail).Width(100);
c.Bound(o => o.DocumentTitle).Width(100);
// image is temporary disabled because its causing huge lag spikes and very long database retrievals
c.Bound(o => o.File).Visible(false).Width(100);
c.Bound(o => o.DateCreated).Width(100);
c.Bound(o => o.CreatedByUserId).Visible(false).Width(100);
c.Bound(o => o.DateLastUpdated).Width(100);
c.Bound(o => o.LastUpdatedByUserId).Visible(false).Width(100);
})
.Pageable()
.Sortable()
.Filterable()
.Groupable()
.Render();
}
</div>
上記の外側の div は、青いスクロールバーでスタイル設定されたものです。