Hi Progress team!

I have a master grid and a details grid both using Ajax binding. I'm trying to add a button using ClientTemplate for both grids. It works fine for the master grid and fails for the details grid.

Here is the code for the grids:

Here is the code for the client templates for the buttons:

Here is the code for my javascript functions:

When I try to expand the details grid I get this error (it fails on line 08 in the above shippet):

Uncaught SyntaxError: Invalid or unexpected token at eval (<anonymous>) ...

The code is the same for the master and the details grid, but it only fails when the details grid is expanded and no data is rendered in that grid. It looks like the compile functions completes without error but then it fails on the next call.

I'm also attaching a screen shot of the error.

Please help!

Thanks!

Kiril

I have done a typescript update to the latest version 2.6 from 2.3 and on building my application in visual studio am getting a number of errors occurring in the custom ts files as well as kendo-ui.d.ts  see attached file)...

Is there a solution for this?

I am trying to reduce the amount of back-and-forth on a number of columns that are configured to use multi-checkbox filtering, as per the below example:

I would like to set the available values of this filter. The default behaviour is for the entire dataset to be re-requested and returned to the user, where a distinct list of values can be deduced. I am able to implement a more efficient solution for my particular case, but I cannot seem to set the available values of these filters. Finding the relevant th object and setting the data as follows does not seem to work:

Is this possible? If so, how?

Using the scheduler-custom-editor project as a guide I've created a custom editor template and have added a number of fields as needed for our project. One of these is a Kendo ListView that I used in another project to retrieve a number images from a web service. This all seems to be working fine but one thing I'm stuck on is writing the filename of the clicked image to a text field on the template (see screenshot). Relevant template code is:

<div class="k-edit-label">
    Image Details
</div>
<div class="eventimage-section k-content wide">
    <div id="listView" class="k-edit-field"></div>
    <div id="pager" class="k-pager-wrap"></div>
</div>


<script type="text/x-kendo-template" id="template">
    <div class="eventimage">
        <img src="http://nsccapi/eventimages/\\#= FileName \\#" alt="\\#: FileName \\# image" />
            <h3>\\#: FileName \\#</h3>
        </div>
</script>

<script>

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://myapi/api/events/allimages",
            dataType: "jsonp"
        }
    },
    pageSize: 3
});

$("\\#pager").kendoPager({
    dataSource: dataSource
});

$("\\#listView").kendoListView({
    dataSource: dataSource,
    selectable: "single",
    @* change: onChange,*@
    template: kendo.template($("\\#template").html()),
    autoBind: false
});

dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound

@* function onChange() {

//    var data = dataSource.view(),
//        selected = $.map(this.select(), function (item) {
//            var sel = data[$(item).index()].FileName;
//            $("\\#ImagePath").val(sel)
//            return sel;
//        });

    } *@



</script>

The ListView renders the images as expected but the change event (change: onChange) of the listview fails saying that onChange is not defined. I've commented it out in my code as shown above. #ImagePath is the id of the text field I wish to write to. Am I going about this the correct way? Should I instead handle a click event on an image and grab it's filename from the <h3> tag?

Thanks.

Upon saving and clearing all validation steps with a pop-up template, I get the following error:

VM5294:3 Uncaught TypeError: Cannot read property 'PatientId' of null
    at Object.eval [as PatientId] (eval at getter (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:25:30967), <anonymous>:3:10)
    at y (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:627)
    at init.data (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:982)
    at init._accept (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:27729)
    at Object.<anonymous> (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:26672)
    at Object.<anonymous> (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:28768)
    at i (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:27449)
    at Object.fireWith [as resolveWith] (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:28213)
    at Object.e.(anonymous function) [as resolve] (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:29192)
    at Object.success (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:29810)

What's interesting is that DELETE functions work but not Update Create

Here is my code for the grid

@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"))
    )
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(3))
    .Sortable()
    .Scrollable()
    //.HtmlAttributes(new { style = "height:550px;" })
    .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
    .DataSource(dataSource => dataSource
        .Ajax().ServerOperation(false)
        .PageSize(20)
        .Model((model => model.Id(patient => patient.PatientId)))
        .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");
        })
        .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");
            }
        }
    }

</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>

The pop-up editor

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


