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. 

Hi,

I use the numericTextBox in our Cordova/AngularJS application. If I focus the numericTextBox it opens the normal alpha-numeric keyboard and not the numeric keyboard like expected.

Is it possible to make that the numeric keyboard appears on focus?

With best regards

Johann

Hi,

i'm only getting this error in IE11, It appears to be working in Firefox and Chrome fine. According to similar posts i have checked and I do not have jquery loaded twice (as far as i can see). I've attached an example project.

Thanks

 

 

I have a list view that uses a datasource (see list view code below). Loads, works fine, no errors. When you click on an item in the list view, it redirects the URL to another page. After that redirected page shows up, a half-second later an error comes in the console that isn't very useful (see error below). After much tracing it seems that the error is being generated by the list view code which has since been unloaded because of the redirect.

Do I need to unregister/destroy datasources and widgets somehow before I redirect a page? Or some other problem? Apologies it's vague, very hard to debug.

Any help appreciated.

Cheers,

Brett

 

ListView Code:

 

Error:

I am using the kendo Treeview with check boxes to control what is displayed on a map. The Data in the tree view has many children. In some cases 6 layers deep or more. This caused the treeview to populate very slowly. I decided to use load on demand but now when i disable a check box the children are not affected. So then i tried to load the nodes when the user tries to disable them and is very slow. Currently I resorted to storing a copy of the data in localStorage. Then on change i modify all of the relevant nodes and their checked values in localStorage. Then I try to sync the dataSource which then runs the update function defined as part of a custom transport. All of this works perfectly unless I have unchecked the parents at least 2 levels up and then i try to check just one child in the lowest level. Below is the javascript code i have so far. When debugging I have observed the state of the dataSource and everything looks as expected(the nodes checked values are set as expected and they are marked as dirty).  I would appreciate some direction here. I feel i am missing something. Maybe there is a better way to implement this solution altogether. Thanks in advance!

function populateVehicleTree(data, isServerData) {
    //If the data was populated from server data then we need to initialize local storage. Otherwise the data came from localStorage.
    if (isServerData) {
        localStorage.setItem("kendoTree", data)//saved kendo treeview data
    }
    //Create DataSource
    var timer1 = performance.now();
    var dataSource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: function (e) {
                var localData = JSON.parse(localStorage.getItem("kendoTree"));
                e.success(localData);
            },
            update: function (e) {
                e.success(e.data);
            }
        },
        schema: {
            model: {
                id: "VehicleId",
                children: "ChildGroups",
            }
        },
    });
    dataSource.read();
    var timer2 = performance.now();
    console.log("Time to create hierarchical datasource:" + (timer2 - timer1).toString());

    //populate the Kendo treeView
    timer1 = performance.now();
    $("#vehicletreeview").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },
        check: onChange,
        expand: onExpand,
        dataSource: dataSource,
        dataTextField: "Name",
        loadOnDemand: true
    });
    timer2 = performance.now();
    console.log("Time to populate vehicle tree view:" + (timer2 - timer1).toString());
}

function onChange(e) {
    //Find the node that is being changed.
    var treeViewDataSource = $("#vehicletreeview").data('kendoTreeView').dataSource;
    var treeView = $("#vehicletreeview").data('kendoTreeView');
    var changedNode = $("#vehicletreeview").data('kendoTreeView').dataItem(e.node);

    //Update local storage appropriately. Then when the user expands the tree i will use the OnExpand event to set the most immediate childrens checkbox states to match localStorage definitions. 
    var temp = localStorage.getItem("kendoTree");
    var currentLocalStorageJsonObject = JSON.parse(temp);
    //Find the node in local storage that needs to be updated and update it.
    currentLocalStorageJsonObject[0] = updateLocalStorageCheckBoxStates(currentLocalStorageJsonObject[0], changedNode);
    //Now set local storage equal to the stringified version of the updated currentLocalStorageJsonObject
    localStorage.setItem("kendoTree", JSON.stringify(currentLocalStorageJsonObject));//saved kendo treeview data

    treeViewDataSource.sync() 

    //update the map.
    var checkedNodes = [];
    var matchingNode = [];
    var matchingNode = lookupLocalStorageNode(currentLocalStorageJsonObject[0], changedNode, matchingNode);//I need to pass the localStorage node because the treeView node doesn't have any children loaded and im trying to avoid having to load them
    checkedNodes = getLowestLevelNodesAsArray(matchingNode[0], checkedNodes);
    if (changedNode.checked) {
        addPins(checkedNodes);
    }
    else {
        removePins(checkedNodes);
    }
}

 

Hello! 

We used Tomcat and it worked, but now we need to try GlassFish (payara-5.191) and Kendo doesn't work.

I would like to use a custom formula on date validation: similar to this approach. Although I need the cell editor to be a datepicker (calendar view).

Something like this, although it shows empty calendar

How can I set a grouping that is not in the grid, but have a nice title.

https://dojo.telerik.com/OcUFuLom

 

I want group by school id, but that the grouping header have school name.

 

So instead of school.id: 33, I want there to be School : Test