We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Load Column Based On Condition

Thread ID:

Created:

Updated:

Platform:

Replies:

129738 Mar 31,2017 10:17 AM UTC Apr 5,2017 05:25 AM UTC ASP.NET MVC 5
loading
Tags: Grid
Avi Segal
Asked On March 31, 2017 10:17 AM UTC

Hi,

Is it possible to load a column in the grid based on a form control.

i.e. If the checkbox is checked then the grid loads the extra column?

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On April 3, 2017 08:56 AM UTC

Hi Customer,  
 
We can add or remove any number of columns in the Grid using the columns method of the Grid. Refer to the following code example and API Reference. 
 
@using (Html.BeginForm("FormTwo", "Form", FormMethod.Post)) 
{ 
    
    @Html.EJ().CheckBox("chk").ClientSideEvents(events => events.Change("change")); 
} 
 
 
 
@(Html.EJ().Grid<object>("Grid") 
        .Columns(col => 
        { 
            col.Field("OrderID").Add(); 
               . ..  
        }) 
) 
 
 
<script> 
    function change(args) { 
        if (args.checkState == "check") 
            $("#Grid").ejGrid("columns", [{ field: "OrderDate" }], "add"); 
        else 
            $("#Grid").ejGrid("columns", [{ field: "OrderDate" }], "remove"); 
    } 
</script> 
 
 

 
 
In the above code example, based on the checkbox state, columns in the Grid will be added/removed. 
 
Regards,  
Seeni Sakthi Kumar S. 


Avi Segal
Replied On April 3, 2017 03:58 PM UTC

Thanks for that.

How can I add the other row parameters? See example below.

col.Field("SKU").HeaderText("SKU").Width(100).DataSource(ViewData("StockItems")).EditType(EditingType.Dropdown).AllowEditing(True).TextAlign(TextAlign.Center).Add()

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On April 4, 2017 10:06 AM UTC

Hi Customer,  
 
We can include all the parameters of the columns such field, headerText, editType in the columns method as an array of object. Refer to the following code example.  
 
@using (Html.BeginForm("FormTwo", "Form", FormMethod.Post)) 
{ 
 
    @Html.EJ().CheckBox("chk").ClientSideEvents(events => events.Change("change")); 
} 
 
 
 
@(Html.EJ().Grid<object>("Grid") 
        .Columns(col => 
        { 
            col.Field("OrderID").Add(); 
               . . . 
                     . . . 
        }) 
) 
 
 
<script> 
    var dropData = @Html.Raw(Json.Encode(ViewData["StockItems"])); 
    function change(args) { 
        if (args.checkState == "check") 
            //include columns as array of Object 
            $("#Grid").ejGrid("columns", [ 
                { 
                    field: "SKU", headerText: "SKU", width: 100, 
                    dataSource: dropData, editType: ej.Grid.EditingType.Dropdown, 
                    allowEditing: true, textAlign: ej.TextAlign.Right 
                } 
            ], "add"); 
        else 
            $("#Grid").ejGrid("columns", [{ field: "SKU" }], "remove"); 
    } 
 
</script> 
 
 
 
 
Regards,  
Seeni Sakthi Kumar S. 


Avi Segal
Replied On April 4, 2017 10:30 AM UTC

Perfect! 

Thanks,

Avi

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On April 5, 2017 05:25 AM UTC

Hi Customer,  
 
Thanks for the update. 
 
We are happy to hear that your requirement has been resolved. Please get back to us, if you require further assistance on this. 
 
Regards,  
Seeni Sakthi Kumar S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;