Questions on Kendo UI for jQuery Forum

5 answers

1.6K+ views

Grid doesn't call read method on loading

Grid doesn't call read method after page loading. It calls it if I press on Refresh button only. What's wrong in grid configuration?

Code in .cshtml file:

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

.Name("gridGatherForm")

.AutoBind(false)

.Columns(

c =>

{

c.Bound(m => m.Id).Hidden(true);

c.Bound(m => m.Order).Title("№");

c.Bound(m => m.DepartmentName);

c.Bound(m => m.Name).Title("Name");

c.Bound(m => m.PeriodicityName).Title("Periodicity");

c.Bound(m => m.StateName).Title("State");

c.Bound(m => m.PeriodName).Title("Data range");

c.Bound(m => m.IsStarted).Title("");

})

.Pageable(p => p.Enabled(true).Refresh(true))

.Editable(p => p.Enabled(false))

.Groupable(g => g.Enabled(false))

.DataSource(d => d.Ajax()

.PageSize(30)

.ServerOperation(true)

.Read(read => read.Url(Url.Action("Get", "GatherForm", new {httproute = ""})))

))

Grid

answered on 24 Mar 2020

1 answer

126 views

Updating dataSource values

I've got a viewModel with a dataSource whose values I end up calculating after some event occurs. What I'm wondering is how to access the dataSource. It seems like directly accessing it in the changeEvent function works, but is it better to access it via the get() method? I'm also wondering if I should be trying to set its member data via set() somethow or if what I'm doing is correct. Here is a dojo, and the code is also below.

<div id="example">

<div class="demo-section k-content wide">

<div class="box">

<input id="Value1NumericTextBox" data-role="numerictextbox"

data-format="c0"

data-decimals="0"

data-bind="value: Value1, events: { change: Value1Change }"

data-min="0" />

<input id="Value2NumericTextBox" data-role="numerictextbox"

data-format="c0"

data-decimals="0"

data-bind="value: Value2, events: { change: Value2Change }"

data-min="0" />

</div>

<div>

<div id="chart1" data-role="chart"

data-series-defaults="{ type: 'column' }"

data-series="[

{field: 'v1', categoryField: 'category'},

{field: 'v2', categoryField: 'category'}

]"

data-bind="source: dataSource"

style="height: 200px;" >

</div>

<script>

(function() {

var viewModel = kendo.observable({

Value1: 10,

Value2: 20,

dataSource: new kendo.data.DataSource({

data: [

{ v1: 10, v2: 20, category: "A B" },

{ v1: 100, v2: 200, category: "A*10 B*10" }

]

}),

Value1Change: function(e) {

var a = viewModel.get("Value1");

var b = viewModel.get("Value2");

// Is it incorrect to access the dataSource directly?

this.dataSource.at(0).v1 = a;

this.dataSource.at(0).v2 = b;

this.dataSource.at(1).v1 = a*10;

this.dataSource.at(1).v2 = b*10;

var chart = $("#chart1").data('kendoChart');

chart.refresh();

},

Value2Change: function(e) {

var a = viewModel.get("Value1");

var b = viewModel.get("Value2");

// Is it better to access the dataSource via get()

var ds = viewModel.get("dataSource");

// Should I be setting the data via set() somehow?

ds.at(0).v1 = a;

ds.at(0).v2 = b;

ds.at(1).v1 = a*10;

ds.at(1).v2 = b*10;

var chart = $("#chart1").data('kendoChart');

chart.refresh();

}

});

kendo.bind($("#example"), viewModel);

})();

</script>

</div>

Charts

answered on 24 Mar 2020

11 answers

1.0K+ views

Filter Grid with Multiple Filters

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.4K+ 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

340 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

102 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

101 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

467 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