Script and Link Tag require for Kendo Combo Box

Question

Script and Link Tag require for Kendo Combo Box

529 views Asked by DaminiVyas At 14 June 2020 at 13:31

I have to add a Kendo jQuery combo-box in a partial view, I have followed up this example: https://demos.telerik.com/kendo-ui/combobox/index and added a combo-box from input element and select element.

But the input and select elements are not showing up as combo-box, but showing up their default nature(added image here for reference like the select text/placeholder is not editable)

example.cshtml file:

@model ExampleModel

<div class="demo">
        <h4><label for="fabric">T-shirt Fabric</label></h4>
        <input id="fabric" placeholder="Select fabric..." style="width: 100%;" />

        <h4 style= "margin-top: 2em;" ><label for="size">T-shirt Size</label></h4>
        <select id="size" placeholder="Select size..." style="width: 100%;">
            <option> X - Small </option>
            <option> Small </option>
            <option> Medium </option>
            <option> Large </option>
            <option> X - Large </option>
            <option> 2X-Large</option>
        </select>
 </div>

  <script>
        $(document).ready(function () {
            console.log("inside doc ready");
            $("#fabric").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "Cotton", value: "1" },
                    { text: "Polyester", value: "2" },
                    { text: "Cotton/Polyester", value: "3" },
                    { text: "Rib Knit", value: "4" }
                ],
                filter: "contains",
                suggest: true,
                index: 3
            });

            // create ComboBox from select HTML element
            $("#size").kendoComboBox();
        });
    </script>

I have also followed up with other answers on StackOverflow, but I didn't get a clear picture of what are the references(script & link tags) need to be added and where?

The below script & link tags need to be added, I think so:

 <link rel="stylesheet" href="styles/kendo.common.min.css" />
 <link rel="stylesheet" href="styles/kendo.default.min.css" />
 <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
 <script src="js/jquery.min.js"></script>
 <script src="js/kendo.all.min.js"></script

Original Q&A

There are 2 answers

**Yiyi You** · Answer 1 · 2020-06-15T06:04:18+00:00

I find you put the js code in a partial view,so I think it maybe why you can't show up as a combo-box.

Here is a demo worked.Firstly,I put the css in shared/_layout.cshtml <head></head> and the js in shared/_layout.cshtml <body></body> like this: _layout.cshtml:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - case1_5_26_</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
    @RenderSection("Scripts", required: false)
</body>

And then I put the js code into the Main.cshtml which references a partial view. Main.cshtml:

@{
    ViewData["Title"] = "Main";
}

<h1>Main</h1>


<partial name="_partial" />
@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            console.log("inside doc ready");
            $("#fabric").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "Cotton", value: "1" },
                    { text: "Polyester", value: "2" },
                    { text: "Cotton/Polyester", value: "3" },
                    { text: "Rib Knit", value: "4" }
                ],
                filter: "contains",
                suggest: true,
                index: 3
            });

            // create ComboBox from select HTML element
            $("#size").kendoComboBox();
        });
    </script>
}

_partial.cshtml(in Shared folder):

<div class="demo">
    <h4><label for="fabric">T-shirt Fabric</label></h4>
    <input id="fabric" placeholder="Select fabric..." style="width: 100%;" />

    <h4 style="margin-top: 2em;"><label for="size">T-shirt Size</label></h4>
    <select id="size" placeholder="Select size..." style="width: 100%;">
        <option> X - Small </option>
        <option> Small </option>
        <option> Medium </option>
        <option> Large </option>
        <option> X - Large </option>
        <option> 2X-Large</option>
    </select>
</div>

result:

**DaminiVyas** · Answer 2 · 2020-06-22T14:04:31+00:00

I am adding this code sample here, to help anyone who gets stuck with the same issue. I have added the script and link tags at the top of the partial view:

@model ExampleModel

@{
    Html.AddCssFileParts("~/Themes/Emporium/Content/kendo/kendo.common.min.css");
    Html.AddCssFileParts("~/Themes/Emporium/Content/kendo/kendo.default.min.css");

    Html.AddScriptParts(ResourceLocation.Footer, "~/Themes/Emporium/Content/kendo/kendo.all.min.js");
    Html.AddScriptParts(ResourceLocation.Footer, "~/Themes/Emporium/Content/kendo/kendo.aspnetmvc.min.js");
}

and the div to show up the combo-box:

 <div class="inputs">
                
                <select asp-for="City" id="citiesDropDown"></select>
                @Html.HiddenFor(model => model.City)
    
                <span asp-validation-for="City"></span>
    
                <script type="text/javascript" asp-location="Footer">
                    $(document).ready(function () {
                        debugger
                        // create ComboBox from select HTML element
                        $("#citiesDropDown").kendoComboBox({
                            autoBind: true,
                            filter: "contains",
                            suggest: true,
                            ignoreCase: true,
                            dataTextField: "name",
                            dataValueField: "name",
                            placeholder: "Select city",
                            dataSource: new kendo.data.DataSource({
                                transport: {
                                    read: {
                                        url: "/Country/GetCitiesByStateId",
                                        dataType: "json",
                                        data: {
                                            stateId: function () {
                                                if ("@Model.StateProvinceId" != null && "@Model.StateProvinceId" != "") {
                                                    return "@Model.StateProvinceId"
                                                }                                                 
                                                return "0";
                                            },
                                            addSelectStateItem: true
                                        }
                                    }
                                }
                            }),
                            value: "@Model.City"
                        });
                    });
                </script>
    
            </div>

This will show up the combo-box functionality over the select element. I hope this helps!

TechQA.

Script and Link Tag require for Kendo Combo Box

There are 2 answers

Related Questions in ASP.NET-MVC

Related Questions in ASP.NET-CORE

Related Questions in RAZOR

Related Questions in KENDO-UI

Related Questions in KENDO-COMBOBOX

Popular Questions

Popular Tags

Trending Questions