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

Hi 

I want to load the Normal view as a modal window when  kendo Toolbar button is clicked. Inside View I am calling Partial view as a whole form. (inside form there are another 2 partial views along with another inputs and 2 submit buttons).

But form is not loading as modal form instead it loads as normal form displaying url action route (GET request). Could you please help me what changes needed to get the ActionResult View loads as a Modal window.  when submit I need to execute POST method. but my GET method is not displaying correctly as a modal window.  

AddStructureNode View 

Partial View (_AddStructureNode)

SBScripts file Scripts

I call ShowDialog event when kendo toolbar button is clicked. so I have to load the form via ajax. 

Could you please show me where in my scripts has to be changed. I tried Content and Refresh methods but not successful. Thanks.

Thusith

Using the SchedulerCustomEditor as a sample project I've created a project where the user can manage Events, both individual and recurring. I'm using EF6 to manage read/write to the database. My database has an Events table which has a many-to-many relationship with Categories and a many to many relationship with Locations (see attached). 

Add and Edit events (and their related categories) seems to work fine, recurring events and recurrence exceptions are getting created, updated properly, delete works fine until  a recurring event has a recurrence exception. An exception is thrown by Entity Framework: "Store update, insert, or delete statement affected an unexpected number of rows (0). Entities may have been modified or deleted since entities were loaded." Stepping through my delete function the calls to delete the recurrence exception event and it's parent occur almost simultaneously, I've notice similar in the Delete function in the SchedulerCustomEditor sample project:

        public virtual void Delete(MeetingViewModel meeting, ModelStateDictionary modelState)
        {
            if (meeting.Attendees == null)
            {
                meeting.Attendees = new int[0];
            }

            var entity = meeting.ToEntity();

            db.Meetings.Attach(entity);

            var attendees = meeting.Attendees.Select(attendee => new MeetingAttendee
            {
                AttendeeID = attendee,
                MeetingID = entity.MeetingID
            });

            foreach (var attendee in attendees)
            {
                db.MeetingAttendees.Attach(attendee);
            }

            entity.MeetingAttendees.Clear();

            var recurrenceExceptions = db.Meetings.Where(m => m.RecurrenceID == entity.MeetingID);

            foreach (var recurrenceException in recurrenceExceptions)
            {
                db.Meetings.Remove(recurrenceException);
            }

            db.Meetings.Remove(entity);
            db.SaveChanges();
        }

Can't say I really understand what is going on in the above function with the Attach calls. In the above function you are manually removing the records MeetingAttendees join table somehow, but in my scenario I have no access to these join tables.

My Delete function is:

        public virtual void Delete(EventScheduleViewModel evt, ModelStateDictionary modelState)
        {
            if (evt.Categories == null)
            {
                evt.Categories = new int[0];
            }
            if (evt.Locations == null)
            {
                evt.Locations = new int[0];
            }

            var entity = db.Events.Include("Categories").Include("Locations").FirstOrDefault(m => m.EventID == evt.EventID);

            foreach (var category in entity.Categories.ToList())
            {
                entity.Categories.Remove(category);
            }

            foreach (var location in entity.Locations.ToList())
            {
                entity.Locations.Remove(location);
            }

            var recurrenceExceptions = db.Events.Where(m => m.RecurrenceID == entity.EventID);

            foreach (var recurrenceException in recurrenceExceptions)
            {
                db.Events.Remove(recurrenceException);
            }

            db.Events.Remove(entity);
            try
            {
                db.SaveChanges();
            }

            catch (Exception e)
            {
                throw;
            }
        }

