Hello!

I've been researching how to better incorporate Kendo into our Gulp/NPM workflow. Here's what I'm trying to do:

1) Include Kendo in my project's package.json file
2) npm install to get the latest
3) Run a gulp task to get my custom version of Kendo JS
4) Use this file in my project

I started here to get the kendo professional NPM package. I was able to get them with this npm command:

I got the npm package just fine, but noticed there is no gulpfile.js that I could run the task gulp custom -c widgetA, widgetB, based on this documentation. I did some more digging and found that downloading the source code from the Downloads page includes the gulpfile, which I was able to gulp custom from.

I was also seeing some threads hinting around the idea, here. Foundation makes it very easy to build my own js package with their NPM package/files. I was hoping I could easily build my own files too.

Any ideas how I can build a custom version of Kendo Professional JS with the NPM package? Either through Kendo's gulp task or my own gulp task. Thanks!

Fillip

We have Kendo Editable Grids with editables as opups. On these popups we have a number of Drop Downs. Based on the values that a user selects , we want to make certain fields apper\disappear , change value etc. 

But we are getting a java script error 

Refer the Example here

var ProductModel = kendo.data.Model.define({
    id: "ProductID",
    fields: {
        ProductID: { type: "string" },
        ProductName: { type: "string" },
        ContactName: { type: "string" },
        UnitPrice: { type: "number" },
        UnitsInStock: { type: "number" },
        Discontinued: { type: "bool" }
    }
});

var productDatasource = new kendo.data.DataSource({
    data: [{"ProductID":1,"ProductName":"Chai","UnitPrice":18,"UnitsInStock":39,"Discontinued":false},{"ProductID":2,"ProductName":"Chang","UnitPrice":19,"UnitsInStock":17,"Discontinued":false},{"ProductID":3,"ProductName":"Aniseed Syrup","UnitPrice":10,"UnitsInStock":13,"Discontinued":false},{"ProductID":4,"ProductName":"Chef Anton\u0027s Cajun Seasoning","UnitPrice":22,"UnitsInStock":53,"Discontinued":false}],    
    schema: {
        model: ProductModel
    }                
});
var actionDataSource = new kendo.data.DataSource({
    data: [
        {"Value": 1, "Text": "Edit"},
        {"Value": 2, "Text": "Delete"},
        {"Value": 3, "Text": "Preview"},
        {"Value": 4, "Text": "Clone"}
    ]
});

var onClick = function (event, delegate) {
      event.preventDefault();
      var grid = $("#grid").data("kendoGrid");
      var selectedRow = grid.select();
      var dataItem = grid.dataItem(selectedRow);
      if (selectedRow.length > 0)
        delegate(dataItem);
      else
        alert("Please select a row.");
      };

$(function() {
    var viewModel = new kendo.data.ObservableObject({
        dataSource: productDatasource,
        actionSource: actionDataSource,
        
        onChange: function (event) {
            onClick(event, function (dataItem) {
                alert(dataItem.ProductID + " " + dataItem.ProductName);
            });            
        },
        
    });
    
    kendo.bind($("#grid"), viewModel);
});

<script type="text/x-kendo-template" id="ddlGrid">
    <input data-role="dropdownlist"
           data-text-field="Text"
           data-value-field="Value"
           data-bind="source: actionSource, events: { change: onChange}"/>
</script>
    <div class="demo-section">
        <div class="k-content" style="width: 100%">
            <div id="grid"
            data-role="grid"
            data-toolbar="[{'name': 'create', 'text': 'Add'}]"
            data-role="grid"
            data-scrollable="true"
            data-editable="popup"
            data-selectable="true"
            data-filterable="true"
            data-sortable="true"
            data-pageable="true"
            data-columns="[
                { field: 'ProductID' },
                { field: 'ProductName' },
                { field: 'UnitPrice' },
                { field: 'UnitsInStock' },
                { field: 'Discontinued' },
                { title: 'Action', template: kendo.template($('#ddlGrid').html())} ]"
            data-bind="source: dataSource, event">
            </div>
        </div>
    </div>

Hi All,

I'm new in kendo UI and i want to know that how can i pass a date picker or any other selector value from one page to another page and according to that value how can I fetch data from database(using PHP or ASP.NET C#)  to display it in grids or graphs.I have attached an Mockup of my requirement.

Kindly Give some solution for this.

Thanks,

