I want to show or hide the columns in iggrid based on condition (i.e radio button click) in page load and runtime also.
I am using ignite ui version 16.1.20161.2145.
Hello vanitha,
Thank you for posting in our forum.
If you want to initially hide some columns based on a condition you can set the related columns’ hidden option based on that condition:
https://www.igniteui.com/help/api/2017.2/ui.iggrid#options:columns.hidden
The igGrid has two API methods for showing/hiding columns runtime, which you can also use:
https://www.igniteui.com/help/api/2017.2/ui.iggrid#methods:hideColumn
https://www.igniteui.com/help/api/2017.2/ui.iggrid#methods:showColumn
Let me know if you have any additional questions or concerns on how set the options or how to use the show/hide API methods.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://es.infragistics.com/support
Hi Maya,
Show / Hide columns are working fine but the values in those columns are not persisting.
For eg, when I change the radio button, column value in current row only changed as per radio button, but it is not binding the column value for existing row. it is in empty and if I click the existing row then the value will be populated.
how to resolve this one .
Showing/Hiding column should not affect the grid’s data in any way.
You can refer to the following jsfiddle example:
http://jsfiddle.net/1krLwpsh/ Where the fist column can be hidden/shown using the API methods via the button. Note that the data is not affected by the hiding/showing operations.
Please test this on your PC; whether or not it works correctly may help indicate the nature of this problem.
If it’s working correctly, this indicates a possible problem in the code of your application. It will help if you can provide a small, isolated sample application that demonstrates the behavior you are seeing.
Or, if this sample is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
Please let me know if I can provide any further assistance.
please find my sample code. I want to show the grid data (mobileno or email id) based on radio button and which is to be populated based on userid combo selection
// Radio Button
<%= Html.Label("Contact Type In :", new { @Class="page-section-field-label-style"}) %><input id="radm" type="radio" class="Contact" name="Contact" value="Mobile" onclick = "clickAction(this)" checked="checked"/>Mobile<input id="rade" type="radio" class="Contact" name="Contact" value="Email" onclick ="clickAction(this)" />Email
// Grid <%= Html.Infragistics().Grid<Infragistics.Web.Mvc.GridModel>() .ID("gridUserInformation") .Height("200px") .Width("990px") .PrimaryKey("UserId") .AutoCommit(false) .AutoGenerateColumns(false) .AutoAdjustHeight(true) .Columns(c => { c.MultiColumnHeader("UserId").HeaderText("USer Id").Format("string"); c.MultiColumnHeader("UserName").HeaderText("User Name").Format("string"); c.MultiColumnHeader("Mobile").HeaderText("Mobile No").Format("string"); c.MultiColumnHeader("Email").HeaderText("Email Id").Format("string"); }) .Features(feature => { feature.Paging().Type(OpType.Local).ShowPageSizeDropDown(false).PageSize(10); feature.Resizing(); feature.Hiding().ColumnSettings( settings => { settings.ColumnSetting().ColumnKey("UserId").Hidden(false).AllowHiding(false); settings.ColumnSetting().ColumnKey("UserName").Hidden(false).AllowHiding(false); settings.ColumnSetting().ColumnKey("Mobile").Hidden(false).AllowHiding(false); settings.ColumnSetting().ColumnKey("Email").Hidden(false).AllowHiding(false); }); feature.Updating()
.EnableAddRow(true) .EditMode(GridEditMode.Row) .StartEditTriggers(GridStartEditTriggers.Click) .EnableDeleteRow(true) .AddRowLabel("Add new User") .ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("UserId").EditorType(ColumnEditorType.Combo) .Required(true) .ComboEditorOptions(co => co.DataSource(Model.Users) .ValueKey("Value") .TextKey("Text") .EnableClearButton(false) .ID("cmbUserId") .AddClientEvent("selectionChanged", "UserIdChange") .DropDownWidth(100) .CompactData(false) .EnableClearButton(false)); cs.ColumnSetting().ColumnKey("UserName").EditorType(ColumnEditorType.Text); cs.ColumnSetting().ColumnKey("Mobile").EditorType(ColumnEditorType.Text); cs.ColumnSetting().ColumnKey("Email").EditorType(ColumnEditorType.Text); }); feature.Selection().Mode(SelectionMode.Row); feature.Sorting(); }) .DataSource(Model.UserGrid.DataSource) .DataBind() .Render() %>
// Radio button click
function clickAction(contact) { var val = contact.value; if (val == "Mobile") { $("#gridUserInformation").igGrid("showColumn", "Mobile"); $("#gridStockInformation").igGrid("hideColumn", "Email"); } else { $("#gridUserInformation").igGrid("showColumn", "Email"); $("#gridStockInformation").igGrid("hideColumn", "Mobile"); } }
// Combochange in grid
function UserIdChange(evt, ui) { var userId= ui.items[0].data.Value; if ($("input[type='radio'].contact").is(':checked')) { var cval = $("input[type='radio'].contact:checked").val(); } //Passing selected value to the controller and retriving json object $.getJSON('GetContactData', { id: userId, contacttype: cval}, function (data) { if (cval == "Mobile") { var m = $("#gridUserInformation").igGridUpdating("editorForKey", "Mobile"); m.igTextEditor("value", data[0]); } else { var email = $("#gridUserInformation").igGridUpdating("editorForKey", "Email"); email.igTextEditor("value", data[1]); }
if I assign values for both in combo userid change, based on radiobutton value it is getting following error : cannot call methods on igtexteditor prior to initialization, attempted to call method 'value'.
please help on this..
Hello Vanitha,
Please refer to the following column declarations from your code snippet:
.Columns(c => { c.MultiColumnHeader("UserId").HeaderText("USer Id").Format("string"); c.MultiColumnHeader("UserName").HeaderText("User Name").Format("string"); c.MultiColumnHeader("Mobile").HeaderText("Mobile No").Format("string"); c.MultiColumnHeader("Email").HeaderText("Email Id").Format("string");
});
Please note that the MultiColumnHeader declaration indicates that a multi-column header will be created.They serve as a group headers for the actual data columns but are not data columns themselves.You can read more about the multi-column headers here:
https://www.igniteui.com/help/iggrid-multicolumnheaders-configuring
If you wish to define data columns you can do so with the chaining syntax described in the documentation link I’ve previously provided you. Here’s an example:
@(Html.Infragistics()
.Grid(Model)
.AutoGenerateColumns(false)
.Columns(column => {
column.For(x => x.Name).HeaderText("Full Name");
column.For(x => x.Age).HeaderText("Age");
})
…
Please read through the documention as it contains code snippets and detailed explanations you may find useful when configuring your grid:
https://www.igniteui.com/help/iggrid-developing-asp-net-mvc-applications-with-iggrid#syntax-chaining
Let me know if you have any questions or concerns.
I am not using multi column header , that are individual column only.
Thanks,
Vanitha
It appears that the columns you’re defining are multi-column headers and not normal data columns.
Those types of columns are not bound to any data, hence will not works as expected with the Updating feature.
I suggest you refer to the following topic, that gives an example on how to define an igGrid in a MVC application:
And follow the steps defined there in order to defined and set your columns as data columns.
Let me know if you have any questions.