here's my Insert and Update functions which seem to be working ok:

        public virtual void Insert(EventScheduleViewModel evt, ModelStateDictionary modelState)
        {
            if (ValidateModel(evt, modelState))
            {
                if (evt.Categories == null)
                {
                    evt.Categories = new int[0];
                }
                if (evt.Locations == null)
                {
                    evt.Locations = new int[0];
                }

                var entity = evt.ToEntity();

                foreach (var categoryId in evt.Categories)
                {
                    var category = db.Categories.FirstOrDefault(s => s.CategoryID == categoryId);
                    if (category != null)
                    {
                        entity.Categories.Add(category);
                    }
                }

                foreach (var locationId in evt.Locations)
                {
                    var location = db.Locations.FirstOrDefault(s => s.LocationID == locationId);
                    if (location != null)
                    {
                        entity.Locations.Add(location);
                    }
                }

                try
                {
                    db.Events.Add(entity);
                    db.SaveChanges();
                }

                catch (Exception)
                {
                    throw;
                }

                evt.EventID = entity.EventID;
            }
        }

        public virtual void Update(EventScheduleViewModel evt, ModelStateDictionary modelState)
        {
            if (ValidateModel(evt, modelState))
            {

                var entity = db.Events.Include("Categories").Include("Locations").FirstOrDefault(m => m.EventID == evt.EventID);

                entity.Title = evt.Title;
                entity.Start = evt.Start;
                entity.End = evt.End;
                entity.Description = evt.Description;
                entity.IsAllDay = evt.IsAllDay;
                entity.RecurrenceID = evt.RecurrenceID;
                entity.RecurrenceRule = evt.RecurrenceRule;
                entity.RecurrenceException = evt.RecurrenceException;
                entity.StartTimezone = evt.StartTimezone;
                entity.EndTimezone = evt.EndTimezone;


                entity.Fee = evt.Fee;
                entity.ContactName = evt.ContactName;
                entity.ContactPhone = evt.ContactPhone;
                entity.ContactEmail = evt.ContactEmail;
                entity.Summary = evt.Summary;
                entity.OffsiteLocation = evt.OffsiteLocation;
                entity.SubmitterName = evt.SubmitterName;
                entity.SubmitterPhone = evt.SubmitterPhone;
                entity.SubmitterEmail = evt.SubmitterEmail;
                entity.SubmitterComments = evt.SubmitterComments;
                entity.ImagePath = evt.ImagePath;
                entity.ImageAltText = evt.ImageAltText;

                entity.LastModified = evt.LastModified;
                entity.LastModifiedBy = evt.LastModifiedBy;

                entity.IsOffCampus = evt.IsOffCampus;
                entity.IsPublished = evt.IsPublished;
                entity.IsDisplayedOnNSCC = evt.IsDisplayedOnNSCC;
                entity.IsDisplayedOnConnectStudent = evt.IsDisplayedOnConnectStudent;
                entity.IsDisplayedOnConnectEmployee = evt.IsDisplayedOnConnectEmployee;
                entity.IsCollegeWide = evt.IsCollegeWide;


                foreach (var category in entity.Categories.ToList())
                {
                    entity.Categories.Remove(category);
                }

                foreach (var location in entity.Locations.ToList())
                {
                    entity.Locations.Remove(location);
                }

                if (evt.Categories != null)
                {
                    foreach (var categoryId in evt.Categories)
                    {
                        var category = db.Categories.FirstOrDefault(s => s.CategoryID == categoryId);
                        if (category != null)
                        {
                            entity.Categories.Add(category);
                        }
                    }
                }

                if (evt.Locations != null)
                {
                    foreach (var locationId in evt.Locations)
                    {
                        var location = db.Locations.FirstOrDefault(s => s.LocationID == locationId);
                        if (location != null)
                        {
                            entity.Locations.Add(location);
                        }
                    }
                }

                try
                {
                    db.SaveChanges();
                }

                catch (Exception)
                {
                    throw;
                }
            }
        }

How can I write my Delete function to remove recurring events that have recurrence exceptions? 

Thanks.

Hi, Im trying to build a table that has 2 datetimes on it.

My problem is just that, on the method UpdateContainer, the instance container has the default date and never get updated .

Here is my front code:

Here is my controller code :