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,
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.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://ko.infragistics.com/support
Hi Maya,
I am not using multi column header , that are individual column only.
Thanks,
Vanitha
Hello 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.
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..
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.