Questions on UI for JSP Forum

4 answers

247 views

Highlight matched values with JSP syntax

Hi all,

I just started evaluating Kendo UI for JSP and I am very impressed by the quality of your concept.

I have implemented the Autocomplete, ComboBox and DropDownList tags successfully, but I would like to highlight matches of the input value with the list items.

My first try was to provide an extra field in the response data with embedded HTML markup, but that is being converted into entities: <em> becomes <em>. Is there a way to turn this kind of conversion off?

To be sure, I found the example for client side formatting:

String template = "<span class=\"k-state-default\" style=\"background-image: url(../resources/web/Customers/#:data.customerId#.jpg\"></span>" +

"<span class=\"k-state-default\"><h3>#: data.contactName #</h3><p>#: data.companyName #</p></span>";

String valueTemplate = "<span class=\"selected-value\" style=\"background-image: url(../resources/web/Customers/#:data.customerId#.jpg\") ></span>" +

"<span>#:data.contactName#</span>";

%>

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

<h4>Customers</h4>

<kendo:dropDownList name="customers" headerTemplate="<%=headerTemplate%>" template="<%=template%>" valueTemplate="<%=valueTemplate%>"

However, I've not managed to transfer this into JSP syntax.

Could you please help me with this?

Best regards

DropDownList

answered on 26 Apr 2016

1 answer

489 views

Kendo Editable Grid : row contents changing after clicking "Edit->Cancel" Button

Hi,

I am using Kendo Hierarchial grid with child grid as editable grid using jsp and servlets.

In the child grid,

Once i click on Edit Button, pop-up window opening and the moment i click "Cancel", that row contents are replaced with the "first row contents"in the child grid.

I am pasting my code here.

-----

<%@taglib prefix="shared" tagdir="/WEB-INF/tags"%>
<%@page import="java.util.HashMap"%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>

<shared:header></shared:header>

<!DOCTYPE html>
<html>
<head>

<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>Demo</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="styles/layout-jsp.css" />

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

<script src="js/jquery.min.js"></script>

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


</head>

<body>

<%@ include file="header.jsp"%>

<table cellpadding="0" cellspacing="0" border="0" bgcolor="#4682B4"
width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="1" width="100%" border="0"
height="5">
<tr>
<td class="header1" height="2" colspan='2'>Welcome To
Progress</td>
</tr>
</table>
</td>
</tr>
</table>

<div class=" submit-section">
<div class="row ">
<div class="col-md-3 label-class" >CostCenter</div>
<div class="col-md-1 label-class">:</div>
<div class="col-md-8">
<select class="dropdown-class" id="costcenters">
</select>
</div>
</div>
<div class="row ">
<div class="col-md-3 label-class" >Team</div>
<div class="col-md-1 label-class">:</div>
<div class="col-md-8">
<select class="dropdown-class" id="teams">
<option value="">Select Team</option>
</select>
</div>
</div>
<div class="row ">
<div class="col-md-3 label-class" >Location</div>
<div class="col-md-1 label-class">:</div>
<div class="col-md-8">
<select class="dropdown-class" id="locations">
<option value="">Select Location</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-default btn-class" id="submitbutton">Submit</button>
</div>
<%
HashMap<String, Object> data = new HashMap<String, Object>();
data.put("employeeID", "#=employeeID#");

%>

<div class="grid-class" id="grid-id">
<kendo:grid id="parent-grid" name="parent-grid" detailInit="detailInit" detailExpand="detailExpand"
pageable="true" detailTemplate="grid-nested-id" sortable="true"
>
<kendo:grid-pageable pageSizes="true"></kendo:grid-pageable>
<kendo:dataSource pageSize="10">
<kendo:dataSource-transport read="SubmitController" >
<kendo:dataSource-transport-parameterMap>
<script>
function parameterMap(options, operation) {
console.log(options);
return options;
}
</script>
</kendo:dataSource-transport-parameterMap>
</kendo:dataSource-transport>
</kendo:dataSource >
<kendo:grid-columns>
<kendo:grid-column title="ID" field="employeeID" />
<kendo:grid-column title="CostCenter" field="employeeCostcenter" />
<kendo:grid-column title="FirstName" field="employeeFirstName" />
<kendo:grid-column title="LastName" field="employeeLastName" />
<kendo:grid-column title="Percentage" field="percentage" />
</kendo:grid-columns>
</kendo:grid>

<kendo:grid-detailTemplate id="grid-nested-id" >
<kendo:grid id="child-grid_#=employeeID#" name="child-grid_#=employeeID#" class="child-grid-class" save="onSave"
edit="onEdit"
change="onChange"
cancel="onCancel"
pageable="true"
sortable="true"
scrollable="true"
editable="true"
>
<kendo:grid-editable mode="popup" confirmation="Are you sure you want to remove this item?"/>
<kendo:grid-toolbar>
<kendo:grid-toolbarItem name="create"/>
</kendo:grid-toolbar>
<kendo:grid-columns>
<kendo:grid-column title="Employee ID" field="employeeID" width="90px" />
<kendo:grid-column title="CostCenter" field="employeeCostcenter" width="90px" />
<kendo:grid-column title="Product" field="productName" width="90px" />
<kendo:grid-column title="Activity" field="activityName" width="90px" />
<kendo:grid-column title="Percentage" field="percentage" width="90px" />
<kendo:grid-column title=" " width="250px">
<kendo:grid-column-command>
<kendo:grid-column-commandItem name="edit" />
<kendo:grid-column-commandItem name="destroy" />
</kendo:grid-column-command>
</kendo:grid-column>
</kendo:grid-columns>

