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
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.
Petar
Progress Telerik
Rank 2
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.