Questions on Kendo UI for jQuery Forum

3 answers

177 views

[Solved] Accessing serverSorting/Grouping/Filtering/Paging in MVC Controller

Hi,

Im using Spring to create a webapp and would like to implement serverSorting (as the first server option) in my kendoGrid.
The problem Im having is being able to read the "sort/group/filter/etc" data that is sent from the dataSource to by REST controller method.

This the URL being called by the browser:

http://localhost:8080/itd-boot-thymeleaf-demo/users?{%22sort%22:[{%22field%22:%22lastName%22,%22dir%22:%22asc%22}]}

This is my dataSource read atribute:

read: {

url: "/itd-boot-thymeleaf-demo/users",

contentType: "application/json",

dataType: "json"

},

Here is my controller method:

@RequestMapping(method=RequestMethod.GET, produces="application/json")

@ResponseBody

public String getUsers() {

System.out.println("### Getting users JSON");

List<User> users = userService.getList();

return User.toJsonArray(users);

}

What parameters should I add to "getUsers()" to map the request data so my method can read it?
I've tried to find examples of the serverSorting being used with MVC but haven't had any luck.

Please advise.

Thanks,
Grant

Data Source

answered on 20 Sep 2016

7 answers

893 views

[Solved] Does the upload control work with validation?

I am trying to use the validator with the upload control and even though I have selected a file, the validation is returning false. Attached is the source and the image.

<!DOCTYPE html>

<html>

<head>

<title>Upload documents for Andy Redi</title>

</head>

<body>

</div>

Welcome <a href="/Account/Details">thilehoffer</a>

<a href="/Admin">Admin</a>

</div>

</div>

</header>

<h2>Upload documents for Andy Redi</h2>

<legend>Upload Files</legend>

Document Category</label></div>

<option value='2'>Evaluation </option>

<option value='3'>Other </option>

</select>

</div>

</div>

</div>

Document File</label></div>

</div>

</div>

</div>

<br />

</fieldset>

<p>

<a Length="0" href="/Student/Documents/3aaa624e-7f23-4532-9c24-10315cd665af">Back to documents for Andy Redi</a>

</p>

//Functions

/*Set the value of hidden fields that will store the value selected from the drop down*/

function CategoryListChange() {

var dropdownlist = $("#CategoryList").data("kendoDropDownList");

var hiddenField = $("#CategoryId");

hiddenField.val(dropdownlist.value());

}

