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.
Unfortunately, activation email could not send to your email. Please try again.

Load Column Based On Condition

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 04:56 AM

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 11:58 AM

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 06:06 AM

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 06:30 AM

Perfect! 

Thanks,

Avi

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

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.

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.

;