Dinamically hide/display cell content in Grid

[Madawa Wipulaguna]

Hi,

   I have created a grid with different types columns. Say Column 3 has a drop down, column 4 has a numeric edit, column 5 has another drop down.
Col3 dropdown has 2 values to select from 'text' or 'Number'. If we select 'text' on Col3 I need to display Col4 numeric edit and hide Col5 Drop down. And if I select 'Number' from Col3, I need to hide Col4 numeric edit and display Col5Drop down.
I have prepared a sample with how I have implemented the grid so far. Please have a look at it and let me know how can I achieve the above scenario.  http://jsplayground.syncfusion.com/mat2zcpc
I was looking to bind an 'on change' event to the datatype drop down and set hide/show properties on other controlers. But couldn't find a proper way to do that.

Best Regards,
Madawa

[Balaji Marimuthu]

Hi Madawa,

Thanks for contacting Syncfusion support.
Your requirement is achieved using the change event in DropDownList. Refer to the sample and code example as below.
Jsplaygroundsample: http://jsplayground.syncfusion.com/lwnnaibz

actionComplete: function (args) {

                   

                    if (args.requestType == "add") {  //add records

                        $("#GriddataType").ejDropDownList({ 'change': 'onchange' })

                        var drpdwn1 = this.getContentTable(".gridfrom").find("#GriddataType").ejDropDownList("instance");

                        drpdwn1.setSelectedValue(1);

                        var drpdwn2 = this.getContentTable(".gridfrom").find("#GridaggregationType").ejDropDownList("instance");

                        drpdwn2.setSelectedValue(1);

                    }

                },

function onchange(args) {

            if (args.selectedText == "Text") {

                $("#GridaggregationType").ejDropDownList("disable")

                $('#Gridmaximumfieldlength').ejNumericTextbox('enable')

            }

            else if(args.selectedText == "Number"){

                $('#Gridmaximumfieldlength').ejNumericTextbox('disable')

                $("#GridaggregationType").ejDropDownList("enable")

            }

               

        }

Set the isPrimaryKey property as true to the primary key Column in Grid to perform Editing Operation. Refer to the Knowledgebase Document in following link.
https://www.syncfusion.com/kb/2675/cant-edit-any-row-except-the-first-row-in-grid

$("#Grid").ejGrid({

                dataSource: data,

                allowPaging: true,

                . . . .

                columns: [

                        { field: "metricfieldname", headerText: "Metric Name", isPrimaryKey:true, editType: ej.Grid.EditingType.String, width: 100 },

                                               

                ]

            });

Change event triggers only if the value of DropDownList has been changed, so while edit the records the change event is not triggered. Refer to the code example as below to achieve the same in edit operation.

actionComplete: function (args) {

                    if (args.requestType == "beginedit") {  //edit records

                        var args = {};

                        args.selectedText = $("#GriddataType").ejDropDownList("getValue"); //get value of selected text

                        onchange(args);

                    }

                                    },

Refer to the Helpdocument:
http://help.syncfusion.com/js/api/ejgrid#events:actioncomplete
http://help.syncfusion.com/js/api/ejdropdownlist#events:change

In above method, we have disabled the other controls depends on col3 dropdown value. To hide the corresponding cell depend on col3 value, we suggest you to use the Dialog Edit Mode in Grid. Refer to the sample and code example as below.
Sample: http://jsplayground.syncfusion.com/udteezaa

$(function () {

            var data = null;

            $("#Grid").ejGrid({

                dataSource: data,

                allowPaging: true,

                allowSorting: true,

                allowGrouping: true,

                actionComplete: function (args) {

                    if (args.requestType == "beginedit") {

                        var args = {};

                        args.selectedText = $("#GriddataType").ejDropDownList("getValue");

                        onchange(args);

                        $("#GriddataType").ejDropDownList({ 'change': 'onchange' })

                    }

                    if (args.requestType == "add") {

                        $("#GriddataType").ejDropDownList({ 'change': 'onchange' })

                        var drpdwn1 = $("#GriddataType").ejDropDownList("instance");

                        drpdwn1.setSelectedValue(1);

                        var drpdwn2 = $("#GridaggregationType").ejDropDownList("instance");

                        drpdwn2.setSelectedValue(1);

                    }

                },

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "dialog" },

                

            });

           

        });

        function onchange(args) {

            if (args.selectedText == "Text") {

                $("#GridaggregationType").closest('tr').hide();

                $('#Gridmaximumfieldlength').closest('tr').show();

            }

            else if(args.selectedText == "Number"){

                $('#Gridmaximumfieldlength').closest('tr').hide();

                $("#GridaggregationType").closest('tr').show();

            }

              

        }
    </script>

If we misunderstood your requirement, kindly share us how you want to hide the col4 and col5 controls in Grid.
Regards,
Balaji Marimuthu

[Madawa Wipulaguna]

Thank you Balaji for the solutions,

The first option is what we are looking for. It is better if there is a way to hide the cell components rather than disabling within the grid.
The other thing is when cell content (drop down) is disabled, then the record shouldn't contain a value for the disabled column once saved. Do we have to remove the values manually from the data object under actionComplete function? Or is there any better way to do that?

[Jayaprakash Kamaraj]

Hi Madawa,

Query1 : if there is a way to hide the cell components rather than disabling within the grid

To hide the cell components rather than disabling with in the Grid, use template editing mode as suggested in the previous update since in  normal editing if we hide some particular cell means misalignment occurs in Grid.
Query 2: we have to remove the values manually from the data object under actionComplete function. 

We suggest you to use actionBegin event and check the condition requestType as save in this event and we have removed the values manually. Please refer to the code example,

Code Example:

actionBegin: function(args){

                           if(args.requestType == "save"){

                           if(args.data && args.data.dataType == 1)

                                         delete args.data.maximumfieldlength

                                         }
                           },

Regards,

Jayaprakash K.