Questions on Kendo UI for jQuery Forum

11 answers

1.0K+ views

Hello,

I want to have multiple filters on my grid. I've tried and tried but I can't get my logic to work. I'm getting some really wierd results back. I want to be able to filter on a company and by a type of vessel. The results are wrong so I need to know where I have messed up in my code.

Here is my javascript

function filterChange() {

var grid = $("#Grid").data("kendoGrid"),

ddl_owners = document.getElementById("owners"),

ddl_vessels = document.getElementById("vessel_types"),

value = this.value(),

if (value) {

grid.dataSource.filter(

{

logic: "and",

filters: [

{

field: "owner_company",

operator: "eq",

value: ddl_owners.value

},

{

field: "vessel_type",

operator: "eq",

value: ddl_vessels.value

}

]

})

} else {

grid.dataSource.filter({});

}

Here is my dropdown code (toolbar of the grid) for my dropdown filters.

@(Html.Kendo().ComboBox()

.Name("vessel_types")

.Placeholder("-- Select Type --")

.Suggest(true)

.Filter("contains")

.DataTextField("spot_name")

.DataValueField("spot_name")

.AutoBind(false)

.Events(e => e.Change("filterChange"))

.DataSource(ds =>

{

ds.Read("toolbar_Types", "Home");

}))

@(Html.Kendo().ComboBox()

.Name("owners")

.Placeholder("-- Select Owner --")

.Suggest(true)

.Filter("contains")

.DataTextField("owner_name")

.DataValueField("owner_name")

.AutoBind(false)

.Events(e => e.Change("filterChange"))

.DataSource(ds =>

{

ds.Read("toolbar_Types", "Home");

}))

What am I doing wrong and how do I use multiple filters at one?

Data Source

answered on 24 Mar 2020

5 answers

1.3K+ views

Tooltip incorrectly positioned first time it shows, but not after

The first time the tooltip shows, it is positioned in the middle of the item. Subsequently, it is positioned correctly. Here is a dojo.

If you hover over any of the boxes, the first time the tooltip shows it is pointing to approximately the bottom of the first line of text in the box. Subsequently, the tooltip is shown pointing to the top of the box (or the bottom, for the first box).

I am basing this off an old thread and its jsbin so it is certainly possible I'm doing something wrong.

Added bonus: sometimes the tooltip doesn't auto-hide. I haven't figured out the details of that yet.

ToolTip

answered on 23 Mar 2020

1 answer

338 views

kendo ui is not resolve its method in docker

We have asp.net core 3.1 version, typescript and kendo-ui-2018.2.620 for our web application, it was hosted in windows server with TFS pipeline. we use webpack and yarn for build client side package.

Now we are moving into azure with docker, so we reference the node docker image. we build the client packages as part the docker build step. we noticed, yarn install add node_modules folder inside @progress/kendo-ui directory, which is no there in local. also the bundle file refers the jquery from the node_modules directory inside kendo-ui and not from root node_modules.

Please find the attached document for the bundle file difference in docker.

General Discussions

answered on 20 Mar 2020

3 answers

98 views

Problem with Search if SharePoint

Hi, Dev Team!

I use Kendo Grid in my SharePoint site with searh panel (toolbar: ["search"])

If i press Enter button in search box - my SharePoint site goes to Edit Mode. How i can switch off this reaction?

Grid

answered on 20 Mar 2020

2 answers

99 views

Grid Navigation In Kendo

I have a grid which I need to refresh after changing a value in another container. this code is being called from the sync container, now I got it to read and refresh the grid but I want it to keep the current selected row(selected index) but my current code keeps sending it back to 0.

function onAssetGridRequestEnd(e) {

if (e.type == "create")

{

//Refresh Grid

var grid = $("#ContainerGrid").data("kendoGrid");

var dataRows = grid.items();

rowIndex = dataRows.index(grid.select());

grid.dataSource.read();

grid.dataSource.sync();

grid.select(rowIndex);

}

};

Grid

answered on 20 Mar 2020

3 answers

2.2K+ views

e.uniqueSort is not a function is thrown when jQuery version prior 2.2.x and 3.x is used together with Kendo UI R2 2019 (2019.2.514)

$.uniqueSort() is not supported in jQuery versions prior 2.2.x and 3.x . Thus, using jQuery version 1.10.x, 1.11.x, 2.0.x or 2.1.x throws an error.

The usage of $.uniqueSort() in jQuery 1.10.x throws an error in multiple components like Menu, DropDownList, DropDownTree, and TreeView.

This problem will be fixed in our upcoming service pack release R2 2019 SP1.

As a temporary workaround until the issue is fixed you can assign jQuery unique method implementation to the jQuery uniqueSort if missing before initialization of any Kendo UI widget on the page.

For example please refer to the https://dojo.telerik.com/AGAsAKAG/3 dojo where the following code

kendo.jQuery.uniqueSort = kendo.jQuery.uniqueSort ? kendo.jQuery.uniqueSort : kendo.jQuery.unique;

is included before the initialization of the Kendo UI widgets.

Please, accept our apology for the inconvenience caused!

General Discussions

answered on 19 Mar 2020

2 answers

456 views

Chart does not work with dataBound

In case others have the issue, I have posted my question on Stack Overflow.

https://stackoverflow.com/questions/60724995/kendoui-for-jquery-chart-databound-event-does-not-work

Here's a simplified example of my data:

[{"Name": "Bob", "Count":3}, {"Name": "Steve", "Count":5}]

What I want is a chart title of: Total FOO: 8. So the title must be based on the data. The data is AJAX and this is an ASP.MVC application.
In my CSHTML I have:

.DataSource(ds => ds.Read(read => read.Action("MeMethodName", "MyControllerName")))

.Events(events => events.DataBound("setChartTitle('chartName', 'Total FOO')"))

Here's the crazy hack I had to do:

function setChartTitle(name, title) {

let chart = $("#" + name).data("kendoChart");

if (chart) {

let ds = chart.dataSource;

let total = 0;

for (let i = 0; i < ds.data().length; i++) {

total += ds.data()[i].Count;

}

chart.options.title.text = title + ": " + total;

chart.refresh();

} else if (arguments.length < 3) {

// Data source was not found and this was initiated through Kendo. Wait and try again but only once

setTimeout(function () {

sumEntityCount(name, title, "stop");

}, 500);

}

This is really bad.

1. Accessing the kendoChart returns undefined, yet the chart itself called this. This is why I need to check if (chart) above.

2. This leads to a hacky ELSE block I added where I can call this again with a 500 ms delay. This alone is a bug as 500ms is a random number and may not be enough. I can't ship like this.

3. To prevent recursion I call the same function with a different parameter.

4. If the values are found, then I can't just set the chart options. I need to call refresh which redraws everything.

Questions:

1. Why is the kendoChart data undefined initially? Why has Telerik called dataBound when there's nothing there?!
2. Isn't there a dataBinding event? I don't want to do this after the fact nor do I want to refresh the whole thing.

Charts

answered on 19 Mar 2020

3 answers

1.3K+ views

Issue with AntiForgeryToken

I'm looking to set up AntiForgeryTokens throughout an application.

This works fine on normal forms (with @Html.AntiForgeryToken() helper), as well as AJAX posts by sending the token value in a cookie. However I have a problem in some cases when trying to send the cookie with requests from Kendo controls.

For example I have the following in a view:

@Html.AntiForgeryToken()

@(Html.Kendo().Grid<UniTech.ICAP.Extranet.Web.Models.ActivityViewModel.ActivityListItem>(Model.ActivityList)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(i => i.UserName);

columns.Bound(i => i.ActionString).Filterable(filterable => filterable.UI("actionFilter"));

columns.Bound(i => i.ItemString);

columns.Bound(i => i.RepositoryString);

columns.Bound(i => i.ActionDate).Title("Date").Width(150).Format("{0:dd MMM yyyy HH:mm}");

})

.Sortable()

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

))

)

