I am looking for a solution to an issue with date filtering in the Kendo grid control.  
Below are example MVC code segments for this issue.  We are currently on Kendo 2018.2.620.440 version.

Issue:
The issue is that the grid date being displayed and used for filtering is incorrect in that it is minus one day.  The web server is running 
in UTC time and I the client are running in US Central Time.  I understand how to use the client template for the column to display the date 
correctly using a string property of the date, but in order to filter we need to be filtering on the date property so that the filter menu
displays for dates (IsEqualTo, IsGreaterThanOrEqualTo, IsLessThanOrEqualTo).  If I change the column to use a string date property
the filter menu display entries for text filtering, not date filtering.

Running the code locally has no issue since the web server and client are running in the same zone. It's when the web server is 
running in a different zone. I understand that the Kendo grid is converting the date from the server (running in UTC) to the client zone.  
Is there a way to stop this or what can I set on the server date object so it would not convert the date.


Code:
------------------------------------------------------------------------------------------------
Model: UserAccountModel.cs

    public class UserAccountModel
    {
        public UserAccountModel();

        public string ID { get; set; }
        public DateTime? BirthDate { get; set; }
        public string DisplayName { get; set; }
    }
}


------------------------------------------------------------------------------------------------
View: MemberAccounts.cshtml

<div class="row">
    @(Html.Kendo().Grid<UserAccountModel>(appEmpList)
        .Name("MemberApplicationDatesGrid")
        .HtmlAttributes(new { @class = "editor-grid" })
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(3)
        )
        .Columns(columns =>
        {
            columns.Bound(e => e.BirthDate).Format("{0:d}").Sortable(true).Filterable(true).Title("Date");
            columns.Bound(e => e.DisplayName).Filterable(true).Sortable(true).Title("Name");
        })
        .Scrollable()
        .Resizable(r => r.Columns(true))
        .Sortable(sortable => sortable
            .AllowUnsort(false)
            .SortMode(GridSortMode.SingleColumn))
        .Filterable(filterable => filterable
            .Extra(false)
            .Messages(msg => msg.Clear("Clear"))
            .Mode(GridFilterMode.Menu).Operators(operators => operators
                .ForDate(date => date.Clear()
                    .IsEqualTo("Equal To")
                    .IsGreaterThanOrEqualTo("Greater Than Or Equal To")
                    .IsLessThanOrEqualTo("Less Than Or Equal To")
                )
            )
        )
        .DataSource(d => d.Ajax()
            .Events(e => e.Error("onWebApiError"))
            .Model(m => m.Id(e => e.ID))
            .ServerOperation(false)
            .PageSize(10)
        )
    )
</div>


------------------------------------------------------------------------------------------------
Controller Method: MemberBase.cs

[HttpGet]
public ActionResult MemberAccounts()
{
//set mock data
List<UserAccountModel> appMbrList = new List<UserAccountModel>();
for (int idx = 0; idx < 20; idx++)
{
appMbrList.Add(new UserAccountModel()
{
BirthDate = DateTime.Now.AddYears(-idx).Date,
ID = idx.ToString(),
DisplayName = "Name-" + idx.ToString()
});
}
ActionResult actionResult = this.View(appMbrList);

return actionResult;
}

I would like to have a Kendo Scheduler of a complete year where a major tick is a month, and a minor tick is half of the month.
I created a custom view representing an year, that's ok but this view represent an year where each majortick is a day due to the majortick that can have only minutes values.

This is the custom view:

this are the property of the view in the init:

How I've already said, I would like to have a scheduler with a complete year where the major tick represent a month and the minortick represent half month(not 30 days but exactly a month).
Is this possible?

When performing an update on the grid it sends all column data.

How can I Send only changed (with dirty class) data?

Hi,

        After upgrading recently, the browser shows error message as shown in attachment. The scenario is that I have a tree structure and will step through each node, and show or hide a button for each step. Then for each execution, we get the error message in browser console, which is annoying. It worked fine before and not sure if we need to change after upgrading. Can you help me to detect it? Thanks.

Best regards,

James

Hi all,

I am rather new to JS and Kendo UI and I am trying to hook up a Kendo UI Grid to a sharepoint list via the Sharepoint REST Interface.

So far I have set up a datasource for read, create, update and destroy and it is working like charm. My biggest issue I have are the different Sharepoint field types.

 

CRUD operations for simple text, date, number fields are working without an issue. But I don't understand how to implement fields like choice filelds, lookupfields, people and groups fields. Can somebody show me an working example how to properly display a people-and-groups column in the grid and how to edit it? Same for a choice field.

 

Many thanks in adavance.

 

Hello

I keep getting null values   I am trying to get a list of  int  or string for  selected  DataValueField.

