With the recent release of 2018, I began the rework of several projects to also update them to the latest suite.  I can report that this with this release I was actually able to perform a MVC Upgrade wizard without failures.  That is a first for me.

My update strategy was as follows:  First I ran the Report upgrade process.  After it completes it reloaded the project and the Telerik product realized I still  had a un-upgraded MVC project to upgrade.  (That was a welcome change)  Upon clicking the upgrade wizard it actually went off and upgraded things.

Upon completion of the process I was able to perform a clean/rebuild solution with zero errors.  Using my normal testing process quickly confirmed everything met expectations.  That was a very welcome change.

My only complaint is that the upgrade process, of the MVC, is very invisible to the developer.  By this I mean the user has no visual indication that anything is happening except for the occasional busy cursor.  The status bar occasionally has a message but it seems to be very sporadic.   If you somehow improved this portion of your upgrade process things would be "perfect" in my mind.

NOTE: I did discover that you could monitor the contents of the recycle bin to see the progress of the upgrade process.  The upgrade process delete files, which end up in the recycle bin, so as long as the number of files is growing you know something is working.

Special Note:  Like most developers I also have one of those projects which are "from hell".  It is a hybrid project that combines ASPX, MVC, and the HTML5 reporting tools.  Collectively this project has never been upgrade capable via the wizards.  They literally crashed each time I tried them.  Given the hybrid nature, I always accepted is as something I caused myself by building the "beast".  I can report that with this release (2018-1) the upgrade process actually worked.  I ran the report upgrade wizard first.  I then ran the MVC Upgrade process.  I then ran the ASPX upgrade wizard.  All three worked without error.  None crashed. (A very welcome change)  The end result compiled with errors as the ASPX process removed the MVC references as unnecessary.  Upon re-adding that reference to the solution, everything compiled and tested with 100% accuracy.  All tests ran without error.  I was thrilled that this un-supported process actually worked!

Hello there,

I have a Kendo Grid with a lot of numerical data in it and I'd like to incorporate the Kendo range Slider into it so that users can adjust the sliders and this will filter the grid.  Having read the documentation I'm not 100% sure how to do this. Can anyone help?

@(Html.Kendo().Grid(Model)
    .Name("MyGrid")
    .Columns(columns =>
        {
            columns.Bound(p => p.vessel_name).Title("Vessel");
            columns.Bound(p => p.vessel_bhp).Title("Type");
            columns.Bound(p => p.fixture_charterer).Title("Charterer");
            columns.Bound(p => p.current_location).Title("Location");
            columns.Bound(p => p.next_charterer_info).Title("Next Charter").Width(200);
            columns.Bound(p => p.fixture_work).Title("Work");
            columns.Bound(p => p.fixture_note).Title("Notes");
            columns.Bound(p => p.vessel_status).Title("Status");        
        }
    )
    .Pageable()
    .Scrollable()
    .Sortable()
    .Events(e => e.DataBound("OnDataBound"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.vessel_idx);
            model.Field(p => p.vessel_idx).Editable(false);
        })
        .PageSize(50)
        .Sort(sort => sort.Add("vessel_status").Ascending())
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Create(update => update.Action("EditingInline_Create", "Grid"))
        .Read(read => read.Action("EditingInline_Read", "Grid"))
                .Update(update => update.Action("tbl_vessels", "Grid"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
        ))

For example I'd like the ranger slider to filter the grid when people choose a range for vessel_bhp.

Any help is appreciated.
​

Hello,

First off, this is the best place I found to post this in, it's not MVC specific, I know.

