Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Veena
185
Grouping Customization - Layout changes
posted

Hi,

Need help in customizing the IgGrid. Additional information is available in attached document.

We want IgGrid layout similar to the first screenshot attached in the document.

Questions:

  1. How can I remove the “Drag a column here or select columns to group By” Text along with the selection button available in top  left hand side  of the screen shot 2.
  2. Is there a way to remove collapse/expand all icon and have our custom text displayed there?

       3. When I set the ShowHeader property to false, the grid alignment is going for a toss.

 

 

_$displayTitleAndFootageGrid.igGrid({

                autoGenerateColumns:false,

                height:"275px",

                width:"1190px",

                alternateRowStyles:false,

                primaryKey:'PrimarydisplayKey',

                columns: [

                    { headerText:"", key: "PrimarydisplayKey", dataType: "string", width: '0px', hidden: true },

                    { headerText:"", key: "DisplayTitle", dataType: "string", width: "300px", hidden: true },

                    { headerText:"", key: "PreDisplayVersionId1", dataType: "string", width: '1px' },

                    { headerText:"", key: "RevisedReissuedComboIndicatorValue", dataType: "string", width: "60px", formatter: gridHelper.revisedReissuedComboIndicatorValue },

                    { headerText:"  ", key: "PredisplayKey1", width: "25px", formatter: _buildCheckBox },

                    { headerText:"        ", key: "FootageSize1", width: "110px", dataType: "string", formatter: _footageFormatter },

                    { headerText:"", key: "PredisplayKey2", width: "25px", formatter: _buildCheckBox },

                    { headerText:"        ", key: "FootageSize2", dataType: "string", width: "110px", formatter: _footageFormatter }

                ],

                features: [

                                        {name:'GroupBy',

                                            columnSettings: [

                                                {

                                                    columnKey:"DisplayTitle",

                                                    isGroupBy:true,

                                                    groupComparerFunction: _groupByDisplayTitle

                                                }

                                            ]

                                        }

                ],

Thanks in advance for your support,

Veena

Required Grid Layout.zip
  • 20255
    Offline posted

    Hello,

     Thank you for contacting us!
     Below you can find the answers for your questions:


     1. You can change the text of the GroupBy Area with property emptyGroupByAreaContent, although if you want to hide the whole area, this is not possible by design. You can do it by using simple jQuery selector that will hide this area like is shown in the sample:

    $(".ui-iggrid-groupbyarea").hide();

     2. In order to change the default images my suggestion is to override default classes .ui-icon-plus and minus and in there to change the position to a new part of the ui-icons_222222_256x240.png file that is used.

     In order to change the text my suggestion is to append a new div on every expand/collapse button click.
     
    We do not provide such option to change the icon/text of the expand and collapse button so you will need to my suggestion is to use jQuary as I am showing to you in the sample:

    $($(".ui-iggrid-expandcolumn")).on("click", function (evt, ui) {
     $(this).empty();

     var expanded = $(this).attr("expanded");
     if (expanded == null || expanded == "true") {
      var $newdiv = $("<div id='dvExpand'>Exp</div>");
      $(this).append($newdiv);
      $(this).attr("expanded", false);

     } else {
      var $newdiv = $("<div id='dvCollapse'>Coll</div>");
      $(this).append($newdiv);
      $(this).attr("expanded", true)
     }
    });
       
       
    <style>
     .ui-icon-plus {
      background-position: -160px -128px;
      /*Blank image*/
      /*background-position: -180px 0px;*/
     }
     .ui-icon-minus {
      background-position: -191px -128px;
      /*Blank image*/
      /*background-position: -180px 0px;*/
     }
    </style>
       
       
     3. It is not recommended to hide the headers because as you can see from the provided sample the grid is difficult to understand and orient through its data.

    CustomizeGrid.zip