Questions on Kendo UI for jQuery Forum

1 answer

174 views

Grid datasource odata problem with angularjs.

Hello,

I have a problem with reading oData to grid datasource with angularjs.
I have the following test method:

01.$scope.search = function (searchCriteria) {

02. var users = new kendo.data.DataSource({

03. dataType:"odata",

04. transport: {

05. read: {

06. async: true,

07. url: "http://services.odata.org/V4/Northwind/Northwind.svc/Customers"

08. },

09. schema: {

10. data: "value",

11. total: "odata.count"

12. },

13. serverPaging: true,

14. serverSorting: true,

15. serverFiltering: true,

16. pageSize: 5

17.

18. },

19. sortable: true,

20. pageable: true,

21.

22. });

23.

24.

25.

26.

27. users.read().then(function success() {

28. $scope.userGridOptions.dataSource.data(users.data());

29. $scope.grid.refresh();

30. },

31. function error(error) {

32. $log.error(error);

33. });

34.

35. $scope.userGridOptions.pageable = true;

36. $scope.userGridOptions.pageSize = 5;

37. $scope.userGridOptions.scrollable = {

38. virtual: true

39. };

40.

41.

42. };

On click from view the method is called. I have an existing datasource available and I want to refresh it.
The data is retrieved nicely (see the attachment), but in the code on line 27