Thank you,    


 @using (Html.BeginForm("SetPermitValues", "BusinessLocation"))
            {
                <div class="modal-body">
                    <label asp-for="SelectedPermitTypes" class="control-label"></label>
                    @(Html.Kendo().MultiSelectFor(b => b.SelectedPermitTypes)
                                                    //.Name("businessPurposes")
                                                    .HtmlAttributes(new { style = "width:100%" })
                                                    .Placeholder("Choose...")
                                                    .DataValueField("Value")
                                                    .DataTextField("Text")
                                                    .DataSource(source =>
                                                    {
                                                        source.Read(read =>
                                                        {
                                                            read.Action("GetPermitTypesAsync", "BusinessLocation", new { id = Model.Id });
                                                        });
                                                    })
                    )
                    <span asp-validation-for="SelectedPermitTypes" class="text-danger"></span>
               
                </div>
                <div class="modal-footer">
                    <button type="button" id="HidebtnModal" class="btn btn-primary">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add New Permit</button>

                </div>
            }

   [HttpPost]
        public ActionResult SetPermitValues(List<int> Value)
        {
            
        }

I'm trying to use kendo grid and ASP.NET Web Api,

I use read (with additional parameter), and update function,

but when I execute update (Save Changes), front end console error happen....

so, I appropriate any help..

 

----------------------------------------------------------------------------------------------------------------

My Step as below:

step1. query with additional parameter with Ajax (choose datepicker, and press "QueryByDate" button) => success 

step2. modify data in Grid

step3. then press "Save Changes" button to update => console error as below:

 

kendo.web.js:7040 Uncaught TypeError: r.transport[i].call is not a function
    at Object.<anonymous> (kendo.web.js:7040)
    at Function.Deferred (jquery.min.js:2)
    at init._promise (kendo.web.js:7037)
    at init._send (kendo.web.js:7059)
    at init.sync (kendo.web.js:6802)
    at init.saveChanges (kendo.web.js:61295)
    at HTMLAnchorElement.<anonymous> (kendo.web.js:61457)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)

----------------------------------------------------------------------------------------------------------------

1.(front-end) HTML:

<input id="datepicker" title="datepicker" />

<button id="btnSearch">QueryByDate</button>
<div id="grid">

<script>
    $("#btnSearch").click(() => {
        grid.setDataSource(ds);
        grid.dataSource.read();
    });

    let ds = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                let myDate = $("#datepicker").val();
                $.ajax({
                    url: "API_Reg12StationStress/GetByDate",
                    type:"get",
                    dataType: "json",
                    data: { queryDate: myDate},
                    success: function (result) {
                        options.success(result);
                    }
                });
            },
            update: {
                url: "API_Reg12StationStress/Update2",
                type: "get",
                dataType: "json"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }   
            }
        },
        batch: true,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { editable: false },
                    name_level1: { editable: false },
                    name_level2: { editable: false },
                    stress_data1: { editable: true },
                    stress_data2: { editable: true },
                    data_YYYYMMDD: { editable: false }
                }
            }
        }
    });

    let grid = $("#grid").kendoGrid({
        toolbar: [
            { name: "save" },
            { name: "cancel" }
        ],
        editable: false,
        noRecords: {
            template: "查無資料"
        },
        columns: [
            { field: "name_level1", title: "廠所別" },
            { field: "name_level2", title: "記錄地點" },
            {
                title: "水壓指示",
                columns: [
                    { field: "stress_data1", title: "上午" },
                    { field: "stress_data2", title: "下午16時" },
                    { field: "data_YYYYMMDD", title: "提供時間" }
                ]
            }
        ]
    }).data("kendoGrid");

</script>

 

----------------------------------------------------------------------------------------------------------------

2.ASP.NET MVC (back-end) :

public class API_Reg12StationStressController : Controller

{

     MyEntities _db = new MyEntities();

 

      public ActionResult GetByDate(string queryDate) //Query By Date (ex:2019/4/12)
        {
            DateTime dtQuery = DateTime.Parse(queryDate);
            List<REG12_STATION_STRESS> models = _db.REG12_STATION_STRESS.Where(model => model.report_date == dtQuery).ToList();
            return Json(models, JsonRequestBehavior.AllowGet);
        }