@(Html.Kendo().TabStrip().Animation(false)
                .Name("tabstrip")
                .Items(tabstrip =>
                {
                  tabstrip.Add().Text("Patient Information")
                                  .Selected(true)
                                  .Content(@<text>
@Html.HiddenFor(m => m.PatientId)
@Html.HiddenFor(m => m.ClinicId)


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

    <div class="editor-label">
    @Html.LabelFor(m => m.City)
</div>
    <div>
        @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>
        @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>
        @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>
        @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>
        @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>
        @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>
        @(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>

</text>);

tabstrip.Add().Text("Insurance").Content(@<text>


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


</text>);

}))

@model PatientModel

The controller

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AccuChart.ViewModels;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using AccuChart.Models;
using System.Collections.Generic;

namespace AccuChart.Controllers
{
    public class PatientController : BaseController
    {
        public ActionResult Index(int id=1)
        {
            PatientViewModel p = new PatientViewModel();
            p.Patients = _patientSvc.GetByClinicId(id);

            return View(p);
        }

         
        public ActionResult GetPatients([DataSourceRequest]DataSourceRequest request, int patientId=0)
        {
            var result = _patientSvc.GetByClinicId(CurrentClinicId).ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetModeContact()
        {
            List<ModeContactModel> mode = new List<ModeContactModel>();
            mode.Add(new ModeContactModel { Name = "Home Phone" });
            mode.Add(new ModeContactModel { Name = "Cell Phone" });
            mode.Add(new ModeContactModel { Name = "Email" });


            return Json(mode, JsonRequestBehavior.AllowGet);
        }


        //CRUD operations
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingPopup_Create([DataSourceRequest] DataSourceRequest request, PatientModel patient)
        {
            PatientModel presult = null;
            //var user = _userSvc.GetByEmail(this.CurrentUserEmail);

            if (patient != null && ModelState.IsValid)
            {
                presult = _patientSvc.Create(patient, 1);

            }
            return Json(new[] { presult }.ToDataSourceResult(request, ModelState));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingPopup_Update([DataSourceRequest] DataSourceRequest request, PatientModel patient)
        {
            PatientModel presult = null;
           // var user = _userSvc.GetByEmail(this.CurrentUserEmail);

            if (patient != null && ModelState.IsValid)
            {
                presult = _patientSvc.Update(patient, 1);

            }
            return Json(new[] { presult }.ToDataSourceResult(request, ModelState));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingPopup_Delete([DataSourceRequest] DataSourceRequest request, PatientModel patient)
        {
            if (patient != null && ModelState.IsValid)
            {
                _patientSvc.Delete(patient);

            }
            return Json(new[] { patient }.ToDataSourceResult(request, ModelState));
        }


    }
}

Hi,

I would like to normalize the behaviour of our DatePickers and also add some special date support in our application. I have managed to extend the JS version

This works fine when I call it using data-role="myDatePicker". Now I want to also support setting this up from the MVC Razor views.

I see some examples for setting up extension methods and I have attempted also creating a class derived from DatePicker so that I can support my custom properties as well as to get the data-role set to "myDatePicker". It sort of works, but it does not look like it is setting up properly the base properties such as HtmlAttributes  (Razor sets it up like this:  .HtmlAttributes(new { style = "width:150px" }))... the HTML will output "width: 100%").

Is there a nice example for what I am trying to do?

Code in c#

Hi 

I've found a link which shows how to retrieve the current date range of a view using JQuery :

https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/various/view-date-range

I want to allow users to search resources via the currently selected date range.

Is there a way to do this in MVC?

Thank you

Phil

I hope I have what is a simple question, but the answer is eluding me at the moment.  

Background: I have a table where data gets imported into.  Each import is labeled, in a column so that import batches are kept together.

I have a View with a DropdownList that gets populated with a DISTINCT list of those import labels.

What I want to have happen is the grid would initially be empty.  The user will select a label from the dropdownlist, which should then tell the grid to read the data from the database where it matches the UploadLabel selected by the user.

I know I have to create my Grid to that AutoBind is false.  But how do I tell the grid to fetch the appropriate data?  I know I can call the Grid's DataSource.Read method, but where or how do I tell it which data to retrieve? I don't want to do it client side because the import database is very, very, very large.  This is why I want to only return the data corresponding to a specific UploadLabel.