users.read().then(function success() {

I get an error "TypeError: e.slice is not a function".

Could you please help me out. What am I doing wrong?

Grid

answered on 04 Jul 2016

1 answer

123 views

Editor Delete Bug\Problem?

I've been playing around with the Editor control which is a great control however it seems to have a major bug\problem. When I edit my file in the editor it dosnt deal well with deletes.

I've a 3 line html (Sample.html) file like below.

<p>1 First line here.</p><p>2 Second line here.</p><p>3 Third line here.</p>

In the Editor I delete the second line and save the content and I expect to see:

<p>1 First line here.</p><p>3 Third line here.</p>

However what the editor actually creates is this:

<p>1 First line here.</p><p>3 Third line here.</p>><p>3 Third line here.</p>

Note the repeat of the line 3 and the </p>>

This is completely wrong! Am I doing something wrong?

The code for my view and my controller are as below:

View:

@using Mallon.Reporting.Artifacts

@using Mallon.Reporting.Extensions

@using DiamondFireWeb.Gui.Controllers

@using System.Collections.Generic

@using DiamondFireWeb.Gui.Extensions

@using TemplateEditorHelper

@using Kendo.Mvc.UI.Fluent

@model ModelEditorHtml

@{

ViewBag.Title = "Editor Test ";

bool hideLayout = Convert.ToBoolean(ViewData["HideLayout"]);

if (hideLayout == null || hideLayout == false)

{

Layout = "~/Views/Shared/_Layout.cshtml";

}

string imagesUrl = Url.GetRootUrl("/Content/TemplateImages/{0}");

}

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

<div>

@Html.HiddenFor(m => m.FilePath)

@(Html.Kendo().EditorFor(m => m.Content)

.Name("Content")

.HtmlAttributes(new { style = "width: 100%;height:440px" })

.Tools(t =>

{

t.Clear();

t.Bold().Italic().Underline();

t.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull();

t.InsertUnorderedList().InsertOrderedList();

t.Outdent().Indent();

t.InsertImage();

t.TableEditing();

t.Formatting();

t.CleanFormatting();

t.FontName();

t.FontSize();

t.FontColor().BackColor();

t.Print();

}

)

.Resizable(resizable => resizable.Content(true).Toolbar(true))

//.ImageBrowser(imageBrowser => imageBrowser

// .Image(imagesUrl)

// .Read("Read", "ImageBrowser")

// .Upload("Upload", "ImageBrowser")

// .Thumbnail("Thumbnail", "ImageBrowser"))

)

<input type="submit" class="k-button" />

</div>

}

Controller Methods:

public ActionResult EditorTest()

{

ModelEditorHtml m = new ModelEditorHtml();

m.FilePath = @"C:\Data\Sample.html";

m.Content = System.IO.File.ReadAllText(m.FilePath);

return View(m);

}

[HttpPost]

[ActionName("EditorTest")]

public ActionResult EditorTestSave(ModelEditorHtml m)

{

string htmlValue = HttpUtility.HtmlDecode(m.Content);

using (FileStream file = new FileStream(m.FilePath, FileMode.Open, FileAccess.ReadWrite, FileShare.None))

{

using (StreamWriter writer = new StreamWriter(file, Encoding.UTF8))

{

writer.Write(htmlValue);

}

return RedirectToAction("EditorTest");

}

Model:

public class ModelEditorHtml

{

[AllowHtml]

public string Content { get; set; }

public string FilePath { get; set; }

}

Editor

answered on 04 Jul 2016

1 answer

272 views

Listview within a Listview

I'm trying to make a listview within my kendo listview using MVVM. I can't output the "Items" (see Dojo example) array using the # for (var i = 0 ... } # syntax because of the need for MVVM binding.

Here is a Dojo demonstrating what I'm trying to do. Am I trying to achieve something that is impossible to do with Kendo?

Thanks,

Brian

ListView

answered on 04 Jul 2016

4 answers

112 views

Kendo Grid

Hello Telerik Team,

We have ASP.Net MVC 5.0 application. We are using Kendo Grid to show and list all records and we are getting performance issue for the same

after tracking server and client side code we found out that while add row to grid is taking time at client side. we are using below method

new kendo.data.DataSource({
type: "aspnetmvc-ajax",
transport: {
read: {
url: url,
dataType: "json",
type: urlType,
data: searchParam,
complete: function (e) {
$scope.IsDirty = false;
$scope.KRefresh = 1;
$scope.SearchInGrid(); //Filter the Grid
}
}
},
schema: {
data: 'Data',
total: 'Total'
},
error: function (e) {
if (e.status == 'error') {
$scope.MaxRecordFlag = 1;
$scope.SetNoRecordFoundMessage(0);
}
},
//serverPaging: true,
serverSorting: true,
//serverFiltering: true,
allowUnsort: true
//pageSize: 50
})

What we are looking forward and Just FYI Paging is not allowed on this page.

Can we have any way to add row in grid at client side in async way ? or on demand . for eg.

lets say i have 100 rows to bind . then in first show i can bind 20 rows and show in gird and paralle keep binding remaing 80 rows.??

Regards

Shrirang

Grid

answered on 04 Jul 2016

2 answers

197 views

[Solved] Using the Spreadsheet with Angular

I am using the Kendo UI components in AngularJS and am including a spreadsheet in one of my pages. Unlike the other components, the spreadsheet doesn't include an angular example. Is there a way to get the reference to the spreadsheet? I was hoping for some equivalent to

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

Thanks!

General Discussions

answered on 04 Jul 2016

4 answers

276 views

After the update to new version data-auto-bind + data-option-label stops working

Hello,

After the update to the new version all dropdownlists with data-auto-bind="false" starts loading their data during the declaration if they have a "data-option-label". For example the declaration:

<select id="edopp_ddlList" data-bind="value: val" data-role="dropdownlist" data-text-field="Name" data-value-field="ID" data-auto-bind="false" data-source="valsDataSource" data-option-label="(No val)" class="dropdownSmall">

</select>

If I remove "data-option-label" all start working fine (list doesn't load its data during the declaration).

Is it a bug?

Vladimir

DropDownList

answered on 04 Jul 2016

3 answers

305 views

[Solved] Multiple files not showing properly

Hi,

I am following the template demo for the Upload widget with the latest version of Kendo UI. But when I select multiple files in the file explorer, all that shows is a single file in the <ul class="k-upload-files">. Again, only a single <LI> is showing in that list, even when I select multiple files. I debugged through the Kendo Upload javascript and see that it is not creating multiple <LI>'s. Can anyone explain the reason for this because it is very frustrating.

Thanks

Upload

answered on 04 Jul 2016

2 answers

2.1K+ views

jQuery 3.0

Hi,

May I know is current official release of Kendo UI compatible with jQuery 3.0 final? If no, then is that any plan/timeline to make it compatible?

Thank you.

General Discussions

answered on 03 Jul 2016

3 answers

191 views

Dropdown issue/questions

I have an angular directive that wraps a virtual kendo ui dropdown. The issue i'm having is that even though i am setting the dataValueField when i select an dropdown item the k-ng-model bound field is set to the entire item object rather than the property of the object specified by the dataValueField. Not sure what i'm doing wrong.

var selectDataSource = new kendo.data.DataSource({

transport: {

read: function(options) {

var currentPage = getItemPage(options.data.skip, options.data.take);

options.success(currentPage);

}

},

schema: {

data: "currentPage",

total: "total"

},

pageSize: pageSize,

serverPaging: true // enable serverPaging so take and skip are sent as

});

//setup the dropdown options object

scope.dropDownListOptions = {

dataTextField: scope.textField, // 'name'

dataValueField: scope.valueField, // 'id'

dataSource: selectDataSource,

height: height,

virtual: {

itemHeight: 26,

valueMapper: function(options) {

var itemIndex = scope.itemList.findIndex(function(element, index, array){

return options.value === element[scope.textField];

});

options.success(itemIndex);

}

/*directive html*/

The other question relates to the optionLabel default option. Is there any way to disable this option so that the user can't select it?

DropDownList

answered on 01 Jul 2016

1 answer

616 views

$(Document).ready() on ClientDetailTemplate

I'd rather do some DOM manipulation in an external Javascript(actually Typescript) than the inline templating javascript syntax that Kendo uses, but I'm having trouble with when the DOM is ready so I can apply my changes to these elements. I don't think $(Document).ready() works in my Typescript constructor that gets called everytime the row is expanded for the details. Is there an event I can subscribe to in order to know when I can start manipulating the DOM?

Templates

answered on 01 Jul 2016