.Resizable(resize => resize.Columns(true))

.DataSource(datasource => datasource.Ajax().ServerOperation(false).Read(read => read.Action("ActivityGridRead", "Admin")))

.Pageable(p => p.PageSizes(new[] { 10, 50, 100 }).Enabled(true))

)

Following from advice in other threads, I have the followin Javascript also on the page:

$(function () {

var grid = $("#Grid").data("kendoGrid");

grid.dataSource.transport.options.read.beforeSend = function (req) {

var header = $('[name=__RequestVerificationToken]').val();

req.setRequestHeader('__RequestVerificationToken', header);

};

});

When the page loads, the grid sends a POST to the server to get the activity grid items. There is an attribute that then validates the forgery token:

if (request.IsAjaxRequest())

{

var antiForgeryCookie = request.Cookies[AntiForgeryConfig.CookieName];

var cookieValue = antiForgeryCookie != null

? antiForgeryCookie.Value

: null;

AntiForgery.Validate(cookieValue, request.Headers["__RequestVerificationToken"]);

}

When the request is sent, the validation fails and I cant work out why. This seems to be a problem for any grid that sends a POST to retrieve the data rather than having the data when the page loads.

What I have noticed is that after the first POST fails validation, if I then run the following javascript in firebug console, the validation passes and the grid is populated:

var grid = $("#Grid").data("kendoGrid").dataSource.read();

Any ideas what I'm doing wrong here?

Thanks

Data Source

answered on 19 Mar 2020

2 answers

100 views

Paging/pager selection

Hi,

Extra li tag shows up when I select a page number.

Thanks,

Grid

answered on 18 Mar 2020

1 answer

386 views

Limit concurrent uploads

I have an upload system in my .Net Core site that allows for a user to upload as many files as they want at a time. The files are uploaded directly to an S3 bucket and then processed. The problem is that when uploading, lets say 1,000 files, the browser does not like to create that many connections and more often than not, files routinely fail to upload. Even with retries enabled, those retries tend to fail since the browser only allows a certain number of concurrent connections.

What I am looking to do is place the files into a queue and only allow 20 files to be actually uploading at any given time (Think of how FileZilla queues items to upload). When a file completes, a new files is added until the queue is exhausted. I already have it so `AutoUpload` is set to `false` and I can place the files into an array to process but the `uploadSelectEvent.sender.upload()` method enables upload for everything.

Is there a way to pause all the uploads prior to enabling the upload so I can then resume them as needed? Is there a better way to handle this?

Upload

answered on 18 Mar 2020