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.
Syncfusion Feedback

Dinamically hide/display cell content in Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

121054 Nov 6,2015 10:47 AM UTC Nov 12,2015 01:46 PM UTC JavaScript 3
loading
Tags: ejGrid
Madawa Wipulaguna
Asked On November 6, 2015 10:47 AM UTC

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 [Syncfusion]
Replied On November 9, 2015 07:06 AM UTC

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
Replied On November 10, 2015 02:31 PM UTC

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 [Syncfusion]
Replied On November 12, 2015 01:46 PM UTC

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.

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

;