<kendo:dataSource pageSize="10" serverPaging="true" serverSorting="true" >


<kendo:dataSource-transport>
<kendo:dataSource-transport-create url="SubmitController?action=create" type="POST" contentType="application/json" />
<kendo:dataSource-transport-read url="SubmitController" />
<kendo:dataSource-transport-update url="SubmitController?action=update" type="POST" contentType="application/json" />
<kendo:dataSource-transport-destroy url="SubmitController?action=destroy" type="POST" contentType="application/json" />

<kendo:dataSource-transport-parameterMap>
<script>
function parameterMap(options, operation) {
console.log(options);
return options;
}
</script>
</kendo:dataSource-transport-parameterMap>
</kendo:dataSource-transport>
<kendo:dataSource-schema>
<kendo:dataSource-schema-model id="employeeID">
<kendo:dataSource-schema-model-fields>
<kendo:dataSource-schema-model-field name="employeeCostcenter" type="string">
<kendo:dataSource-schema-model-field-validation required="true" />
</kendo:dataSource-schema-model-field>
<kendo:dataSource-schema-model-field name="productName" type="string">
<kendo:dataSource-schema-model-field-validation required="true"/>
</kendo:dataSource-schema-model-field>
<kendo:dataSource-schema-model-field name="activityName" type="string">
<kendo:dataSource-schema-model-field-validation required="true" />
</kendo:dataSource-schema-model-field>
<kendo:dataSource-schema-model-field name="percentage" type="number" />

<kendo:dataSource-schema-model-field name="totalPercentage" type="string" />
</kendo:dataSource-schema-model-fields>
</kendo:dataSource-schema-model>
</kendo:dataSource-schema>
</kendo:dataSource>

</kendo:grid>
</kendo:grid-detailTemplate>

</div>

<script type="text/javascript">
$(document).ready(function(){
$("#grid-id").hide();
//$("#grid-nested-id").hide();
console.log("Entered JQuery");
var selCostcenter="";
var selTeam="";
var selLocation="";
$.ajax({
url:"CostCenterController",
contentType: "application/json",
success:function(responseJSON){
var $cc=$("#costcenters");
$cc.empty(); // remove old options
$cc.append($("<option></option>")
.attr("value", '').text('Select CostCenter'));
$.each(responseJSON, function(value, key) {
var costcen=responseJSON[value].employeeCostcenter;

$cc.append($("<option></option>")
.attr("value", costcen).text(costcen));
});
}
});

$("#costcenters").change(function(){
selCostcenter= $(this).val();
var costCenterString={"selectedCostCenter":selCostcenter};
$.ajax({
data:costCenterString,
contentType: "application/json",
url:"TeamController",
success:function(responseJSON){

var $teams=$("#teams");
$teams.empty(); // remove old options
var $locations=$("#locations");
$locations.empty(); // remove old options
$locations.append($("<option></option>")
.attr("value", '').text('Select Location'));

$teams.append($("<option></option>")
.attr("value", '').text('Select Team'));
$.each(responseJSON, function(value, key) {
var team=responseJSON[value].employeeTeam;

$teams.append($("<option></option>")
.attr("value", team).text(team));
});

}

});

});

$("#teams").change(function(event){
selTeam = $(this).val();
var teamString={"selectedCostCenter":selCostcenter,"selectedTeam":selTeam};

$.ajax({
data:teamString,
url:"LocationController",
contentType: "application/json",
success:function(responseJSON){
var $locations=$("#locations");
$locations.empty(); // remove old options
$locations.append($("<option></option>")
.attr("value", '').text('Select Location'));
$.each(responseJSON, function(value, key) {
var location=responseJSON[value].employeeLocation;

$locations.append($("<option></option>")
.attr("value", location).text(location));
});

}

});
});

$("#submitbutton").click(function(){
$("#grid-id").show();
$("#grid-nested-id").show();
console.log("Submit Button Clicked");
console.log(selCostcenter);
console.log(selTeam);
var $locations=$("#locations");
selLocation = $locations.val();
console.log(selLocation);
var submitString={"costcenter":selCostcenter,"team":selTeam,"location":selLocation};
$("#parent-grid").data().kendoGrid.dataSource.read({"costcenter":selCostcenter,"team":selTeam,"location":selLocation});

});
});

function detailExpand(e){
console.log("detailExpand");
console.log(e.detailRow);
var row = e.masterRow[0];
var employeeID= $(row).closest('tr').find('td').eq(1).text();
console.log("eID:"+employeeID);
var childGrid = "#child-grid_"+employeeID;
$(childGrid).data().kendoGrid.dataSource.read({"employeeID":employeeID,"infoType":"detailed"});

/*$(row).closest('tr').find('td').each(function() {
var textval = $(this).text(); // this will be the text of each <td>
console.log(textval);
});
*/

}

