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

3 posts, 0 answers
  1. Junius
    Junius avatar
    11 posts
    Member since:
    Apr 2018

    Posted 03 Apr Link to this post

    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. Petar
    Admin
    Petar avatar
    134 posts

    Posted 04 Apr Link to this post

    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.
  3. Junius
    Junius avatar
    11 posts
    Member since:
    Apr 2018

    Posted 04 Apr in reply to Petar Link to this post

    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.

Back to Top