hi, 

I am following the example and the documentation, but I can't solve thi issue

Uncaught TypeError: Cannot read property 'slice' of undefined
    at init.success (kendo.all.js:7083)
    at success (kendo.all.js:7010)
    at Object.n.success (kendo.all.js:5934)
    at fire (jquery.js:3182)
    at Object.fireWith [as resolveWith] (jquery.js:3312)
    at done (jquery.js:8754)
    at XMLHttpRequest.<anonymous> (jquery.js:9120)

my view:

<div class="row">

    <form asp-controller="Home" asp-action="SetLanguage" role="search" method="post">
        <div class="form-group">
            @*<input type="text" placeholder="Search for something..." />*@


            @(Html.Kendo().MultiColumnComboBox()

                       .Name("products")
                       .DataTextField("Name")
                       .DataValueField("Id")
                       .Columns(columns =>
                       {
                       //columns.Add().Field("Name").Template("<a href= '" + "Instrument/Quotes/#: Id #" + "'>Q</a>").Title("Name");
                       //columns.Add().Field("Id").Title("ID");
                       columns.Add().Field("Id").Template("<a href= '" + "/Analisys/AnalisysShort/#: Id #" + "'>#: Name#</a>").Title("ID");

                       })
                       .Placeholder("Search...")
                      .DataSource(source =>
        {
            source.Custom()
                .ServerFiltering(true)
                .ServerPaging(true)
                .PageSize(80)
                .Type("aspnetmvc-ajax")
                .Transport(transport =>
                {
                    transport.Read("SearchInstruments_Read", "Home");
                })
                .Schema(schema =>
                {
                    schema.Data("Data")
                            .Total("Total");
                });
        })
        .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper")))




            <button type="submit" class="btn btn-success">
                <i class="glyphicon glyphicon-search"></i>
            </button>
        </div>
    </form>
</div>

<script>
        function valueMapper(options) {
            $.ajax({
                url: "@Url.Action("SearchInstruments_ValueMapper", "Home")",
                data: convertValues(options.value),
                success: function (data) {
                    options.success(data);
                }
            });
        }

        function convertValues(value) {
            var data = {};

            value = $.isArray(value) ? value : [value];

            for (var idx = 0; idx < value.length; idx++) {
                data["values[" + idx + "]"] = value[idx];
            }

            return data;
        }
</script>

my controller

public async Task<ActionResult> SearchInstruments_Read([DataSourceRequest] DataSourceRequest request)
        {
            var model = await _repo.GetAllAsync<Instrument>();
            var vmodel = Mapper.Map<IEnumerable<InstrumentViewModel>>(model);

            return Json(vmodel);
        }

        public async Task<IActionResult> SearchInstruments_ValueMapper(int[] values)
        {
            var indices = new List<int>();

            if (values != null && values.Any())
            {
                var index = 0;

                foreach (var model in await _repo.GetAllAsync<Instrument>())
                {
                    if (values.Contains(model.Id))
                    {
                        indices.Add(index);
                    }

                    index += 1;
                }
            }

            return Json(indices);
        }

thank you for help

Hi,

I'm using a custom template for popup editing in my Grid, eg

In "ClinicalGapEditor.cshtml" i'm binding to a view model and have some date field

I want the date to be entered in dd/MM/yyyy format but when I enter the date and tab out of the field it is automatically change to a long date, such as "Tue Dec 12 2000 00:00:00 GMT+0000 (Greenwich Mean Time)".

How do I fix this?

How can we disable the sorting that is applied to groups in kendo grid.

Please reply asap.

Hi,

I have a problem with DateTimePicker component on Update action on GridView. 

In my model I've annotated the property with the following attributes:

        [Required]
        [DataType(DataType.Date)]
        [Display(Name = nameof(MessageResources.DateSent), ResourceType = typeof(MessageResources))]
        public DateTime DateSent { get; set; }

In the columns section of a gridview component custom formating is set up as following:

    .Columns(columns =>
    {
        columns.Command(command => { command.Edit(); }).Width(100);
        columns.Bound(x => x.DateSent)
        .Format("{0: dd.MM.yyyy HH:mm:ss}")
        .Title("Date Sent");
        columns.Command(command => { command.Destroy(); }).Width(100);
    })

And I have a custom pop-up form with the following  syntax and format:  

                @(Html.Kendo().DateTimePickerFor(p => p.DateSent)
                                            .Format("dd.MM.yyyy HH:mm")
                                            .HtmlAttributes(new { @readonly = "readonly", @class = "form-control" }))

On put or post operations default value (01/01/0001 00:00:00) is sent to the controller. In case I made model property nullable and without required then this value is always null.

Hello,

I am upgrading my project to use the latest enhancements to the Grid control, and replacing some custom code that I had to write to accomplish something that the columns.Select() seems to do out of the box.  The issue that I am having is that I need to get the selected rows from outside of the grid.  My view page looks like this:  

<div class="row">
        <div class="col-xs-18 col-md-12">
            @(Html.Kendo().Grid<OASISBlueSyncCore.Common.Models.CourseInformation>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Select().Width(50);
                columns.Bound(p => p.Department).Width(140);
                columns.Bound(p => p.CourseID).Width(120);
                columns.Bound(p => p.BlockNumber).Width(100).Title("Block #");
                columns.Bound(p => p.CourseName);
                columns.Bound(p => p.EventStartDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
                columns.Bound(p => p.EventEndDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
                columns.Bound(p => p.EvalStartDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
                columns.Bound(p => p.EvalEndDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
            })
            .ToolBar(toolbar => { toolbar.Custom().Text("Set Selected Evaluation Dates").HtmlAttributes(new { id = "setEvalDates", style = "float: right" }); })
            .Events(ev => ev.DataBound("db"))
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:500px;" })
            .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
                .Model(model => model.Id(p => p.Department + "-" + p.CourseID))
                .Read(read => read.Action("Courses_Read", "CourseConfiguration"))
                .Update(update => update.Action("Courses_Update", "CourseConfiguration"))
                )
            )
        </div>
    </div>
    <div class="row">
        <div class="col-xs-18 col-md-12">
            @Html.Kendo().Button().Name("GenerateBlueFiles").HtmlAttributes(new { id = "generateBlueFiles", @class = "btn btn-default" }).Content("Generate Blue Files")
        </div>
    </div>

And then the javascript that gets called by the GenerateBlueFiles button is:

$("#generateBlueFiles").click(function (e) {
            e.preventDefault();

                var grid = $('#grid').data('kendoGrid');
                var gridContents = grid._data;
                var sel = grid.selectedKeyNames();
                console.log(sel.join(", "));  //This writes out a blank line, even if I have one or more rows selected.
                for (var x = 0; x < gridContents.length; x++) {
                    if (gridContents[x].Selected) {
                        var record = {
                            "Year": gridContents[x].Year,
                            "Selected": gridContents[x].Selected,
                            "Department": gridContents[x].Department,
                            "CourseID": gridContents[x].CourseID,
                            "BlockNumber": gridContents[x].BlockNumber,
                            "CourseName": gridContents[x].CourseName,
                            "EventStartDate": gridContents[x].EventStartDate,
                            "EventEndDate": gridContents[x].EventEndDate,
                            "EvalStartDate": gridContents[x].EvalStartDate,
                            "EvalEndDate": gridContents[x].EvalEndDate
                        }
                        selectedCourseInformation.push(record);
                    }
                }

The example in the docs only shows getting the rows using the onChange method of the grid control.  How do I accomplish something similar from outside of the grid control.  Previously, I grabbed a handle on the grid control and interrogated the contents to see if my custom Selected column was set to true, but that doesn't work, and the selectedKeyNames() doesn't seem to work when I grab the handle to the grid from outside of the grid itself.  If someone could point me in the right direction on getting the selected rows, I would appreciate it.

Thanks,

Mike

I have a Kendo UI MVC grid that I am trying to filter based on value of the drop down lists selected. The filtering can be on any combination of the 3 dropdownlists. I have created a javascript function to do the filtering on a change event, and I see the 3 different filters while looking in the console. However when it gets to the controller only the first filter value is used.

According to telerik the resize and expand of grid should works like in the link

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/resize-grid-when-the-window-is-resized

But this can not be used with the asp.net core wrapper.

I am using Scrollable(s => s.Height("auto")) that generates the configuration scrollable: { height: "auto"  }, and what I need is not to be generated or scrollable: true

The unexpected behaviour can be viewed here: https://dojo.telerik.com/OTuTEQOf where every other refresh the grid has the expected size or its auto.

What is the alternative for asp.net core and of course for asp.net framework to have this functionality?

Hello,

So i have this template for a combobox which looks like this:

@model ManTime.Web.ViewModels.TimeReportProjectPropertiesViewModel

@(Html.Kendo().ComboBoxFor(m => m)
      .DataValueField("ProjectId")
      .DataTextField("ProjectCode")
      .Filter("startswith")
      .ClearButton(false)
      .Suggest(true)
      .AutoBind(false)
      .BindTo(ViewData["projects"] as IEnumerable))

The ViewModel for the combobox looks like this: 

        public int ProjectId { get; set; }
        public int InvoicingCompanyId { get; set; }
        public string ProjectCode { get; set; }

        public string InvoicingCompanyName { get; set; }

        public string TimeReportApprover { get; set; }

I am displaying this in a grid with the following column structure:

@(Html.Kendo().Grid<TimeReportViewModel>()
        .Name("TimeReportsGrid").HtmlAttributes(new { @class = "shadow-sm" })
        .Columns(columns =>
        {
            columns.Command(command => command.Destroy().Text(" ").IconClass("fa fa-trash-alt")).Media("(min-width: 450px)").Width(100);
            columns.Command(command => command.Custom("Copy").Text(" ").Click("copyRow").IconClass("fa fa-copy")).Media("(min-width: 768px)").Width(100);
            columns.Bound(p => p.ApprovalStatus).Filterable(false).Width(150).Media("(min-width: 450px)");
            columns.Bound(p => p.Date).Width(200).Media("(min-width: 450px)");
            columns.Bound(p => p.TimeReportProjectProperties).Sortable(false).Filterable(false).Width(180).ClientTemplate("#=TimeReportProjectProperties.ProjectCode#").Media("(min-width: 450px)");
            columns.Bound(p => p.InvoicingCompany).Width(250).Sortable(false).Filterable(false).ClientTemplate("#=TimeReportProjectProperties.InvoicingCompanyName#").Media("(min-width: 450px)");
            columns.Bound(p => p.Days).Width(100).Sortable(false).Filterable(false).ClientTemplate("#=Days.Days#").Media("(min-width: 450px)");
            columns.Bound(p => p.IsBillable).Width(150).Media("(min-width: 450px)");
            columns.Bound(p => p.Comment).Media("(min-width: 450px)");
            columns.Bound(p => p.Approver).Width(250).ClientTemplate("#=TimeReportProjectProperties.TimeReportApprover#").Media("(min-width: 450px)");
            columns.Template("#=resColTemplate(data)#").Title("Time Report").Media("(max-width: 450px)").Width(350);
        })

The column " columns.Bound(p => p.TimeReportProjectProperties)" is the combobox-template itself and when the value of this combobox changes it also changes the columns InvoicingCompany and Approver.

To achieve this i have an event for CellClose which refreshes the grid like this "$('#TimeReportsGrid').data('kendoGrid').refresh();". This then updates the values in the grid from the selected value in the clienttemplate combobox.

The problem is that whenever a combobox value is empty (selectedindex -1) it sets all of the comboboxes in the grid value to "object Object" whenever i click on them.

This won't happen if i don't refresh the grid. However i have to refresh the grid to get the updated values on columns InvoicingCompany and Approver when the combobox value changes and cell is closed (CellClosed).

Passing local data to the chart.  I pass the following class to the model of the partial view:

Here's the code for the chart:

Any ideas as to why no data is showing... The Title is showing.

-Lester

Hi,

I have a few events on one day.   In the month view, is there a way to control how many it shows?  Also, where do I control what happens when I click the "..." to view more?   Thank you.