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
40
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()
)

Parents
  • 1320
    Offline posted

    Hello,

    After investigating this further, I determined that your requirement could be achieved using the igGrid property scrollLeft with number as an argument. This number represents the position of the horizontal scroll bar. This property could not be set on initialization, because when columns are fixed scrollPosition should be set to null. However, scrollLeft could be set when the grid is rendered in the document ready handler. For example:

    <script>

    $(document).ready(function (evt, ui) {

                    $("#grid").igGrid("option", "scrollSettings", { scrollLeft: 100 });

                            });

        </script>

    Attached you will find a small html sample illustrating my suggestion. The same approach can be applied in an MVC scenario.

    Please test my suggestion on your side and let me know if you need any further assistance with this matter.

    Regards,
    Monika Kirkova,
    InfragisticsigGridScrollUnfixedColumns.zip

Reply Children