Widgets are not showing in browser. Kendo MVC 5

8 posts, 0 answers
  1. Matthew
    Matthew avatar
    8 posts
    Member since:
    Oct 2017

    Posted 13 Oct Link to this post

    I'm having an issue where even in the simplest Kendo UI MVC 5 application I can not see the results of Kendo widgets. I tried using the simple datapicker widget and I don't see the icon to pick the date. And with this autocomplete widget. When uploaded, I don't see a text box to type into. 

     

    @using Kendo.Mvc.UI

    @{ 
        ViewBag.Title = "HomePage";
    }
    @{ 
        var countries = new String[] {
                    "America",
                    "Ansonia",
                    "Latvia",
                    "Italy",
                    "Lithuania"};
            }
    <br/>
    <br />
    <br />
    <br />
    <div>
            @{Html.Kendo().AutoComplete()
                                .Name("myAutoCompletion")
                                .Placeholder("Country")
                                .BindTo(@countries);
            }

    </div>

  2. Nencho
    Admin
    Nencho avatar
    1671 posts

    Posted 17 Oct Link to this post

    Hello Matthew,

    In order to achieve the correct implementation for usage in MVC and proper compilation you should remove the semicolumn from the end of the BindTo declaration. In addition, you should use different brackets for the Html widget encapsulation - @(Html.Kendo()AutoComplete()In other words, you should not encapsulate it in code block but in expression (either explicit or not) Please use the below implementation:


    @(Html.Kendo().AutoComplete()
        .Name("myAutoCompletion")
        .Placeholder("Country")
        .BindTo(@countries)
    )

    In addition, for reference you can observe the implementation in our online demo below:

    http://demos.telerik.com/aspnet-mvc/autocomplete

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Matthew
    Matthew avatar
    8 posts
    Member since:
    Oct 2017

    Posted 17 Oct Link to this post

    Ok I did that. Instead I'm using pie a chart example instead now. 

     

    <div class="demo-section k-content wide">
        @(Html.Kendo().Chart()
            .Name("chart")
                    .Title(title => title
                        .Text("Share of Internet Population Growth, 2007 - 2012")
                        .Position(ChartTitlePosition.Bottom))
            .Legend(legend => legend
                .Visible(false)
            )
            .ChartArea(chart => chart
                .Background("transparent")
             )
            .HtmlAttributes(new { style = "background: center no-repeat url(" + @Url.Content("~/Content/shared/world-map.png") })
            .Series(series =>
            {
                series.Pie(new dynamic[] {
                    new {category="Asia",value=ViewBag.State,color="#9de219"},
                    new {category="Europe",value=ViewBag.State2,color="#90cc38"},

                })
                .Labels(labels => labels
                    .Template("#= category #: \n #= value#%")
                    .Background("transparent")
                    .Visible(true)
                )
                .StartAngle(150);
            })
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0}%")
            )
        )
    </div>

     

    And I see where in the webpage I should see a PieChart. But I don't see a PieChart. Could it simply be I do not have certain files in the wrong location? I didn't have this issue when using the Javascript/Html implementation.

  4. Matthew
    Matthew avatar
    8 posts
    Member since:
    Oct 2017

    Posted 17 Oct Link to this post

    To edit my original post. When simply copying and pasting Kendo.Autocomplete. I'm having an issue where the type into box is showing, but the autocomplete feature isn't working. I followed the setup guide for MVC5, but I still got this error showing in the KendoProblems.png. So in order to get rid of the issue I add @using Kendo.Mvc.UI at the head of the page. That solution got rid of the compile error. Yet, I still can't view anything that Kendo actually does. 
  5. Matthew
    Matthew avatar
    8 posts
    Member since:
    Oct 2017

    Posted 17 Oct Link to this post

    KendoProblems.Png
  6. Matthew
    Matthew avatar
    8 posts
    Member since:
    Oct 2017

    Posted 17 Oct Link to this post

    Can't seem to post that second png file,  but this is the error I was receiving before putting @Kendo.Mvc.UI at the header. 

     

    "HtmlHelper<dynamic>" does not contain a definition for 'Kendo' and no extension method 'Lendo' accepting a first argument of type 'HtmlHelper<dynamic>' could be found (are you missing a using directive or an assembly reference?)

  7. Matthew
    Matthew avatar
    8 posts
    Member since:
    Oct 2017

    Posted 17 Oct Link to this post

    Fixed the issue. In _Layout.cshtml 

     

    <script src="@Url.Content("~/Scripts/kendo/jszip.min.js")"></script>

    was

    <script src="@Url.Content("~/Scripts/kendo/2017.23.4/jszip.min.js")"></script>

    So I updated the path and removed "/2017.23.4". This was due to how the file originally loaded at startup. Not sure how I fell down this rabbit hole, but it's fixed. You can delete this post if you want. Or keep it in case someone else in the future has this issue. 

  8. Nencho
    Admin
    Nencho avatar
    1671 posts

    Posted 18 Oct Link to this post

    Hello Matthew,

    I am happy to see that you were able to pin down the reason for the issue and fix it. There is not need to delete the thread, as there is a chance for someone else in the community to face the same issue.

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top