Load Column Based On Condition

[Avi Segal]

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]

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> 

 

 

 

https://help.syncfusion.com/api/js/ejgrid#methods:columns 

 

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]

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]

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]

Perfect! 

Thanks,

Avi

[Seeni Sakthi Kumar Seeni Raj]

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.