$(document).ready(function () {

$("#CategoryList").kendoDropDownList({ change: CategoryListChange });

$("#PostedFileBase").kendoUpload({multiple: false });

var validatable = $("form").kendoValidator().data("kendoValidator");

$("#save").click(function () {

if (validatable.validate()) {

return true;

}

return false;

});

</script>

</form>

</section>

</footer>

</div>

</body>

</html>

Upload

answered on 19 Sep 2016

2 answers

777 views

[Solved] kendoDropDownList.select not working in 'Add New item' replica

Hi,

Im trying to create a PoC replica of some new functionality added to KendoDropDownList, adding a new Item from the noDataTemplate.

Im trying to replicate http://demos.telerik.com/kendo-ui/dropdownlist/addnewitem with a static DataSource, however once the new item is added to the dataSource its not being selected, http://dojo.telerik.com/emOWE.

Regards,
Grant

PS - This feels like a stupid question, like I've overlooked something simple. My apologies if this is the case.

DropDownList

answered on 19 Sep 2016

3 answers

678 views

[Solved] Disable specific keyboard shortcuts

I want to let users format the text in the editor only using the tools in the toolbar. It seems that even if the tools for Italic or Underlined are not included the text can still be formated with the keyboard shortcuts (<ctrl> + i or <ctrl> + u).

When using the shortcuts (for ex. <ctrl> + i) when the tool is not included the Execute event is not fired but the text can still be formated.

$("#editor").kendoEditor({

tools: [

"italic"

],

execute: function(e) {

console.log("executing command", e.name, e.command);

}

});

See http://dojo.telerik.com/@alexc/eHArEg

Is there a way to prevent unwanted keyboard shortcuts?

Editor

answered on 19 Sep 2016

1 answer

396 views

Problems getting Kendo and Angular to work together

Hi,

I am evaluating Kendo Trial, have been trying to get the Kendo Grid with Angular example to work in our existing MVC5 project for several hours, and am having numerous angular issues. Any help would be appreciated.

Error:

angular.min.js:40 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=csa&p1=Error%3A%20%…%20c%20(http%3A%2F%2Flocalhost%3A8049%2FScripts%2Fangular.min.js%3A21%3A19)

The view-source is:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title></title>

<base href="/"/>

</head>

<body ng-app="csa">

<link href="/Content/bootstrap.css" rel="stylesheet"/>

<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.6.2.js"></script>

<script src="/Scripts/jquery-1.10.2.js"></script>

<script src="/Scripts/jquery.validate.js"></script>

<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

<link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>

<link href="/Content/kendo/kendo.default.min.css" rel="stylesheet"/>

<script src="/Scripts/kendo/kendo.all.min.js"></script>

<script src="/Scripts/kendo/kendo.aspnetmvc.min.js"></script>

<script src="/Scripts/angular.min.js"></script>

<script src="/Scripts/angular-route.min.js"></script>

<script src="/Scripts/angular-animate.min.js"></script>

<script src="/Scripts/bootstrap.js"></script>

<script src="/Scripts/respond.js"></script>

<script src="/Scripts/ui-bootstrap-tpls-2.0.0.min.js"></script>

<script src="/Scripts/Modules/utility.js"></script>

<script src="/Scripts/Modules/format.js"></script>

<script src="/Scripts/Modules/customer.js"></script>

<script src="/Scripts/Modules/api.js"></script>

<script src="/Scripts/Modules/url.js"></script>

<div class="navbar navbar-inverse navbar-fixed-top">

<div class="container">

<p class="nav navbar-text navbar-right">Welcome</p>

</div>

<ol class="breadcrumb">

<li ng-repeat="b in breadcrumbs"><a href="{{b.href}}">{{b.text}}</a></li>

<li class="active">{{title}}</li>

</ol>

<h1 class="page-header"></h1>

<div class="container body-content">

<h1>Application Name</h1>

<p>Hello, User</p>

<div id="example">

<div ng-controller="MyCtrl">

<kendo-grid options="mainGridOptions">

<div k-detail-template>

<kendo-tabstrip>

<ul>

<li class="k-state-active">Orders</li>

<li>Contact information</li>

</ul>

<div>

<div kendo-grid k-options="detailGridOptions(dataItem)"></div>

</div>

<div>

<ul class="contact-info-form">

<li><label>Country:</label> <input class="k-textbox" k-ng-model="dataItem.Country" /></li>

<li><label>City:</label> <input class="k-textbox" k-ng-model="dataItem.City" /></li>

<li><label>Address:</label> {{dataItem.Address}}</li>

<li><label>Home phone:</label> {{dataItem.HomePhone}}</li>

</ul>

</div>

</kendo-tabstrip>

</div>

</kendo-grid>

</div>

<style>

.contact-info-form {

list-style-type: none;

margin: 30px 0;

padding: 0;

}

.contact-info-form li {

margin: 10px 0;

}

.contact-info-form label {

display: inline-block;

width: 100px;

text-align: right;

font-weight: bold;

}

</style>

<script>

angular.module("csa", [ "kendo.directives" ])

.controller("MyCtrl", function($scope){

$scope.mainGridOptions = {

dataSource: {

type: "odata",

transport: {

read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"

},

pageSize: 5,

serverPaging: true,

serverSorting: true

},

sortable: true,

pageable: true,

dataBound: function() {

this.expandRow(this.tbody.find("tr.k-master-row").first());

},

columns: [{

field: "FirstName",

title: "First Name",

width: "120px"

},{

field: "LastName",

title: "Last Name",

width: "120px"

},{

field: "Country",

width: "120px"

},{

field: "City",

width: "120px"

},{

field: "Title"

}]

};

$scope.detailGridOptions = function(dataItem) {

return {

dataSource: {

type: "odata",

transport: {

read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"

},

serverPaging: true,

serverSorting: true,

serverFiltering: true,

pageSize: 5,

filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }

},

scrollable: false,

sortable: true,

pageable: true,

columns: [

{ field: "OrderID", title:"ID", width: "56px" },

{ field: "ShipCountry", title:"Ship Country", width: "110px" },

{ field: "ShipAddress", title:"Ship Address" },

{ field: "ShipName", title: "Ship Name", width: "190px" }

]

};

})

</script>

</div>

<confirmation></confirmation>

<script type="application/json" id="__browserLink_initializationData">

{"appName":"Chrome","requestId":"5a785f2f4ca84648a191e906730accc8"}

</script>

<script type="text/javascript" src="http://localhost:8231/24fa4a588ff7430e816ca7a8f0925868/browserLink" async="async"></script>

</body>

</html>

Grid

answered on 19 Sep 2016

3 answers

292 views

ListView does not render MVVM grid in template

Hi, I'm trying to show a grid inside a ListView. In order to do that I added a MVVM div data-role="grid" in the ListView template.

When the ListView is bound, everything is displayed correctly except the grid ( not rendered ). If I copy the same MVVM div inside the editTemplate, and click Edit at runtime, the grid is displayed in the editTemplate. Here and example of the code: ( as you can see both Template and EditTemplate have the same grid, but it's only displayed on EDITING mode )

ListView

answered on 19 Sep 2016

4 answers

359 views

Kendo Grid in DetailrowTemplate

I am having kendo grid in detailRowTemplate of kendo grid(Primary Grid). In my primary Grid template, I have checkAll Checkbox. If I check that checkbox, I want to check all the checkboxes in the detailGrid related to that particular row. Right now, I am using class to check all checkboxes. So, it is checking all checkboxes for all the rows of the primary Grid. I want to check only the Grid that is related to Primar Grid detail Temlplate. How can I do this ? Below is my code

//Primary Grid
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: kendo.template($("#Template").html()),
detailTemplate: kendo.template($("#gridtemplate").html()),
detailInit: detailInit,
dataBound: function () {
},
columns: [
{ field: "Id", hidden: true },
{ field: "Name", title: "Name" },
{ field: "Read", title: "Read" }
]
});

//Detail Template Grid
detailRow.find(".SiteGrid").kendoGrid({
dataSource: dataSource,
rowTemplate: kendo.template($("#SiteTemplate").html()),
columns: [
{ field: "Id", hidden: true },
{ field: "Name", title: "Site", width: 350 },
{ field: "Read", title: "Read", }
]
});

//Detail Grid Template
<script type="text/x-kendo-template" id="gridtemplate">
<div class="SiteGrid">
</div>
</script>

//Primary Grid Template
<script type="text/x-kendo-template" id="Template">
<tr class="k-master-row k-alt">
<td class="k-hierarchy-cell"><a href="\#" class="k-icon k-plus"></a></td>
<td> #= Name # </td>
<td><input type="checkbox" name="#: Id #" value="Select All" onclick="CheckCheckboxes(); return true;" /></td>
</tr>
</script>

//Detail Grid Template
<script type="text/x-kendo-template" id="SiteTemplate">
<tr class='k-alt'>
<td>#: Name #</td>
<td>
#if(AccessType == 'Read') { #
<input type="radio" name="#: Id #" class="read" checked="checked" />
#}else{#
<input type="radio" name="#: Id #" class="read" />
# } #
</td>
</tr>
</script>

//Checking Check boxes
<script>
function CheckCheckboxes() {
$('.read').prop('checked', true);
}
</script>

Grid

answered on 19 Sep 2016

4 answers

328 views

Any examples of imagebrowser implementation with Web API?

HI. I'm looking to implement a kendo Editor and we want users to be able to upload files and images. So I got introduced to the imagebrowser component (let's forget the file browser for now and let's just focus on image) and I'm saying to myself, "well, what about the server side code? What does this component need served up?" A directory with this name was not found showed up when I first started playing with this component. That message most likely appeared because I'm just at the phase of copying and pasting in the code based on what's in the example on this site...

What's happening here on the backend? /kendo-ui/service/ImageBrowser/Read - is just one of many questions.

I'm using Web API 2.0. JS on front end on an ASP.NET web form/aspx server page actually. I'm hoping there's some sort of canned example I can use somewhere for server side code? I wouldn't even know where to begin because I don't know what this component needs. Again I can either throw the code on the codebehind (c#) on the page itself, or I can use Web API (preferred).

Thanks.

01.imageBrowser: {

02. messages: {

03. dropFilesHere: "Drop files here"

04. },

05. transport: {

06. read: "/kendo-ui/service/ImageBrowser/Read",

07. //read: "",

08. destroy: {

09. url: "/kendo-ui/service/ImageBrowser/Destroy",

10. type: "POST"

11. },

12. create: {

13. url: "/kendo-ui/service/ImageBrowser/Create",

14. type: "POST"

15. },

16. thumbnailUrl: "/kendo-ui/service/ImageBrowser/Thumbnail",

17. uploadUrl: "/kendo-ui/service/ImageBrowser/Upload",

18. imageUrl: "/kendo-ui/service/ImageBrowser/Image?path={0}"

19. }

20.},

Editor

answered on 19 Sep 2016

2 answers

921 views

How can I use a image/carousel/slider with listview

I currently am using listview to display some birthdays. We're displaying the name, Date of birth and a field that is a binary image from a DB.

This would normally be fine as it is, with the pager controls, etc. But we have some requirements...we want these to be displayed like a regular image slider you'd find on the web.

1.) Images and other content scrolls automatically without any user intervention.

2.) We do not want paging controls, however, if there were some arrows overlayed near the image that could disappear when the user's mouse is NOT in the content area, that would be fine. In other words, no paging controls at all, but if the user hovers into the content area, I'm OK with a left and right arrow appearing nearby.

I tried looking at kendo scrollview but I can't get that to work, I'm thinking because there's all this key business and more complexities that I think we're looking for.

How can this be achieved?

ListView

answered on 19 Sep 2016

3 answers

1.0K+ views

Tooltip with interactive (clickable) content

I'd like my tooltip to stay open if the mouse is above the tooltip target *or* if it is above the tooltip content (which is loading dynamically), so that the use can move the mouse from the target onto the tooltip and click on links in the content.

A good example of EXACTLY what I'm looking for is the popup that comes up in Facebook when you hover on a Friend on the right side of the page... you get an interactive popup.

I know that I can do this by setting AutoHide off and adding a "close" button to the tooltip content, but the users don't want that, (it would also be impractical as it the tooltips are in a grid and sliding the mouse over the grid could easily lead to loads of tool tips opening up and getting stuck open).

Has anyone done this? Care to share your JS?
I'm surprised it's not a built-in an option for the widget...

Cheers,
Chris

ToolTip

answered on 19 Sep 2016