How to hide / show igGrid column based on condition?

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://www.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 .

Hello vanitha, 

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. 

Best Regards,

Maya Kirova

Infragistics, Inc.

http://www.infragistics.com/support

 

 

Hi Maya,

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

 

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,

 

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:

https://www.igniteui.com/help/iggrid-developing-asp-net-mvc-applications-with-iggrid#syntax-chaining

 

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.

 

Best Regards,

Maya Kirova

Infragistics, Inc.

http://www.infragistics.com/support

Hi Maya,

I am not using multi column header , that are individual column only.

Thanks,

Vanitha

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://www.infragistics.com/support