Kendo Wizard Trouble with including a dropdown right next to a kendo textbox

[Khalipha]

Hello, I am running into issues with my kendo wizard and within one step of the kendo wizard I want to add in a dropdown right next to my kendo textbox so it looks like this where the dropdown is right next to the textbox I added above the combo box. I tried using the 

s.Add<ReferralModelLite>()
    .Title("Clinic Selection")
    .Form(f => f
        .Validatable(v => v.ValidateOnBlur(true))
        .Layout("grid")
        .Grid(g => g.Cols(3).Gutter(12))
        .FormData(Model)
        .Items(items =>
        {
            // Add Kendo TextBox above the ComboBox
            items.Add().Field("ClinicSearchText")
                .Label(l => l.Text("Search for Nearby Facilities by Address:"))
                .ColSpan(2)
                .Editor(e => e.TextBox()
                    .Placeholder("Type to search clinics by address...")
                    .HtmlAttributes(new { @class = "input-wide", @style = "width: 100%;" })
                );

            items.Add().Field(m => m.ClinicReferralId)
                .Label(l => l.Text("Select Clinic:"))
                .ColSpan(2) // Not full width, adjust as needed
                .Editor(e => e.ComboBox()
                    .Placeholder("Select or type a clinic...")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .Filter("contains")
                    .Suggest(true)
                    .DataSource(ds => ds.Read("GetClinicsSelectItems", "Clinic"))
                    .HtmlAttributes(new { @style = "width: 100%;" })
                );

here are the implementations I tried that gave me errors or undesirable effects. 

@(Html.Kendo().Wizard()
    .Name("intake-referral-wizard")
    .Steps(steps =>
    {
        steps.Add().Title("Clinic Selection").Content(@<text>
            <div style="display: flex; align-items: center; gap: 8px;">
                @(Html.Kendo().TextBox()
                    .Name("ClinicSearchText")
                    .Placeholder("Type to search clinics by address...")
                    .HtmlAttributes(new { @class = "input-wide", style = "width: 250px;" })
                )
                @(Html.Kendo().DropDownList()
                    .Name("ClinicSearchCount")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new[] {
                        new { Text = "5", Value = "5" },
                        new { Text = "10", Value = "10" },
                        new { Text = "20", Value = "20" },
                        new { Text = "50", Value = "50" },
                        new { Text = "100", Value = "100" }
                    })
                    .Value("10")
                    .HtmlAttributes(new { style = "width: 80px;" })
                )
            </div>
            <!-- Add any other controls or markup for this step below -->
        </text>);
        // Add more steps as needed...
    })
)

(this led to syntax errors)

items.Add().Field("ClinicSearchText")
    .Label(l => l.Text("Search for Nearby Facilities by Address:"))
    .ColSpan(2)
    .EditorTemplate("ClinicSearchWithCount");

this editor template implementation while not yielding errors just displayed the word ClinicSearchWithCount where the template should have gone. 

Help with this would be greatly appreciated. 

[Eyup]

Hi Khalipha,

 

Thank you for reaching out.

The provided code is correct and produces the following result on my side:

Can you verify that you are using the latest version?

    <link href="https://kendo.cdn.telerik.com/themes/12.0.0/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
	<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    <script src="~/js/pdfjs.min.js"></script>
    <script src="~/js/pdfjs.worker.min.js"></script>
	<script src="https://cdn.kendostatic.com/2025.3.825/js/kendo.all.min.js"></script>
	<script src="https://cdn.kendostatic.com/2025.3.825/js/kendo.aspnetmvc.min.js"></script>

 

Regards,
Eyup
Progress Telerik