        public ActionResult Update2() //Update batch data
        {
                 var jsonString = this.HttpContext.Request.QueryString.Get("models");

                IEnumerable<REG12_STATION_STRESS> updateItems = null;

                DataContractJsonSerializer deserializer = new DataContractJsonSerializer(typeof(IEnumerable<REG12_STATION_STRESS>));
                using (MemoryStream stream = new MemoryStream(Encoding.UTF8.GetBytes(jsonString)))
                {
                    updateItems = (IEnumerable<REG12_STATION_STRESS>)deserializer.ReadObject(stream);
                }

                foreach (var item in updateItems)
                {
                    var target = _db.REG12_STATION_STRESS.FirstOrDefault(x => x.id == item.id);
                    target.stress_data1 = item.stress_data1;
                    target.stress_data2 = item.stress_data2;
                }
                _db.SaveChanges();

                bool act = true;
                return Json(act, JsonRequestBehavior.AllowGet);
        }

 

 

I have installed @progress/kendo- with NPM and I have used to bundle the files I need to use a GRID and a COMBOBOX but so far I can't to minify the files that I get from . Both files are too long, I think. This is my config files to get GRID and COMBOBOX bundle and its and images:

------------------------------------------------------------------------------------------------

** appJS.js

$ = require('jquery');
require("@progress/kendo-/js/kendo.grid.js");
require("@progress/kendo-/js/kendo.combobox.js");

------------------------------------------------------------------------------------------------
** appCSS.js

require("@progress/kendo-//web/kendo.common.min.css");
require("@progress/kendo-//web/kendo.default.min.css");
require("@progress/kendo-//web/kendo.default.mobile.min.css");

------------------------------------------------------------------------------------------------

** webpack.config.js

var path = require('path');
var UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    entry: {
        main: './Scripts/appJS',
        css: './Scripts/appCSS'
    },

    output: {
        publicPath: "/js/",
        path: path.join(__dirname, '/wwwroot/js/'),
        filename: '[name].kendo.builds.js'
    },

    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true
            })
        ]
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' }
                ]
            },
            {
                test: /\.(svg|gif|png|eot|woff|ttf)$/,
                use: [
                    { loader: 'url-loader' }
                ]
            }
        ]
    }
};

------------------------------------------------------------------------------------------------

With this configuration I get two files, main.kendo.builds.js and css.kendo.builds.js. The main are 998 KB and the css are 8954 KB.

What should I do to get them in minified format ????

I have some data that I want to display in a [Kendo UI Stacked Bar Chart](https://demos.telerik.com/kendo-ui/bar-charts/stacked-bar). I can see the data in the console and I can see what one of the data points is as well, but for some reason Kendo UI is unable to display the data.

Earlier I had dummy data as

      series: [{
          name: "test",
          data: [100],
          color: "#1FA8E0"
      }, {

and the bar went to 100 as expected, so as far as I'm concerned I'm passing data in the correct location.

### JS snippet:

    function _loadWODataSet() {
        var curDate = new Date(),
            _startDate = '1-1-' + curDate.getFullYear(),
            _endDate = curDate.getMonth() + '/' + 
                       curDate.getDate() + '/' + 
                       curDate.getFullYear();
        GetHSClassData("ClassHere", 
            "WOffAmt, WUWDAmt", 
            "@DISTINCT and WorkDate >= '" + _startDate + 
            "' and WorkDate <= '" + _endDate + "'",
            "", function(results) {
                createWOChart(results);
            });
    }
    function createWOChart(payload) {
        $("div[report='wo-report']").kendoChart({
            title: {
                text: "WO-Title"
            },
            seriesDefaults: {
                type: "column",
                stack: true
            },
            chartArea: {
                width: 200,
                height: 500
            },
            series: [{
                name: "WOffAmt",
                data: payload[0].woffamt,
                color: "#1FA8E0"
            }, {
                name: "WUWDAmt",
                data: payload[0].wuwdamt,
                color: "#473F38"
            }],
            valueAxis: {
                min: -2000,
                max: 2000,
                majorUnit: 1000,
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: false
                }
            },
            categoryAxis: {
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        });
        console.log(payload);
        console.log(payload[0].woffamt); // -1100
    }

### Elsewhere in JS, before the above code:

    function _loadDatasets(){
    // irrelevant code here
        JSON.parse(sessionStorage.getItem('dsPYMTD'))[0].Error){
            _getCFDataset();
            _loadW0DataSet();
        }
    
        loadCount = 0;
        _detectDatasets();
    }

### Other JS file: https://jsfiddle.net/tx0z43fn/

### Console screenshot: https://i.stack.imgur.com/AUSJo.png

Hi there

Could you give me a clue on how to include the row select check box to the grid?
The example from Telerik Web site:

columns: [ { selectable: true, width: "50px" },
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}"},
{ field: "UnitsInStock", title:"Units In Stock"},
{ field: "Discontinued"}]  

is the static one but I need a hint on how to declare "selectable" in javascript dynamically. This is how I populate it:

for (i = 0; i < kendoData.columns.length; i++)
                    {
                        var column = kendoData.columns[i];
                        var ccolumn = data.ColumnDefinitions.filter(function (x) { return x.field == column.field; })
                        if ((ccolumn.length == 0) || (!ccolumn[0].visible))
                        {
                            kendoData.hideColumn(i);
                            continue;
                        }
                                               
                        if (ccolumn[0].width > 0) kendoData.resizeColumn(column, ccolumn[0].width+24);
                        $("#grid th[data-field=" + column.field+"] .k-link").html(ccolumn[0].title);
                    } 
The column variable does not expose a selectable. How can I do column.selectable=true? Maybe hook to any cell event?
Thanks.