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