function detailInit(e){
console.log("detailInit");
}
function onSave(e){
console.log("Entered On Save");
console.log(e);
console.log("---");
var parentRow = this.wrapper.closest("tr").prev();
//var employeeID= $(parentRow).find('td').eq(1).text();
//console.log("eID:"+employeeID);
//var totalpercent = e.model.o.totalPercentage;
var Model = e.model;

for(var key in Model) {
var value = Model[key];
console.log("key: " + key);
console.log("value: " + value);
}

/*
var totalPercent = Model["totalPercentage"];
for(var key in totalPercent) {
var value = totalPercent[key];
console.log("key: " + key);
console.log("value: " + value);
}
*/

console.log( e.model["totalPercentage"]);
//console.log( Model["totalPercentage"]);
//$(parentRow).find('td').eq(5).text(totalpercent) ;

}
function onEdit(e){
console.log("Entered On Edit");

//console.log(e);
console.log("Exit From Edit");

}

function onChange(){
console.log("Entered On Change");

}

function onCancel(){
console.log("Entered On onCancel");

}

function OnChildRequestEnd () {
console.log("Entered Into OnChildRequestEnd");
}
function OnSync () {
console.log("Entered Into OnSync");
}

</script>
</body>
</html>

------

Thanks in advance..

Grid

answered on 25 Apr 2016

3 answers

98 views

Kendo Validator for JSP tags

Hi,

I was referring the Kendo Validator Usage, it has shown the examples for HTML, ASP.NET, i could not find the examples for JSP tags, how can we add "required" and also custom rules for the <kendo:dropDownList>, <kendo:datePicker>? Can you please share some Kendo validator examples using JSP tags.

General Disccussions

answered on 21 Apr 2016

2 answers

230 views

How to make the child grid editable in hierarchy grid

Hello Sir,

I want to use the hierarchy grid. I cant successfully read the data in both parent and child grid. I cant edit the data in the parent grid but I am unable to edit the data in the child grid. Data is loading fine until I make the child grid editable.

once I write <kendo:grid-editable mode="inline" /> this statement in child grid nothing is getting loaded in the child grid and parent grid is working fine.

Is it not possible to edit the child grid?

Also how am I suppose to insert the new record in child grid?

Grid

answered on 19 Apr 2016

2 answers

64 views

How to reorder the grid rows using drop down

Hello Sir,

I want to provide drag and drop option to grid rows. I tried different methods using javascript but it is not working on the kendo grid. Is there any way to provide this option to kendo grid in JSP?

Will be waiting for your reply.

Thanks

Grid

answered on 11 Apr 2016

1 answer

77 views

Read Request is not working

Hello Sir,

I am trying to use combo box in my program. But when I click on the drop down arrow it is not sending any read request to my controller. The same code is working fine if i deploy it outside my eclipse. But when i am trying to run it from eclipse nothing is happening.

I tried almost everything to correct the mistake. but nothing is happening. I have attached the screen shot of code and output here.

Please help me.

ComboBox

answered on 08 Apr 2016

1 answer

64 views

Kendo bar chart resending the read request

Hello sir,

Is it possible to resend the read request to datasource on some select event? I can plot the graph properly once but now i want to change the datasource every time I choose something from the combobox. Also is it possible to send some parameters with the read request? If yes then how?

Will really appreciate if you could help me.

Thanks

Chart

answered on 08 Apr 2016

1 answer

69 views

Keyboard Navigation in Grid with Custom Editor

Hi ,

In all the Editing examples provided for JSP UI Tag for grid control the keyboard navigation works seamlessly but for the Custom Editor Example

http://demos.telerik.com/jsp-ui/grid/editing-custom the keyboard navigation using "Tab"s it only is able to focus on the Delete Button, Is there a way we can make sure even in a grid with Custom editor the navigation works. It would really help if you could provide a sample.

Thanks,

Anshuman

Grid

answered on 31 Mar 2016

1 answer

752 views

how to change "coma" by "point decimal"

How I can make the numeric textbox displays the decimal point?

$("#appRendimientoEsperado").kendoNumericTextBox({
decimals: 2,
step: .01,
format: "#"
});

NumericTextBox

answered on 22 Feb 2016

1 answer

495 views

Week no. in DatePicker + change order of week days

Hello,

I'm about to import the datepicker in my Java (JSP) system but I first want to do some customization to the datepicker according to requirements from customer. However here I seem to have some trouble and have some questions to whether this is doable. What I want to do is to add week numbers in the beginning of each 'row' of the calendar, I understand that this is not something which is supported 'on the fly' by Kendo UI datepicker, and I also want to change the order of the days in the calendar so that the week starts at Monday instead of Sunday, which is the original implementation. See attached picture.

Are these things doable by customizing the template somehow, like customizing the JSP page here: http://demos.telerik.com/jsp-ui/datetimepicker/template

I've also found the following forum post which, I figure, seems to have the same problem/question.

Date/Time Pickers