Kendo.Mvc version mismatch with System.Web.Mvc

[Raja]

Hello,

I am trying to create new Telerik C# ASP.NET MVC Application using VSD version 2019.  After project created, Under Reference folder system loaded Kendo.Mvc & System.Web.Mvc DLLs are added.  System.Web.Mvc version 5.2.9.0. Kendo.Mvc version 5.2.7.0.

when I used  @(Html.Kendo() - gives an below error

Warning CS1702 Assuming assembly reference 'System.Web.Mvc, Version=5.2.7.0, Culture=neutral, 
PublicKeyToken=31bf3856ad364e35' used by 'Kendo.Mvc' 
matches identity 'System.Web.Mvc, Version=5.2.9.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' of 'System.Web.Mvc',
 you may need to supply runtime policy 3_Views_Home_Index.cshtml

Could you please help, how to get Kendo.Mvc using System.Web.Mvc version 5.2.9.0

Thanks in advance for help.

Raja

 

 

 

 

[Eyup]

Hello Raja,

 

Thank you for contacting us.

This should work by default with a more recent version.

Try to upgrade to a newer version and create a new Telerik ASP.NET MVC C# project in the New Project menu of Visual Studio. Then, select the Grid&Menu option. You will have every reference and dependency automatically loaded in this new web app:

For a base reference, I am also sending a fully runnable MVC sample.

 

Regards,
Eyup
Progress Telerik

[Raja]

Hi Eyup,

Thanks for help. I am able to load new DLL and able to add Kendo UI. However I got stuck when try to execute script function from drop down list & Grid combination.  Looks like my functions are not enabled. When I select drop down list, event "OnCompanyChange" is not invoked. 

 

Here is my code.

 

 

 

@using LicenseSearch.Models
@model List<LicenseSearch.Models.LicenseSearchModel>


@{
    ViewBag.Title = "LicenseSearchGrid";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="k-d-flex k-justify-content-center" style="padding-top: 54px;">
    <div class="k-w-300">
        <table>
            <tr>
                <td>
                    <h4>License Search</h4>
                </td>
            </tr>
        </table>
    </div>
</div>

<div class="k-d-flex k-justify-content-center" style="padding-top: 54px;">
    <div class="k-w-300">
        <table>
            <tr>
                <td>
                    <label for="ProgramID">LicenseType: &nbsp;</label>
                </td>
                <td>
                    @(Html.Kendo().DropDownList()
                                                   .Name("kProgramID")
                                                   .DataTextField("Program")
                                                   .DataValueField("ProgramID")
                                                   .OptionLabel("Select License Type")
                                                   .DataSource(source => {
                                                       source.Read(read =>
                                                       {
                                                           read.Action("GetCompanies", "CompanyDropdown");
                                                       });
                                                   })
                                                   .Events(e => e.Change("OnCompanyChange"))


                                    )
                </td>
            </tr>

        </table>
    </div>
</div>

<br />


@( Html.Kendo().Grid<LicenseSearchModel>()
    .Name("klinensesGrid")

    .Scrollable(sc => sc.Height(150))
    .Pageable()
    .AutoBind(false)
    .DataSource(datasource => datasource
    .Ajax()
    //.Read(read => read.Action("LicenseSearchGrid", "LicenseReport"))
    .Read(read => read.Action("LicenseSearchGrid", "LicenseReport").Data("GridAdditionalDataParameter"))
    )
    )

<script type="text/javascript">
    //Pass the additional data for Grid

    function GridAdditionalDataParameter() {
        return
        {
            ProgramID: $("#ProgramID").data("kendoDropDownList").value()
        }
    }

    // When company selected from drown down, event change get trigger, so this function called.


    function OnCompanyChange() {
        return
        {
            debugger;

            $("#klinensesGrid").data("kendoGrid").dataSource.read();

    }

</script> 

 

-- Here is my _Layout.cshtml

 

<!DOCTYPE html>
<html> 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title - License Search </title>


    <link href="~/Content/kendo/2022.2.802/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2022.2.802/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2022.2.802/kendo.dataviz.metro.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2022.2.802/kendo.default-main.min.css" rel="stylesheet" />

    <script src="~/Scripts/kendo/2022.2.802/jquery.min.js"></script>
    <script src="~/Scripts/kendo/2022.2.802/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo/2022.2.802/kendo.aspnetmvc.min.js"></script>
    @*<script src="~/Scripts/kendo/2022.2.802/kendo.web.min.js"></script>*@

    <link href="https://cdn.kendostatic.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.kendostatic.com/2022.3.1109/js/jszip.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="~/Content/Site.css" rel="stylesheet" />
    @*<script src="~/Scripts/modernizr-2.6.2.js"></script>*@
   @* <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />*@

<script src="~/Scripts/modernizr-2.6.2.js"></script>

    <style>
        body {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

        .rcorners1 {
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 20px;
            width: 1200px;
            max-width: 1200px;
            height: 80%;
            background-color: White;
        }

        .navbar-inverse .navbar-nav > li > a {
            color: #fff;
        }

        button, input, select[multiple], textarea {
            background-image: none;
            color: black;
        }

        img {
            cursor: pointer;
        }

        .btn-info {
            color: #fff;
            background-color: #1d7647;
            border-color: #1d7647;
        }

            .btn-info:hover {
                color: #fff;
                background-color: #1d7647;
                border-color: #1d7647;
            }

        .btn-primary {
            color: #fff;
            background-color: #1d7647;
            border-color: #1d7647;
            outline: none;
        }

            .btn-primary:hover {
                color: #fff;
                background-color: #1d7647;
                border-color: #1d7647;
                outline: none;
            }

            .btn-primary:focus {
                color: #fff;
                background-color: #1d7647;
                border-color: #1d7647;
                outline: none;
            }

        .btn-default {
            color: #fff;
            background-color: #1d7647;
            border-color: #1d7647;
            outline: none;
        }

            .btn-default:hover {
                color: #fff;
                background-color: #1d7647;
                border-color: #1d7647;
                outline: none;
            }
    </style>

</head>


<body style="background-image: url(../Images/das-background-image.jpg)">

    <div id="divPopupTimeOut" style="font-size: 16px;display:none;width: 100%;height: 100%;background-color: rgba(69, 74, 69, 0.6);position: fixed;z-index: 9998;">
        <div style="z-index:9999; height:165px;margin: 15% 35%;position:relative;top:0%; z-index:9999;height:auto; width:auto;text-align:center;border-radius:10px; color:#fff; background-color:#1d7647;border-color:#1d7647;" class="alert alert-warning">
            <div class="row" style="margin: 20px;">
                Your session is about to expire in <span id="CountDownHolder"></span>
            </div>
            <div class="row">
                <div class="text-center button-block" style="text-align:center; margin:20px">
                    <button type="button" class="btn btn-default btn-sm" style="font-size: 16px;color: #333;background-color: #fff;border-color: green;" onclick="SessionTimeout.sendKeepAlive();">Extend</button>
                </div>
            </div>
        </div>
    </div>

    <div align="center" style="padding-top: 50px;padding-bottom: 20px;">
        <div class="rcorners1">
            <img src="~/Images/bare-with-text-two-lines-945x150.jpg" alt="" height="150" border="0"><br>
        </div>
    </div>


    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - Georgia Department of Agriculture</p>
    </footer>
</body>
</html>

 

Thanks in advance for help

 

Thanks,

Raja

       

[Raja]

Please ignore it. I am able to resolve it. Typo was causing the issue.