There seems to be a slight bug in the Gantt chart when using Internet Explorer (I tried Firefox and Chrome, they didn't exhibit this behaviour). Atleast the MVC and jQuery UI versions seem to be affected. You can reproduce this by browsing to https://demos.telerik.com/aspnet-mvc/gantt or https://demos.telerik.com/kendo-ui/gantt/index with IE11 and then scrolling the Gantt chart to the bottom. If you click on any task in the right above "Integration testing", the left side of the Gantt (with ID, Title, Start Time, End Time) will properly scroll to the selected task. But if you click on "Integration testing" or a task below it, the left side will jump to the top, showing "ID 7 Software validation" and you have to nudge your scroll wheel for the left side to focus on the task you clicked on.

This happens on fully updated Windows 7 and IE11 with the version info in the attached picture.

Hi,

I am using Telerik ASP.NET MVC Extensions 2016.1.111.0. and Razor. The CheckBoxFor control behaves slightly illogical - in one case it shows a label, in another case it does not. See the attached screenshot.

Both parameters are booleans, the difference is that one of the has a DisplayName:

From the model.cs

        public bool Dator { get; set; }
        [DisplayName("Passerkort 07:30-17:00")]
        public bool Passerkort { get; set; }

From the Index.cshtml

            @Html.LabelFor(m => m.Dator)
            @Html.Kendo().CheckBoxFor(m => m.Dator)
            @Html.LabelFor(m => m.Passerkort)
            @Html.Kendo().CheckBoxFor(m => m.Passerkort)

The parameter with the DisplayName specified will be displayed with a label attached to the CheckBoxFor, so to get rid of it I have to set .Label("") for that checkbox. Not a big deal, but I think maybe this was not the intention.

Best regards,

Henrik

Hello,

I'm using AutoComplete to read and list from the database a list of locations as the user types in the textbox. I would like to 'Add a new item' if the item does not appear from the AutoComplete list - similar to the one found here: https://demos.telerik.com/kendo-ui/autocomplete/addnewitem. Below is the code that I'm working with. Thank you in advance for any help.

Index.cshtml

HomeController.cs

LocationRepository.cs

asdf

Working in 2016.3 KendoMVC with jquery 3.1.1

Broken in 2018.1.117 KendoMVC with jquery 3.1.1

Render code from our Razor view:

    @(Html.Kendo().Chart(Model.PieChartElements)
          .Name("pieChart")
          .Legend(false)
          .Series(series =>
          {
              series.Pie(
                  model => model.BarChartValue,
                  model => model.Name,
                  model => model.PieSegmentColor)
                  .Labels(labels => labels
                      .Template($"#= category #: #= value # {Model.Currency}")
                      .Background("transparent")
                      .Visible(true))
                  .Tooltip(tooltip => tooltip
                      .Format("{0}%")
                      .Template($"#= category #: #= value # {Model.Currency}")
                      .Visible(true));
          })
          )

I've attached screenshots with the various mis renderings on rollover.

Is this a bug in the newest version or a change in the required config? Looks like a bug to me but I'm keeping an open mind.

In my _Layout view, I am using a splitter and have panes for Navigation and Main content.    In my navigation pane, I am opening a _Navigation partial view with a panelbar where I have my menu items.   When I click on a menu item, it is returning the partial view into the Navigation pane in the _Layout.   How Can I direct this to the main pane in the _Layout view?

I see why this is happening but now sure how to modify it.

Thanks

_Layout

@(Html.Kendo().Splitter()
.Name("mainSplitter")
.Panes(panes =>
{
panes.Add()
.Size("150px")
.Content(
@<text>
@Html.Partial("_Navigation")
</text>);
panes.Add().Content(@<text>
<section id="main">  -----When I click on a menu item in _Navigation, I want the Partial View to show here
     @RenderBody()
</section>
</text>);
}))

_Navigation

@(Html.Kendo().PanelBar().Name("panelbar")
.SelectedIndex(0)
.ExpandMode(PanelBarExpandMode.Single)
.Items(items =>
{
items.Add().Text("Refunds").Items(corp =>
{
corp.Add().Text("Refund Summary").Content(@<text> @Html.Partial("_refundGrid") </text>);
    });
}))

<script>
$("#panelbar").kendoPanelBar({
animation: {
// fade-out closing items over 1000 milliseconds
collapse: {
duration: 100,
effects: "fadeOut"
},
// fade-in and expand opening items over 500 milliseconds
expand: {
duration: 500,
effects: "expandVertical fadeIn"
}


}
});
</script>

Dear Team, 

I need to add control in existing asp.net MVC project, I have read controls of  but don't know how to add the project. I have installed on my machine, now I can able to see  tab in visual studio. 

can anyone help me here! or any blog's links appreciatable. 

Thanks, 

Bala

Software Engineer

[Hidden Companyname]

I'm having trouble with getting  a inline cell drop-down that's in a grid, inside a tab strip which is for a pop-up editor for another grid (complicated I know).

The drop-down in question that is causing the error is called "NoteType"

The error I keep getting is the following:

VM1563:1 Uncaught SyntaxError: Invalid or unexpected token
    at eval (<anonymous>)
    at eval (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:2651)
    at Function.globalEval (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:2662)
    at Ha (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:53272)
    at n.fn.init.append (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:54801)
    at M.fn.init.n.fn.(anonymous function) [as appendTo] (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:56520)
    at init._createPopupEditor (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:24:21766)
    at init.editRow (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:24:19002)
    at HTMLAnchorElement.eval (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:24:14868)
    at HTMLDivElement.dispatch (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:44454)
(anonymous) @ jquery.min.js:1
globalEval @ jquery.min.js:1
Ha @ jquery.min.js:1
append @ jquery.min.js:1
n.fn.(anonymous function) @ jquery.min.js:1
_createPopupEditor @ kendo.all.min.js:24
editRow @ kendo.all.min.js:24
(anonymous) @ kendo.all.min.js:24
dispatch @ jquery.min.js:1
r.handle @ jquery.min.js:1

Here is my parent  grid - Index.cshtml

---------------------------------------

@using AccuChart.Controllers;
@using AccuChart.Models;
@using AccuChart.ViewModels;

@model PatientViewModel

@{
    ViewBag.Title = "Patients";
}

<h3>Patients</h3>


@(Html.Kendo().Grid(Model.Patients)
        .Name("patientGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.FirstName).Title("First Name").Filterable(true);
            columns.Bound(p => p.LastName).Title("Last Name").Filterable(true);
            columns.Bound(p => p.PatientId).Visible(false);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_Patient")
                .Window(w => w.Title("Edit Patient").Name("Patient").Width(800))
    )
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(3))
    .Sortable()
    .Scrollable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
    .DataSource(dataSource => dataSource
        .Ajax().ServerOperation(false)
        .PageSize(20)
        .Model(model =>
        {
            model.Id(patient => patient.PatientId);
            model.Field(e => e.PatientNotes).DefaultValue(new List<PatientNoteModel>());
        })
        .Read(read => read.Action("GetPatients", "Patient"))
        .Create(create => create.Action("EditingPopup_Create", "Patient"))
        .Update(update => update.Action("EditingPopup_Update", "Patient"))
        .Destroy(delete => delete.Action("EditingPopup_Delete", "Patient"))
        .Events(e =>
        {
            e.RequestEnd("onGridDataSourceRequestEnd");
            e.Error("onError");
            e.Change("Grid_OnRowSelect");
        })
        .Sort(sort => sort.Add("FullName"))
       )
)
<script type="text/javascript">
    function onError(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function onGridDataSourceRequestEnd(e) {
        // Check request type
        if (e.type == "create" || e.type == "update") {
            //check for errors in the response
            if (e.response == null || e.response.Errors == null) {
                $('#patientGrid').data().kendoGrid.dataSource.read();
            }
            else {
                alert("Update Failed");
            }
        }
    }

    function Grid_OnRowSelect(e) {
        if (e != null) {
            if (e.index != null && e.items != null) {
                var model = e.items[e.index];
                $.post("Patient/SetPatientId", { patientId: model.id }, function (r) {
                    if (r.Status != "Success") {
                        alert("Issue with patient")
                    }
                });
        }
    }

    }

</script>
<style>
    .k-header.k-grid-toolbar, .k-button.k-button-icontext.k-grid-add, .k-window-titlebar.k-header {
        background-color: #393536;
        border-color: #605d5e;
    }

        .k-button.k-button-icontext.k-grid-add:hover {
            background-color: #605d5e;
            border-color: #4c494a;
        }
</style>

Here is my pop-up editor template - _Patient.cshtml
---------------------------------------

@using AccuChart.Controllers;
@using AccuChart.Models;
@using AccuChart.ViewModels;


<div style="width:800px;">
    @(Html.Kendo().TabStrip().Animation(false)
              .Name("tabstrip")
              .Items(tabstrip =>
              {
              tabstrip.Add().Text("Patient Information")
                                .Selected(true)
                                .Content(@<text>
    <div style="width:100%">
        @Html.HiddenFor(m => m.PatientId)
        @Html.HiddenFor(m => m.ClinicId)

        <div style="float:left; width:300px;">

            <div class="editor-label">
                @Html.LabelFor(m => m.FirstName)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.FirstName).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.FirstName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.MiddleName)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.MiddleName).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.MiddleName)
            </div>


            <div class="editor-label">
                @Html.LabelFor(m => m.LastName)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.LastName).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.LastName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Address1)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.Address1).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.Address1)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Address2)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.Address2).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.Address2)
            </div>

        </div>
        <div style="float:left; width:300px;">
            <div class="editor-label">
                @Html.LabelFor(m => m.City)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.City).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.City)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.State)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.State).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.State)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Zip)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.Zip).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.Zip)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.HomePhone)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.HomePhone).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.HomePhone)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.CellPhone)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.CellPhone).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.CellPhone)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Email)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.Email).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.Email)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.PreferContact)
            </div>
            <div class="editor-field">
                @(Html.Kendo().DropDownListFor(m => m.PreferContact)
                        .HtmlAttributes(new { style = "width:100%" })
                        .DataTextField("Name")
                        .DataValueField("Name")
                        .DataSource(ds =>
                        {
                            ds.Read(read => read.Action("GetModeContact", "Patient"));
                        })
                        .AutoBind(true)
                )
                @Html.ValidationMessageFor(m => m.PreferContact)
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
                                </text>);

    tabstrip.Add().Text("Insurance").Content(@<text>
    <div style="width:100%">

        <div class="editor-label">
            @Html.LabelFor(m => m.InsuranceCompany)
        </div>
        <div class="editor-field">
            @Html.Kendo().TextBoxFor(m => m.InsuranceCompany).HtmlAttributes(new { style = "width:100%" })
            @Html.ValidationMessageFor(m => m.InsuranceCompany)
        </div>

        <div class="editor-label">
            @Html.LabelFor(m => m.InsuranceGroupNumber)
        </div>
        <div class="editor-field">
            @Html.Kendo().TextBoxFor(m => m.InsuranceGroupNumber).HtmlAttributes(new { style = "width:100%" })
            @Html.ValidationMessageFor(m => m.InsuranceGroupNumber)
        </div>

        <div class="editor-label">
            @Html.LabelFor(m => m.InsurancePolicyNumber)
        </div>
        <div class="editor-field">
            @Html.Kendo().TextBoxFor(m => m.InsurancePolicyNumber).HtmlAttributes(new { style = "width:100%" })
            @Html.ValidationMessageFor(m => m.InsurancePolicyNumber)
        </div>

        <div class="editor-label">
            @Html.LabelFor(m => m.InsurancePolicyHolderName)
        </div>
        <div class="editor-field">
            @Html.Kendo().TextBoxFor(m => m.InsurancePolicyHolderName).HtmlAttributes(new { style = "width:100%" })
            @Html.ValidationMessageFor(m => m.InsurancePolicyHolderName)
        </div>
    </div>

    </text>);


    tabstrip.Add().Text("Therapy Note").Content(@<text>
     
        <div style="width:100%">
            @(Html.Kendo().Grid(Model.PatientNotes)
        .Name("PatientNote")
        .Sortable()
        .Columns(cols =>
        {
            cols.Bound(b => b.NoteType).ClientTemplate(
                 (Html.Kendo().DropDownList()
                 .Name("NoteType")
                    .DataTextField("Name")
                    .DataValueField("Id")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetNoteTypes", "Patient");
                        });

                    })
                    ).ToClientTemplate().ToHtmlString());
            cols.Bound(b => b.Note);
            cols.Bound(b => b.EnteredBy);
            cols.Bound(b => b.EnteredOn);
    })
        .ToolBar(toolbar => toolbar.Create())
        .Editable( ed => ed.Mode(GridEditMode.InCell))
        //  .AutoBind(false)
        .DataSource(ds => ds.Ajax().Model(mo =>
        {
            mo.Id(m => m.PatientNoteId);
            mo.Field(f => f.PatientNoteId).Editable(false);
            mo.Field(f => f.PatientId).Editable(false);
            mo.Field(f => f.NoteType).Editable(true);
            mo.Field(f => f.Note).Editable(true);
            mo.Field(f => f.Version).Editable(false);
            mo.Field(f => f.EnteredBy).Editable(false);
            mo.Field(f => f.EnteredOn).Editable(false);
        })
        .Read(read => read.Action("GetPatientNotes", "Patient"))
        .Create(create => create.Action("EditingPopup_PatientNoteCreate", "Patient"))
        )
        .ToClientTemplate()
            )

           
       


        </div>

    </text>);


              }))


</div>

    @model PatientModel

Hello, 

Since the last update, the custom window action icons in our project are not working anymore. Also on the demos on the website they seem not to be working.

Please check the demos at the following links:

https://docs.telerik.com/kendo-ui/controls/layout/window/how-to/use-custom-action-icons

https://demos.telerik.com/kendo-ui/window/actions#

Thank you,

Iuliana