How to display Drop Down List's item horizontally like Grid?

[Gangatharan Baskaran]

I need to display drop down list's item horizontally in a row like a grid. There is any sample on how can I achieve this using template. I am looking for something similar to the attached image.  

[Prince Oliver]

Hi Gangatharan, 

Thank you for contacting Syncfusion support. 

We have prepared sample, based on your requirement to display items horizontally in a row like a grid.. We have used DropDownList’s template property and CSS customization to achieve your requirement. Kindly refer to the following code snippet. 

<ej:DropDownList ID="selectColumn" runat="server" Template="<span><span class='ddlcolumn'>${text}</span><span class='ddlpages'>pages</span></span>" WatermarkText="Select the column" Width="600px" PopupHeight="500px" PopupWidth="600px" ClientSideOnCreate ="onCreate" ClientSideOnChange="onChange"> 

    </ej:DropDownList> 

<script> 

    var ddlobj; 

    function onCreate(e) { 

        ddlobj = $("#<%=selectColumn.ClientID%>").data("ejDropDownList"); 

        var dateSpan = document.createElement('span'); 

        dateSpan.setAttribute("id", ddlobj._id + "_valueSpan"); 

        dateSpan.setAttribute("class", "e-valTemp"); 

        $(dateSpan).insertBefore(ddlobj.element); 

    } 

    function onChange(e) { 

        var page = "<span class='pagevaluetemp'>page</span>" 

        ddlobj.wrapper.find('.e-valTemp')[0].innerHTML = e.selectedText + page; 

    } 

</script> 

<style> 

    .e-ddl-popup div>ul li { 

    display: inline-flex; 

    width: 110px; 

    padding: 10px 5px 5px 5px; 

} 

    .e-ddl-popup div>ul li.e-hover{ 

        width: 100px; 

        padding: 10px 5px 5px 5px; 

    } 

.e-valTemp { 

    line-height: 28px; 

    padding-left: 10px; 

    font-weight: 300; 

} 

.pagevaluetemp { 

    padding: 3px; 

} 

 

.ddlcolumn { 

    display: block; 

    font-weight: 600; 

} 

.ddlpages { 

    color: darkgray; 

} 

</style> 

We have attached a sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/directtrac/140579/ze/DropDown1353983443  

Please let us know if you require any further assistance on this. 

Regards, 

Prince