Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
Scrolling horizontal in igGrid
posted

Hi, 

Is it possible to scroll horizontal to specific column in IgGrid with columns fixing?

Below my grid:

For exemple, we are in the 20th week, i want to scroll automatique to the column S20.

Thanks for your help.

Below you can find my cshtml

@(Html.Infragistics()
.Grid<V_SuiviPlanning>()
.ID("gridSuiviPlanning")
.Height((string)ViewBag.HeightList)
.Width("1800px")
.ResponseDataKey("Data") //pointe sur la propriété Data de PagedDataListDto
.PrimaryKey("PrimaryKey")
.RenderCheckboxes(true)
.AutoGenerateColumns(false)
.AutoGenerateLayouts(true)
.EnableUTCDates(false)
.Columns(column =>
{
column.For(crp => crp.Reference).Width("120px");
column.For(crp => crp.Designation).Width("200px");
column.For(crp => crp.Famille).Width("120px");
column.For(crp => crp.Categorie).Width("120px");
column.For(crp => crp.Puht).Width("50px");
column.For(crp => crp.Statut).Width("70px");
column.For(crp => crp.StockFrs).Width("50px");
column.For(crp => crp.Rupture).Width("70px");
column.For(crp => crp.FreniteValue).Width("70px");
column.For(crp => crp.S1).Width("70px").Template("<div style='color: {{if ${S1} > 0}}blue{{else}}red {{/if}}'>${S1}</div>");
column.For(crp => crp.S2).Width("70px").Template("<div style='color: {{if ${S2} > 0}}blue{{else}}red {{/if}}'>${S2}</div>");
column.For(crp => crp.S3).Width("70px").Template("<div style='color: {{if ${S3} > 0}}blue{{else}}red {{/if}}'>${S3}</div>");
column.For(crp => crp.S4).Width("70px").Template("<div style='color: {{if ${S4} > 0}}blue{{else}}red {{/if}}'>${S4}</div>");
column.For(crp => crp.S5).Width("70px").Template("<div style='color: {{if ${S5} > 0}}blue{{else}}red {{/if}}'>${S5}</div>");
column.For(crp => crp.S6).Width("70px").Template("<div style='color: {{if ${S6} > 0}}blue{{else}}red {{/if}}'>${S6}</div>");
column.For(crp => crp.S7).Width("70px").Template("<div style='color: {{if ${S7} > 0}}blue{{else}}red {{/if}}'>${S7}</div>");
column.For(crp => crp.S8).Width("70px").Template("<div style='color: {{if ${S8} > 0}}blue{{else}}red {{/if}}'>${S8}</div>");
column.For(crp => crp.S9).Width("70px").Template("<div style='color: {{if ${S9} > 0}}blue{{else}}red {{/if}}'>${S9}</div>");
column.For(crp => crp.S10).Width("70px").Template("<div style='color: {{if ${S10} > 0}}blue{{else}}red {{/if}}'>${S10}</div>");
column.For(crp => crp.S11).Width("70px").Template("<div style='color: {{if ${S11} > 0}}blue{{else}}red {{/if}}'>${S11}</div>");
column.For(crp => crp.S12).Width("70px").Template("<div style='color: {{if ${S12} > 0}}blue{{else}}red {{/if}}'>${S12}</div>");
column.For(crp => crp.S13).Width("70px").Template("<div style='color: {{if ${S13} > 0}}blue{{else}}red {{/if}}'>${S13}</div>");
column.For(crp => crp.S14).Width("70px").Template("<div style='color: {{if ${S14} > 0}}blue{{else}}red {{/if}}'>${S14}</div>");
column.For(crp => crp.S15).Width("70px").Template("<div style='color: {{if ${S15} > 0}}blue{{else}}red {{/if}}'>${S15}</div>");
column.For(crp => crp.S16).Width("70px").Template("<div style='color: {{if ${S16} > 0}}blue{{else}}red {{/if}}'>${S16}</div>");
column.For(crp => crp.S17).Width("70px").Template("<div style='color: {{if ${S17} > 0}}blue{{else}}red {{/if}}'>${S17}</div>");
column.For(crp => crp.S18).Width("70px").Template("<div style='color: {{if ${S18} > 0}}blue{{else}}red {{/if}}'>${S18}</div>");
column.For(crp => crp.S19).Width("70px").Template("<div style='color: {{if ${S19} > 0}}blue{{else}}red {{/if}}'>${S19}</div>");
column.For(crp => crp.S20).Width("70px").Template("<div style='color: {{if ${S20} > 0}}blue{{else}}red {{/if}}'>${S20}</div>");
column.For(crp => crp.S21).Width("70px").Template("<div style='color: {{if ${S21} > 0}}blue{{else}}red {{/if}}'>${S21}</div>");
column.For(crp => crp.S22).Width("70px").Template("<div style='color: {{if ${S22} > 0}}blue{{else}}red {{/if}}'>${S22}</div>");
column.For(crp => crp.S23).Width("70px").Template("<div style='color: {{if ${S23} > 0}}blue{{else}}red {{/if}}'>${S23}</div>");
column.For(crp => crp.S24).Width("70px").Template("<div style='color: {{if ${S24} > 0}}blue{{else}}red {{/if}}'>${S24}</div>");
column.For(crp => crp.S25).Width("70px").Template("<div style='color: {{if ${S25} > 0}}blue{{else}}red {{/if}}'>${S25}</div>");
column.For(crp => crp.S26).Width("70px").Template("<div style='color: {{if ${S26} > 0}}blue{{else}}red {{/if}}'>${S26}</div>");
column.For(crp => crp.S27).Width("70px").Template("<div style='color: {{if ${S27} > 0}}blue{{else}}red {{/if}}'>${S27}</div>");
column.For(crp => crp.S28).Width("70px").Template("<div style='color: {{if ${S28} > 0}}blue{{else}}red {{/if}}'>${S28}</div>");
column.For(crp => crp.S29).Width("70px").Template("<div style='color: {{if ${S29} > 0}}blue{{else}}red {{/if}}'>${S29}</div>");
column.For(crp => crp.S30).Width("70px").Template("<div style='color: {{if ${S30} > 0}}blue{{else}}red {{/if}}'>${S30}</div>");
column.For(crp => crp.S31).Width("70px").Template("<div style='color: {{if ${S31} > 0}}blue{{else}}red {{/if}}'>${S31}</div>");
column.For(crp => crp.S32).Width("70px").Template("<div style='color: {{if ${S32} > 0}}blue{{else}}red {{/if}}'>${S32}</div>");
column.For(crp => crp.S33).Width("70px").Template("<div style='color: {{if ${S33} > 0}}blue{{else}}red {{/if}}'>${S33}</div>");
column.For(crp => crp.S34).Width("70px").Template("<div style='color: {{if ${S34} > 0}}blue{{else}}red {{/if}}'>${S34}</div>");
column.For(crp => crp.S35).Width("70px").Template("<div style='color: {{if ${S35} > 0}}blue{{else}}red {{/if}}'>${S35}</div>");
column.For(crp => crp.S36).Width("70px").Template("<div style='color: {{if ${S36} > 0}}blue{{else}}red {{/if}}'>${S36}</div>");
column.For(crp => crp.S37).Width("70px").Template("<div style='color: {{if ${S37} > 0}}blue{{else}}red {{/if}}'>${S37}</div>");
column.For(crp => crp.S38).Width("70px").Template("<div style='color: {{if ${S38} > 0}}blue{{else}}red {{/if}}'>${S38}</div>");
column.For(crp => crp.S39).Width("70px").Template("<div style='color: {{if ${S39} > 0}}blue{{else}}red {{/if}}'>${S39}</div>");
column.For(crp => crp.S40).Width("70px").Template("<div style='color: {{if ${S40} > 0}}blue{{else}}red {{/if}}'>${S40}</div>");
column.For(crp => crp.S41).Width("70px").Template("<div style='color: {{if ${S41} > 0}}blue{{else}}red {{/if}}'>${S41}</div>");
column.For(crp => crp.S42).Width("70px").Template("<div style='color: {{if ${S42} > 0}}blue{{else}}red {{/if}}'>${S42}</div>");
column.For(crp => crp.S43).Width("70px").Template("<div style='color: {{if ${S43} > 0}}blue{{else}}red {{/if}}'>${S43}</div>");
column.For(crp => crp.S44).Width("70px").Template("<div style='color: {{if ${S44} > 0}}blue{{else}}red {{/if}}'>${S44}</div>");
column.For(crp => crp.S45).Width("70px").Template("<div style='color: {{if ${S45} > 0}}blue{{else}}red {{/if}}'>${S45}</div>");
column.For(crp => crp.S46).Width("70px").Template("<div style='color: {{if ${S46} > 0}}blue{{else}}red {{/if}}'>${S46}</div>");
column.For(crp => crp.S47).Width("70px").Template("<div style='color: {{if ${S47} > 0}}blue{{else}}red {{/if}}'>${S47}</div>");
column.For(crp => crp.S48).Width("70px").Template("<div style='color: {{if ${S48} > 0}}blue{{else}}red {{/if}}'>${S48}</div>");
column.For(crp => crp.S49).Width("70px").Template("<div style='color: {{if ${S49} > 0}}blue{{else}}red {{/if}}'>${S49}</div>");
column.For(crp => crp.S50).Width("70px").Template("<div style='color: {{if ${S50} > 0}}blue{{else}}red {{/if}}'>${S50}</div>");
column.For(crp => crp.S51).Width("70px").Template("<div style='color: {{if ${S51} > 0}}blue{{else}}red {{/if}}'>${S51}</div>");
column.For(crp => crp.S52).Width("70px").Template("<div style='color: {{if ${S52} > 0}}blue{{else}}red {{/if}}'>${S52}</div>");
column.For(a => a.PrimaryKey).Hidden(true);
})
.Features(features =>
{
//features.Updating().EditMode(GridEditMode.Row).EnableAddRow(false)
//.ColumnSettings(cs =>
//{
// cs.ColumnSetting().ColumnKey("RefProduit").EditorType(ColumnEditorType.Combo)
// .ComboEditorOptions(co => co.ID("igComboRefProduit")
// .ValueKey("Value").TextKey("Text")
// .Mode(ComboMode.DropDown).EnableClearButton(false).AllowCustomValue(true)
// .DropDownWidth(280)
// .Mode(ComboMode.Editable)
// .FilteringType(ComboFilteringType.Local)
// .DataSource(ViewBag.ProduitList));
// cs.ColumnSetting().ColumnKey("Designation").EditorType(ColumnEditorType.Text);
// cs.ColumnSetting().ColumnKey("Designation").ReadOnly(true);
//});
features.ColumnFixing().FixingDirection(ColumnFixingDirection.Left).ColumnSettings(cs =>
{
//column.For(crp => crp.Reference).Width("100px");
//column.For(crp => crp.Designation).Width("200px");
//column.For(crp => crp.Famille).Width("100px");
//column.For(crp => crp.Categorie).Width("200px");
//column.For(crp => crp.Puht).Width("100px");
//column.For(crp => crp.StockFrs).Width("200px");
//column.For(crp => crp.Rupture).Width("100px");
cs.ColumnSetting().ColumnKey("Reference").IsFixed(true);
cs.ColumnSetting().ColumnKey("Designation").IsFixed(true);
cs.ColumnSetting().ColumnKey("Famille").IsFixed(true);
cs.ColumnSetting().ColumnKey("Categorie").IsFixed(true);
cs.ColumnSetting().ColumnKey("Puht").IsFixed(true);
cs.ColumnSetting().ColumnKey("Statut").IsFixed(true);
cs.ColumnSetting().ColumnKey("StockFrs").IsFixed(true);
cs.ColumnSetting().ColumnKey("Rupture").IsFixed(true);
cs.ColumnSetting().ColumnKey("FreniteValue").IsFixed(true);
});
features.Paging().Type(OpType.Remote)
.PageSize(ViewBag.PageSize)
.PageSizeList(ViewBag.PageSizeList)
.RecordCountKey("TotalDataCount"); //pointe sur la propriété TotalDataCount de PagedDataListDto
features.Filtering().Type(OpType.Remote).Mode(FilterMode.Simple)
.FilterExprUrlKey(string.Empty); // ne pas oublier de mettre la ExpUrlKey à empty sans quoi le décryptage oData ne fonctionne pas
features.Tooltips().Visibility(TooltipsVisibility.Always)
.CursorLeftOffset(15).Style(TooltipsStyle.Tooltip).ShowDelay(100);
features.Resizing();
})
.DataSourceUrl(Url.Action("IndexListSuivi")) // cette action renvoie une serialization JSon d'un pagedDataListDto
.DataBind()
.Render()
)