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() )
Hello,
I am glad that you were able to solve your issue.
Thank you for using Infragistics components.
Regards,
Monika Kirkova,
Infragistics
Hi Monika,
I managed to scrollleft by using the code below:
$("#gridSuiviPlanning").igGrid("scrollContainer").scrollLeft(950);
Can you close this case ?Thank you so much.
I added your code in my Js file, it went well the line of codes but the scroll does not move.
(function ($, undefined) { $.ig.loader(function () { $(document).ready(function (evt, ui) { var newSettings = { scrollTop: 800, scrollLeft: 800 } $(gridSuiviPlanning).igGrid("option", "scrollSettings", newSettings); //var dataSource = $(gridSuiviPlanning).igGrid("option", "scrollSettings"); }); } )
Do you have any ideas, please ?
Thank you.
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