Questions on Kendo UI for jQuery Forum

1 answer

489 views

We have a problem in our Kendo Grid Pop up Update modal, when a user idles for some time (approx 20 min to 1 hr), and after they tried saving a data in the form, we get an error about our tokens expiring, is there any way to generate one and apply it, or solutions that we can add in the kendo grid actions to avoid them losing data when saving after an idle time.

Below is the PopUp script. Will you be able to show how from here?
<div class="col-xs-18 col-md-12">
@(Html.Kendo().Grid<MyGrid.MVC.Models.Project>
()
.Name("projectGrid")
.Columns(columns =>
{
columns.Bound(p => p.STName).Filterable(filterable => filterable.UI("PSTFilter")).Title("PS Team");
columns.Bound(p => p.ASTeam);
columns.ForeignKey(p => p.ITId, (System.Collections.IEnumerable)ViewData["ITId"], "Id", "Name");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width("13%");
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ProjectForm"))
.Events(events => events.Edit("insertPopupCaption"))
.Pageable()
.Sortable()
.Resizable(resize => resize.Columns(true))
.Scrollable()
.Filterable(filterable => filterable.Extra(false))
.HtmlAttributes(new { style = "height:750px;width:95%;" })
.DataSource(dataSource => dataSource
.Ajax()
.Filter(p => p.Add(prj => prj.DevStatusId).IsEqualTo(1010))//1010 is On going status
.PageSize(20)
.Model(model =>
{
model.Id(p => p.Id);

})
.Read(read => read.Action("GetData", "Project"))
.Create(create => create.Action("UpsertData", "Project"))
.Update(update => update.Action("UpsertData", "Project"))
.Destroy(update => update.Action("DeleteData", "Project"))
)
)
</div>¬¬

Data Source

answered on 15 Jul 2019

5 answers

2.5K+ views

server side filtering, sorting and pagination for .NEt core

do you have any implementation for server side filtering , sorting and paging of the grid using .Net core?

Grid

answered on 15 Jul 2019

3 answers

2.7K+ views

[Solved] Kendo Grid : Blank space in the end when you resize(reduce) any column

Hi,

I have a grid and when i resize (reduce) any column, there is a white space shows up in the end of the grid. I have checked with the Kendo official samples and it seems like in some samples the shown behavior is in their samples.
I tried setting up width for header, cell content etc.. but its still shows some UI issues and i have multiple grids and i need a generic fix.
If its not an issue and a behavior then somebody please have a look at this and explain how to fix it.
I have added a normal screen shot and resized screenshot.

For testing it out, i have added a jsfiddle.,
http://jsfiddle.net/49bhz2sk/

Grid

answered on 12 Jul 2019

3 answers

183 views

Effects inside a SPA app

Hi,

I am wondering if it is possible to use Effects when there is a page change in a SPA app which is built with purely Kendo.

For example this is the code of a simple SPA with 2 pages:

// variables

window.rootUrl = "http://localhost:3000"

// datasource

// models

var model = kendo.observable({foo: "I am testing and trying out new things"});

// views

var layoutView = new kendo.Layout("layout-template");

var header = new kendo.View("index-template");

var content = new kendo.View("content-template");

var contact = new kendo.View("contact-template", {model: model, evalTemplate: true});

// router

var myrouter = new kendo.Router({

init: function() {

layoutView.render("#app");

}

});

myrouter.route("/aboutme", function () {

layoutView.showIn("#top", header);

layoutView.showIn("#main", content);

});

myrouter.route("/contact", function () {

layoutView.showIn("#top", header);

layoutView.showIn("#main", contact);

});

// onload

$(function() {

myrouter.start();

});

Basically my question is if it is possible when I change page from aboutme to contact that the contact page not just appears but slides in or fades in ( and the aboutme slides out or fades out ). If it is possible then whats the recommended way to do it using the example code above?

Effects

answered on 11 Jul 2019

9 answers

745 views

.open() in setTimeout Failed to execute 'removeChild' on 'Node'

Hi,

I have an issue on my multiselect.

When I select a value in my MultiSelect, everything is OK. (leave thefield whithout error).

But, when I re-focus the multiselect to add another value, I get a JS error : kendo.web.min.js:41 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

I try to put the setTimeout to 250 instead of 0 and it seems to work but I'm afraid that when I have a lot of datas to load it will explode again...

setTimeout(function () {
var multiselect = $multiselect.data("kendoMultiSelect");
multiselect.open();
}, 0);

Any idea ?

MultiSelect

answered on 11 Jul 2019

6 answers

1.5K+ views

Get all datas filtered in virtualized or paged grid

Hi,

I explain my need :

When the user click on a button, I want to get all data on my grid with filters set on my grid to do an action. I can have a lot of datas (many thousand), in this case, the grid is virtualized.

In this case :

http://dojo.telerik.com/@muadhib/UnEsE/2

I add equal filter in ship country for get all rows where value is France.

When I click on "Get sum Freight", I want to get the sum of all rows which match. In my code, the sum take only 30 rows (1 page) from current page.

What is the best way to perform that ?

Regards.

Grid

answered on 11 Jul 2019

2 answers

2.8K+ views

[Solved] How to make the Carousel like this?

Hi all,

Just attached the expect layout for the Carousel slider i want.

But i have no idea how to make like that use the Kendo ScrollView...

I tried to change the css make the same layout, but when i go next page, the position go wrong.

Should i handle the position calculation on the Event "change"?

ScrollView

answered on 11 Jul 2019

2 answers

287 views

[Solved] The kendoTreeView is not getting re-rendered after node removal upon adding new node

There are two event handlers: one adds a node to the tree, the other one - removes it. And it works fine as expected until the node gets removed by calling "check" event.
here is a tree (upon node check - it gets removed):

$('#folderAttributeTree').kendoTreeView({

dataSource: this.attributeTree,

dataRole: "treeview",

dataTextField: "name",

checkboxes: true,

loadOnDemand: true,

check: function(e) {

var treeView = e.sender,

checkedNode = e.node;

treeView.remove(checkedNode);

},

dataBound: function(e) {

if (!this.dataSource.data().length) {

this.element.append("<li class='no-items'>No items yet.</li>");

} else {

this.element.find(".no-items").remove();

}

}).data("kendoTreeView");

here is the add node method (it creates always nested elements):

01.addLabel: function(e) {

02. e.preventDefault();

03.

04. var label = this.get('folder_label'),

05. folderAttributeTree = $("#folderAttributeTree").data("kendoTreeView"),

06. attributeTree = this.get('attributeTree')

07. data = [];

08.

09. if (label !== null && label !== '') {

10.

11. if (attributeTree.length) {

12.

13. data = attributeTree;

14.

15. var i = 0;

16.

17. while (data.length) {

18. data = data[0].items;

19. i++;

20. }

21.

22. data.push({

23. name: label,

24. type: 'folder',

25. expanded: true,

26. id: i,

27. items: [],

28. hasChildren: true,

29. itemIndex: 0

30. });

31.

32. } else {

33.

34. this.set('attributeTree', [{

35. name: label,

36. type: 'folder',

37. expanded: true,

38. id: 0,

39. items: [],

40. hasChildren: true,

41. itemIndex: 0

42. }]);

43.

44. }

45. }

46.

47. this.set('folder_label', '');

48.

49. folderAttributeTree.setDataSource(this.attributeTree);

50.

51.}

The problem is, when I try adding a node after its removal - a treeview is no more re-rendering (however if I check the console.log the data is getting added to the object as it should).
I'm new to kendo-ui. Please help me solving this.
Thank you in advance!

TreeView

answered on 11 Jul 2019

4 answers

666 views

[Solved] Cannot resize grid columns after initial column resize and grid scroll to the right

Hi,

There is a bug present in the latest release 2019.2.619 where after you resize a column in the grid and then scroll the grid to the right you can no longer resize a column. The column resize cursor will not appear.

You can see the same problem in the kendoui demo

https://demos.telerik.com/kendo-ui/grid/column-resizing

1. Resize a column

2. Scroll the grid to the right

3. Now attempt to resize another column

Please can you advise how to work around or when a fix might be made available as this is a blocker for us at the moment.

Thanks

Doug

Grid

answered on 11 Jul 2019

2 answers

5.6K+ views

Dirty Flag for Kendo Grid

Hello Telerik Team,

I have a MVC kendo Grid bound to an Ajax DataSource. The grid uses InCell Edit mode.

I wish to be able to change the content of the grid via js and have achieved this by using set:

var firstItem = $('#inventoryTransReview_grid').data().kendoGrid.dataSource.data()[0];

firstItem.set('Remark','test')

While this will change the Remark column content to 'test' and set firstItem.dirty to be true, it won't show the little "dirty flag" marker like it normally will in case of directly editing the Grid.

Is it because the Dirty Flag marker is handled by the Grid and not the DataSource? Any workaround to show the "dirty flag" marker in this case?

Thanks,

Michael.

Grid

answered on 11 Jul 2019