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.

I am using Kendo UI for ASP.NET Core along with Bootstrap 4 and running into an issue with the responsive layouts of the grid on mobile devices. Upon further investigation, it appears to be a bug as I can reproduce it on the Kendo demo site.

The problem: When using the Bootstrap-v4 theme from Kendo, on mobile views the grid pager does not responsively update for the limited width as it does with other themes.

To reproduce: (I'm using Chrome) Go to https://demos.telerik.com/aspnet-core/grid/index, ensure the "Default Theme" is selected, using developer tools, toggle the device toolbar. Notice on the mobile views that the grid pager is properly formed (image attached). Now, switch back to the desktop view, select the Bootstrap-v4 theme, and again use dev tools to switch to the mobile view. The pager has not updated to properly display in a responsive fashion for the mobile device width. (image attached)

Hi.

Trying to create a custom template for event editing using SchedulerEditableSettingsBuilder.TemplateName method but template seems to be ignored no matter what folder I put the template in.

page source:

~/Pages/EditorTemplates/TestEditorTemplate.cshtml

But the template is not detected and default template is used.

Should I put the template in a different path, or is there a way to help the component detect the template?