Amit Sah

I have configured a scheduler control, see below, to read tasks from a rest service. However, nothing is displayed within the scheduler. If I take the raw JSON from the rest services response and put it directly into the configuration it will display within the scheduler. Below is the configuration:

$('#scheduler').kendoScheduler({

      date: new Date('2016/10/31'),
      startTime: new Date('2016/10/31 12:00 am'),
      dataSource: {
        batch: true,
        transport: {
          read: {
            url: 'http://localhost:52089/api/v1/calendar/events',
            dataType: 'json'
          }
        },
        //data: [{"id":1,"dossierCustomerId":"1234ABCD","start":"2016-10-31T12:00:00Z","timeZone":null,"end":"2016-10-31T16:00:00Z","title":"Test Event","description":"This is a test event created by Frank.","ownerId":1,"isAllDay":false,"recurrenceRule":null,"recurrenceException":null,"eventResources":[]}],
        schema: {
          model: {
              id: 'id',
              fields: {
                  //taskID: { from: 'id', type: 'number' },
                  title: { from: 'title', defaultValue: 'No title', validation: { required: true } },
                  start: { type: 'date', from: 'start' },
                  end: { type: 'date', from: 'end' },
                  description: { from: 'description' },
                  ownerId: { from: 'ownerId', defaultValue: 1 },
                  isAllDay: { type: 'boolean', from: 'isAllDay' }
              }
            }
        }
      }
    });

The JSON returned from the service:

[{"id":1,"dossierCustomerId":"1234ABCD","start":"2016-10-31T12:00:00Z","timeZone":null,"end":"2016-10-31T16:00:00Z","title":"Test Event","description":"This is a test event created by Frank.","ownerId":1,"isAllDay":false,"recurrenceRule":null,"recurrenceException":null}]

Any help would be appreciated.

I have a kendo ui grid with toolbar create.
In that, I want to disable 2nd column(here "operand" column) when 1st row is inserted.
From 2nd row onwards, I want that column to be enabled.

Can someone please help me achieve this?
I am struggling to have this much of control in kendo grid.
Here is the code below:

Have a json array that has arrays of arrays.  However, the key value pair of an array is displaying "[object Object]"  when I add the template "=#manufacturer.name" I get undefined.  Can the grid handle this type of json object.  See attached file for object layout.  I am using Kendo UI Grid with AngularJS 1.15

Hi,

There is any way to lock the command column as you can lock any other column?

I need the buttons always visible even when you scroll horizontally.

Thanks.

Hi everyone.

I've been experiencing some issues with the following listView.

And this is the JS code.

The problem is with the filter input for the ListView component which always return the first records, btw the filter is applied on the 'CompanyName' property

For example if my elements are: ["AA" , "BB",  "CC", "ZA", "YA" ]

If I filter using the string 'A' the resulting elements will be "AA", "BB" and "CC", instead of "AA", "ZA" and "YA" which is the correct result.

I realized that If I remove the property serverPaging the filter works as expected with no issues, but as soon as the serverPaging property is placed this weird behavior appears. I do need the serverPaging property though :( 

Does anyone know what could be the root of this problem? It's been driving me crazy.

Thank you very much!

Hi,

I use cellIndex property on the grid. But it returns strange value when the grid has locked columns.

I tried the propety on the Frozen columns demo page using Google Chrome Developer Tools.

1. When I click "Order ID" cell at the first row and input $("#grid").data("kendoGrid").cellIndex($0) to the console, it returns 2.
2. When I click "Ship Name" cell at the first row and input $("#grid").data("kendoGrid").cellIndex($0) to the console, it returns 3.
3. When I click "Ship Country" cell at the first row and input $("#grid").data("kendoGrid").cellIndex($0) to the console, it returns 2.
4. When I click "Ship City" cell at the first row and input $("#grid").data("kendoGrid").cellIndex($0) to the console, it returns 3.
5. When I click "ShipAddress" cell at the first row and input $("#grid").data("kendoGrid").cellIndex($0) to the console, it returns 4.

I expect in above case 1 cellIndex returns 0, and in case 2 cellIndex returns 1.

Is this the correct behavior of cellIndex property?

We have added the Kendo Export to PDF Toolbar Button in the Grid.

But upon Exporting it is not exporting all the columns and also adding the other toolbars in the export

data-pdf = '{
allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
scale: 0.8
}',