This is a migrated thread and some comments may be shown as answers.

how to remove underline in multi column combo box via css?

2 Answers 74 Views
MultiColumnComboBox
This is a migrated thread and some comments may be shown as answers.
Junius
Top achievements
Rank 2
Junius asked on 04 Apr 2019, 01:43 AM

Hi there,

I have a MultiColumnComboBox which is configure as follows:

sample multicolumn comboBox instantiation with odata as data source.

<html>
   <body>
       <div>
            <input id="hierarchySelector" style="width: 100%" />
       </div>
   </body>
 
   <script>
        var $hierarchySelector = $("#hierarchySelector");
 
        $(document).ready(function() {
        var hierarchySelector = $hierarchySelector.kendoMultiColumnComboBox({
            autoBind: true,
            dataTextField: 'Name',
            dataValueField: 'EntityHierarchyId',
            optionLabel: {
                rmx_Name: '--Select value--',
                rmx_EntityHierarchyId: null
            },
            width: '100%',
            columns: new Function("return [{field:'Code', width:200, title:'Code'},{field:'Name', title:'Name', width:300}];")(),
            footerTemplate: 'Total #: instance.dataSource.total() # items found',
            change: function(e) {
                console.log("change hierarchySelector");
            },
            dataBound: function(e) {
                if (!InitCodeExecuted) {
                    InitCodeExecuted = true;
                    $('#toggleHierarchyType_buttonGrp_0').click();
                }
            },
            dataSource: new kendo.data.DataSource({
                type: 'odata-v4',
                error: odataError,
                transport: {
                    read: {
                        url: hierararchyBaseUrl +
                            '?$select=EntityHierarchyId,Code,Name,HierarchyType,RelationshipFilterId&$orderby=Name&$filter=az_State eq 2',
                        headers: window['authenticationBearerToken'],
                        data: function() {
                            var cid = getQueryStringParam('cid');
                            if(cid != null) return { cid: cid };
                        }
                    },
                    parameterMap: function(options, type) {
                        return kendo.data.transports['odata-v4'].parameterMap(options, type);
                    }
                }
            })
        });
    });
   </script>
</html>

 

The code above works and populates with data.  But, the issue that I'm facing is the output (as seen on the attached image file).

An underline (probably border) on each row is visible and doesn't look good.  I checked the underlying elements, which is

<ul><li>

and the styles it applies but I couldn't find any css rule / property that relates to the visible horizontal line of each row.

Could someone point me to the right css rule that I can override with?

 

Any inputs are greatly appreciated.

2 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 04 Apr 2019, 03:02 PM
Hi Junius,

As we don't have access to your data and cannot populate the same MultiColumnComoBox we will use this example from our demo to illustrate how you can remove the horizontal line under each row.  

The CSS code snippet that should work for your issue is: 
.k-grid-list > .k-item > .k-cell {
      border-bottom: 0px;
  }

You can see this Dojo in which the above code is added to the provided example at the beginning. As you can see the horizontal lines under each row are missing in the Dojo example. 

I hope that the provided solution is one that fixes your issue.
If you need further assistance, do not hesitate to contact us.
 
Regards,
Petar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Junius
Top achievements
Rank 2
answered on 04 Apr 2019, 08:11 PM

Hi Petar,

I tried your CSS code snippet and it works.  The bottom border line has now been removed in my MultiColumnComboBox.

Thank you so much. I really appreciate your help.

Tags
MultiColumnComboBox
Asked by
Junius
Top achievements
Rank 2
Answers by
Petar
Telerik team
Junius
Top achievements
Rank 2
Share this question
or