ControlIgGridPropertiesFromCentralizedLoacation

Ram p posted over 6 years ago

Hi, In our application Many IgGrids are used. But we want maintain and Controlled some of IgGrid Properties From Centralized place.

For Example :

Vartualization property Should be true for all the developed grids. If any one is Creating new grid this property should be True.

Like some of the other properties too should be controlled.

AutoGenerateColumns, VirtualizationMode.

Is there any way to handle this or any workaround.

We are creating grids in the Razor view like below

@(Html.Infragistics().Grid<DataViewModel>
()
.AutoGenerateColumns(false)
.ID("tmeGrid")
.Width("100%")
.Height("400px")
.Virtualization(true)
.VirtualizationMode(VirtualizationMode.Continuous)
.PrimaryKey("Id")
.AlternateRowStyles(true).EnableHoverStyles(true)
.Columns(col =>
{
col.For(x => x.Id).HeaderText("Number").DataType("number").Width("6%").Template("<td actionRootId=${Id} actionTypeId='2' Class='contextCss'>${Id}</td>").GetType();

col.For(x => x.Owner).HeaderText("Owner").Width("10%").Template("<td actionRootId=${Id} actionTypeId='2' class='contextCss'>${Owner}</td>");

col.For(x => x.StatusFormatted).HeaderText("Status").Width("6%").Template("<td actionRootId=${Id} actionTypeId='2' class='contextCss'>${StatusFormatted}</td>");

})
.Features(
features =>
{
features.Sorting().Type(OpType.Remote).Mode(SortingMode.Single);
features.Filtering().Type(OpType.Remote).FilterSummaryAlwaysVisible(false).ShowNullConditions(true).CaseSensitive(false).ShowEmptyConditions(true).Mode(FilterMode.Simple).GetType();
features.Tooltips().Visibility(TooltipsVisibility.Overflow);
features.Selection().Mode(SelectionMode.Row).SkipChildren(true);
features.Resizing();
features.Paging().Type(OpType.Remote).PageSizeList(Model.PaginationConfig.PageSizeOptions).PageSize(Model.PaginationConfig.DefaultPageSize).RecordCountKey("recordCountKey").PageSizeUrlKey("pageSize").PageIndexUrlKey("pageNo").ShowPageSizeDropDown(true).PageSizeDropDownLocation("inpager");
})
.DataSourceUrl(Url.Action("GetItemsData", "View", new { Id = Model.Id}))
.ResponseDataKey("dataList")
.DataBind()
.Render()
)

Thanks

485

Offline Vasil Pavlov posted over 6 years ago

Hello Ram p,

Thank you for posting in our forum.

A possible approach would be to override the igGrid object's prototype on the client side – this would allow you to set default values to the options you mentioned. These options would apply for every igGrid that gets initialized afterwards. There are two important things to note here:

The modification of the igGrid prototype should happen after the infragistics.core.js and infragistics.lob.js scripts have been loaded in the browser, but before the grids have been initialized. Otherwise you would: a) Get an error for trying to modify properties of an object that doesn’t exist yet; b) you would modify the properties of the prototype but the grids would have already been initialized and the changes would not have any effect.
Modifying the prototype would allow you to set default grid options, but doesn’t prevent each grid to override them again upon its initialization – any explicitly set initialization options would take precedence because of the JavaScript’s prototypal inheritance. For example the autoCommit option is disabled for the igGrid by default – meaning its value is “false. The prototype could be modified by using this code: $.ui.igGrid.prototype.options.autoCommit = true; If autoCommit is again set to “false in the grid initialization options, it would take precedence and the grid would still have autoCommit disabled.

Here is a snippet from a sample View file so that you get a better idea of where to override the igGrid prototype:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.lob.js"></script>
    <link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet" />
    <script>
        $.ui.igGrid.prototype.options.autoCommit = true;
        $.ui.igGrid.prototype.options.virtualization = true;
        $.ui.igGrid.prototype.options.virtualizationMode = "continuous";
    </script>
</head>
<body>
	<div>
		@(Html.Infragistics()
        .Grid(Model)
        .ID("grid")
        .Width("100%")
        .Height("600px")
        .PrimaryKey("ProductID")
        .AutoGenerateColumns(false)
        .Columns(column =>
        {
            column.For(x => x.ProductID).HeaderText("Id").Width("20%");
            column.For(x => x.ProductName).HeaderText("Name").Width("50%");
            column.For(x => x.StartDate).HeaderText("Date").DataType("date").Width("30%");
        })
        .Features(features =>
        {
            features.Paging().PageSize(10).Type(OpType.Remote).RecordCountKey("TotalRecordsCount");
            features.Filtering().Type(OpType.Remote).Mode(FilterMode.Simple);
            features.Sorting().Type(OpType.Remote).SortUrlAscValueKey("asc").SortUrlKeyDescValue("desc").SortUrlKey("orderby");
            features.GroupBy().Type(OpType.Remote).GroupByUrlKeyAscValue("asc").GroupByUrlKeyDescValue("desc").GroupByUrlKey("groupBy");
            features.Updating().ColumnSettings(cs =>
            {
                cs.ColumnSetting().ColumnKey("StartDate").EditorType(ColumnEditorType.DatePicker).Required(true).EditorOptions("datepickerOptions: {changeYear: true, changeMonth: true}");
            });
        })
        .DataSourceUrl(Url.Action("GetData1"))
        .ResponseDataKey("Records")
        .Render()
		)
	</div>
</body>
</html>

If you need any additional assistance, feel free to contact me.