Hello there,
I'm trying to set the width of a column on a Grid conditionally but struggling with binding on the events to do so.
Context: Razor views/MVC 5
The condition is a property on the c# Model on the page. i.e. Model.ShowColumn.
This is the setup of the grid.
@(Html.Infragistics().Grid<AddressGridRowViewModel>() .ID(Model.GridId) .Defaults() .Render() )
I've tried a few things to bind onto this and then set the width of the column to 0 (i.e. not show it) but with no luck.
Method 1
$('#@Model.GridId').on("iggridrendering", function (evt, ui) { var message = "iggridrendering"; console.log(message); debugger; });
Method 2
$('#@Model.GridId').igGrid({ rendered: function (evt, ui) { var isProductionSite = '@Model.IsProductionSite' == '@true'; if (isProductionSite) { debugger;
var cols = $('#@Model.GridId').igGrid("option", "columns");
var addressTypeColumn = _.findWhere(cols, { key: "AddressType" }); addressTypeColumn.width = 0; } } });
Please advise.
Hello Jagdib,
To add a function to be executed on a certain event in the MVC igGrid add the following code before the grid definition:
<script> $(document).delegate("#grid", "iggriddatarendering", function (evt, ui) { var columns = $("#grid").igGrid("option", "column"); //code... }</script>
Please feel free to contact me if you need further assistance.
Regards,Ivaylo HubenovEntry-level developer
I just tried your second method "dataRendering" and I've had no luck. It still shows.
$('#@Model.GridId').igGrid({ dataRendering: function (evt, ui) { debugger;
var cols = $('#@Model.GridId').igGrid("option", "columns"); for (var i = 0 ; i < cols.length ; i++) { if (cols[i].key == "AddressType") { cols[i].hidden = true; } } } });
$(function () { $('#@Model.GridId').initIgniteUiGrid({ dataSourceUrl: '@Url.Action("GridDataSource", new { organisationId = Model.OrganisationId })' }).igGrid('openPaneOnRowDoubleClick', '@Url.Action("Pane", "Address")'); });
Hello Jagdip,
Setting a column in the igGrid to hidden should happen before the data is rendered. To do so, either set the column's "hidden" attribute to true on the column definition:
$("#grid").igGrid({ columns: [ ... , { key: "HiddenCol", dataType: "string", hidden: true }, ... ]});
Or change the hidden attribute of a certain column on dataRendering event. For example:
$("#grid").igGrid({ ... dataRendering: function (evt, ui) { var columns = $("#grid").igGrid("option", "columns"); for (var i = 0 ; i < columns.length ; i++) { if(columns[i].key == "HiddenCol") { columns[i].hidden = true; } } }});
Please feel free to contact me if you have further questions.