This is a migrated thread and some comments may be shown as answers.

Widgets are not showing in browser. Kendo MVC 5

7 Answers 257 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 13 Oct 2017, 02:14 PM

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>

7 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 17 Oct 2017, 07:05 AM
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.
0
Matthew
Top achievements
Rank 1
answered on 17 Oct 2017, 12:52 PM

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.

0
Matthew
Top achievements
Rank 1
answered on 17 Oct 2017, 01:00 PM
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. 
0
Matthew
Top achievements
Rank 1
answered on 17 Oct 2017, 01:00 PM
KendoProblems.Png
0
Matthew
Top achievements
Rank 1
answered on 17 Oct 2017, 01:03 PM

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?)

0
Matthew
Top achievements
Rank 1
answered on 17 Oct 2017, 02:11 PM

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. 

0
Nencho
Telerik team
answered on 18 Oct 2017, 11:19 AM
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.
Tags
General Discussions
Asked by
Matthew
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Matthew
Top achievements
Rank 1
Share this question
or