Questions on Kendo UI for jQuery Forum

1 answer

718 views

I've installed the kendo angular 2 grid and now get this error. I have a commercial license but I don't seem to need to login for install the grid anymore. In the past we were required to use a npm login. What do I do to fix this error?

zone.js:881 GET http://localhost:64624/node_modules/@progress/kendo-angular-grid/ 403 (Forbidden)
(anonymous) @ zone.js:881
fetchFetch @ fetch.js:32
(anonymous) @ instantiate.js:167
ZoneDelegate.invoke @ zone.js:365
Zone.run @ zone.js:125
(anonymous) @ zone.js:760
ZoneDelegate.invokeTask @ zone.js:398
Zone.runTask @ zone.js:165
drainMicroTaskQueue @ zone.js:593
Promise resolved (async)
scheduleQueueDrain @ zone.js:552
scheduleMicroTask @ zone.js:560
ZoneDelegate.scheduleTask @ zone.js:387
Zone.scheduleTask @ zone.js:209
Zone.scheduleMicroTask @ zone.js:229
scheduleResolveOrReject @ zone.js:758
resolvePromise @ zone.js:707
(anonymous) @ zone.js:638
Promise resolved (async)
(anonymous) @ zone.js:873
ZoneAwarePromise @ zone.js:776
Ctor.then @ zone.js:872
resolvePromise @ zone.js:687
(anonymous) @ zone.js:760
ZoneDelegate.invokeTask @ zone.js:398
Zone.runTask @ zone.js:165
drainMicroTaskQueue @ zone.js:593
Promise resolved (async)
scheduleQueueDrain @ zone.js:552
scheduleMicroTask @ zone.js:560
ZoneDelegate.scheduleTask @ zone.js:387
Zone.scheduleTask @ zone.js:209
Zone.scheduleMicroTask @ zone.js:229
scheduleResolveOrReject @ zone.js:758
resolvePromise @ zone.js:707
(anonymous) @ zone.js:638
Promise resolved (async)
(anonymous) @ zone.js:873
ZoneAwarePromise @ zone.js:776
Ctor.then @ zone.js:872
fetchFetch @ fetch.js:33
(anonymous) @ instantiate.js:167
ZoneDelegate.invoke @ zone.js:365
Zone.run @ zone.js:125
(anonymous) @ zone.js:760
ZoneDelegate.invokeTask @ zone.js:398
Zone.runTask @ zone.js:165
drainMicroTaskQueue @ zone.js:593
Promise resolved (async)
scheduleQueueDrain @ zone.js:552
scheduleMicroTask @ zone.js:560
ZoneDelegate.scheduleTask @ zone.js:387
Zone.scheduleTask @ zone.js:209
Zone.scheduleMicroTask @ zone.js:229
scheduleResolveOrReject @ zone.js:758
resolvePromise @ zone.js:707
(anonymous) @ zone.js:638
Promise resolved (async)
(anonymous) @ zone.js:873
ZoneAwarePromise @ zone.js:776
Ctor.then @ zone.js:872
resolvePromise @ zone.js:687
(anonymous) @ zone.js:760
ZoneDelegate.invokeTask @ zone.js:398
Zone.runTask @ zone.js:165
drainMicroTaskQueue @ zone.js:593
Promise resolved (async)
scheduleQueueDrain @ zone.js:552
scheduleMicroTask @ zone.js:560
ZoneDelegate.scheduleTask @ zone.js:387
Zone.scheduleTask @ zone.js:209
Zone.scheduleMicroTask @ zone.js:229
scheduleResolveOrReject @ zone.js:758
resolvePromise @ zone.js:707
(anonymous) @ zone.js:638
Promise resolved (async)
(anonymous) @ zone.js:873
ZoneAwarePromise @ zone.js:776
Ctor.then @ zone.js:872
fetchFetch @ fetch.js:33
(anonymous) @ instantiate.js:167
ZoneDelegate.invoke @ zone.js:365
Zone.run @ zone.js:125
(anonymous) @ zone.js:760
ZoneDelegate.invokeTask @ zone.js:398
Zone.runTask @ zone.js:165
drainMicroTaskQueue @ zone.js:593
Promise resolved (async)
scheduleQueueDrain @ zone.js:552
scheduleMicroTask @ zone.js:560
ZoneDelegate.scheduleTask @ zone.js:387
Zone.scheduleTask @ zone.js:209
Zone.scheduleMicroTask @ zone.js:229
scheduleResolveOrReject @ zone.js:758
ZoneAwarePromise.then @ zone.js:847
Loader.import @ loader-polyfill.js:64
SystemJSLoader$1.import @ systemjs-loader.js:126
(anonymous) @ (index):114
(index):114 Error: Fetch error: 403 Forbidden
Instantiating http://localhost:64624/node_modules/@progress/kendo-angular-grid
Loading http://localhost:64624/app/app.module.js
Loading app
at http://localhost:64624/node_modules/systemjs/dist/system.src.js:1475:13 [<root>]
at Zone.run (http://localhost:64624/node_modules/zone.js/dist/zone.js:125:43) [<root> => <root>]
at http://localhost:64624/node_modules/zone.js/dist/zone.js:760:57 [<root>]
at Zone.runTask (http://localhost:64624/node_modules/zone.js/dist/zone.js:165:47) [<root> => <root>]
at drainMicroTaskQueue (http://localhost:64624/node_modules/zone.js/dist/zone.js:593:35) [<root>]
at <anonymous> [<root>]

Grid

answered on 10 Oct 2017

2 answers

300 views

Custom editor not called when template function is applided

Hello,

I noticed that custom editor is partially working, or I am doing something wrong.
This example works, when template is actually referencing the model. So, initial value is setup from the template referencing the model, and edit is done by calling "CustomEditor" function where I have full flexibility for editing (kendoDatePicker, kendoTimePicker, or even create my own HTML and append it to container). Here is definition of grid column:

gridColumns.push({

title: fieldDefinition.Title,

width: '100px',

field: fieldDefinition.Name,

template: "#=Fields[" + i + "].Value#",

editor: CustomEditor });

In addition I would like that my initial cells of grid looks a bit different, each cell have different behavior depending on model (enable/disable, color, background-color, ...).
To achieve that, I wanted to use function call in template instead of referencing the model. So I defined the function that will accept the model and index of current item in my model, and will return apropriate HTML depending on the model;

CreateTemplate(model, index){ .... }

And setup call to this function within the template:

gridColumns.push({

title: fieldDefinition.Title,

width: '100px',

field: fieldDefinition.Name,

template: "#= MyModule.createTemplate(data, " + i + ") #",

editor: CustomEditor });

Now, I have my template function getting called and initial cells are how I wanted them to be, but my CustomEditor is not called when I click on the cell, like it was called in the first example.

It seems that even propagation is stopped, so when I click on input that is added through template, CustomEditor is not called, but if I click in tiny space between cell and input element (that is inside the same cell) then CustomEditor is called.

Am I doing something wrong or this is bug/limitation in Kendo?

Regards,
Nole

Grid

answered on 10 Oct 2017

3 answers

162 views

Accessing Selected Rows within a page

Hello,

What is a recommended approach to getting:

1. The number of selected rows

2. The sum of one of the data-bound column's values across the selected rows

i.e., If the user selects two "Customer" rows, and the "Items Purchased" column in those rows have values 10 and 20, respectively, I need the display to be:

Customers: 2 Items Purchased: 30

If no rows are selected, then those displayed values would, of course, be 0.

The way the Grid is marked up is shown below. I did not create the application, but I am tasked with enhancing it as described and I don't want to bug the original developer and have them "do it for me". The application is using jQuery, so I have access to that. Thanks for your help.

<div id="gridWrapp" class="k-content" >

<div class="row">

<div class="col-md-12 center">

@(Html.Kendo().Grid<CustomerModel>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.ItemsPurchased).Width(35);

...

})

</div>

Grid

answered on 10 Oct 2017

4 answers

297 views

Visual bug on grouping

Hello

I plan to use the groupTemplate functionality of dropdownlist. There is a weird behaviour that also appears in your demo: groupTemplate -> Preview

I also have attached the visual bug as screenshot:

1. The very first group (Argentina) does not consider the groupTemplate as all other groups do.
2. The very first group (Argentina) gets his own line while all other group titles appears on the line of the first group entry.

I would expect the same behaviour for ALL group names. Is this a bug and if not, how can I fix it to make it look/position all the same?

DropDownList

answered on 10 Oct 2017

1 answer

1.1K+ views

using sum in row cell

Hi, I've got a grid containing a list of elements with a corresponding numeric value, where I use the aggregate functions to show the sum in the footer. Something like this:

ELEMENTS | VALUE

element1 | 1

element2 | 2

element3 | 3

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

TOTAL | 6

now I need to show beside the row number the percentual relative to the total, this way:

so I add to the VALUE column options this:

template: "#:value#<br>#=100*value/sum#%"

but the grid stops working, without even showing errors in the console. What am I missing?

Grid

answered on 10 Oct 2017

1 answer

98 views

Weird behaviour on inserting part time

Hello there

It took me some hours to nail this behaviour down to the problem: I have a time mask in which the user can enter a complete time or some part of a time. Anything left out will be interpreted by my code. After entering the (part) time by the user I do some checks in the change event of the MaskedTextBox and write the validated (part) time back into the MaskTextBox field. In some cases that doesn't work, f.e.:

User enters: Insert after validation:
10:__:__ AM 10:__:__ __

It should have inserted '10:__:__ AM' (like the original what the user typed)

I have attached a working example to this message. You'll see a MaskedTextBox and you only have to click the button 'Insert time'. This simulates the insert I do after time validation. This will work as it should and inserts '10:__:__ AM', fine! Now disable/remove the CDN script source 'http://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js' and activate/locate the kendo.all.min.js of the downloadable KendoUi of 'kendoui.for.jquery.2017.3.913.commercial.zip': This time the 'AM' will not be inserted by the 'Insert time' button.

I have no idea why it works with the CDN version but not with the downloadable commercial package (same version). I assume there are differencies. To make it even more confusing: Inserting a complete time like '10:10:10 AM' works fine in both cases.
I do already all this with a DATE MaskedTextBox (dd.mm.yyyy) and there it works fine (for full date or part of date).

Greetings

MaskedTextBox

answered on 09 Oct 2017

1 answer

1.6K+ views

Spreadsheet import/export

I am having trouble understanding what exactly is going on here in the snippet below.

I am attempting to upload a file to my web view spreadsheet but not save the file. What is going on with the ProxyURL, the "/kendo-ui/content/web/spreadsheet/products.json" and the "saveUrl: "/kendo-ui/spreadsheet/Upload". What do I need to change to allow the functionality to work locally for me while I am testing.

In a gist. I want to, Upload a file, save the file, display the file, and export the file. I can't figure this out exactly.

$(function () {

$("#spreadsheet").kendoSpreadsheet({

excel: {

// Required to enable Excel Export in some browsers

proxyURL: "https://demos.telerik.com/kendo-ui/service/export"

}

});

var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

$.getJSON("/kendo-ui/content/web/spreadsheet/products.json")

.done(function (sheets) {

spreadsheet.fromJSON({ sheets: sheets });

});

var ALLOWED_EXTENSIONS = [".xlsx", ".csv", ".txt", ".json"];

$("#upload").kendoUpload({

async: {

saveUrl: "/kendo-ui/spreadsheet/Upload"

},

multiple: false,

localization: {

"select": "Select file to import..."

},

select: function (e) {

var extension = e.files[0].extension.toLowerCase();

if (ALLOWED_EXTENSIONS.indexOf(extension) == -1) {

alert("Please, select a supported file format");

e.preventDefault();

}

},

success: function (e) {

// Load the converted document into the spreadsheet

spreadsheet.fromJSON(e.response);

}

});

$(".download").click(function () {

$("#download-data").val(JSON.stringify(spreadsheet.toJSON()));

$("#download-extension").val($(this).data("extension"));

});

Spreadsheet

answered on 09 Oct 2017

1 answer

312 views

Unable to download @progress module from node

When download module from node it give me exception like service not available.

General Discussions

answered on 09 Oct 2017

7 answers

486 views

[Solved] column expand when focus on cell

Hi,

Suppose If I have given fixed width for one column and overflow text will be hidden with ellipsis. I wanted to expand column to show full text when I focus on any cell of that particular column and when focus out it will back to old state(width). Could anyone please help me on this?

Thanks in Advance

Grid

answered on 09 Oct 2017

1 answer

5.2K+ views

Custom bool filter and advanced filter questions

Hello,
I'm trying to setup a custom filter for boolean. Is it possible? For the other filter types I have no problem, but for boolean filter I can't set up my UI widget. This is my code for filter set up:

filterable:
{
ui: function(element)
{
element.kendoDropDownList({
dataSource: new kendo.data.DataSource({
data: [
{text:"True", value:true},
{text:"False", value:false}
]}),
dataTextField: "text",
dataValueField: "value"
});
}
}

I would like to have a dropdown with the two value, "True" or "False". I don't have any errors, but the custom filter is not displayed.
Moreover I have also another couple of questions:

1) Is it possible to remove the "Or" logical operator from the dropdown? I would like to have only the "And" operator.
2) Is it possible to remove the "extra" field from only one filter? If I setup "extra:true" all the filters have the extra options.

Thanks

Grid

answered on 09 Oct 2017