Questions on Kendo UI for jQuery Forum

1 answer

1.1K+ views

Grid Columns filterable item templates dependent on two values

Hi,

I have a question regarding custom filterable itemTemplates for kendo grids.

My team has a grid bound to a datasource that has rows of data containing two notable columns as follows:

1. Stage - (Can have values Draft, Pending, or Final)

2. DraftStage - (can have values ValidDraft and InvalidDraft)

Stage is a column that we display in the grid and DraftStage is kept hidden from the user. However when the grid row has Stage = Draft, we mask that cell and display the row's DraftStage instead. We have a function that converts Stage to its rows' DraftStage for display purposes only which we also utilize in creating the item template. The issue though is that the kendo grid filters for our Stage column doesn't seem able to differentiate ValidDraft vs InvalidDraft when we mask the Draft Stage because the underlying data is still just "Draft" and so our filtering logic below does not work. In an ideal world our filter dropdown for the Stage column will show the 4 possible filter options: ValidDraft, InvalidDraft, Pending, and Final. As of today it will only display ValidDraft, Pending, and Final. Selecting ValidDraft will filter for all "Draft" stages including the ones that are "InvalidDraft" which we do not want to see. Any suggested work-arounds so that we can get our Stage column's filtering to work against two different data values for our one visible column? Thanks for the help!

if (cols[c]["field"] == "STAGE") {

cols[c].filterable = {

multi: true,

search: true,

itemTemplate: function (e) {

if (e.field == "all") {

return

'<li class="k-item"><label class="k-label"><input type="checkbox" class="k-check-all" value="Select All">Select All</label></li>'

;

} else {

return

'<li class="k-item"><label class="k-label"><input type="checkbox" class="" value="#=data.STAGE#">#=getDisplayStage(data)#</label></li>'

}

};

}

the masking function if interested:

getDisplayStage= function (dataItem) {

return dataItem.STAGE === "Draft" ? dataItem.DRAFTSTAGE: dataItem.STAGE;

}

Grid

answered on 21 Mar 2019

3 answers

985 views

[Solved] Ajax call inside validation rule

   $("#myform").kendoValidator({

            rules:
                {

                    json_rule: function (input) {
                        var ret = true;
                        if (input.is("[id=pwd]")) {
                            $.ajax({
                                url: "api/HelperApi/Test" ,
                                type: 'Get',
                                data: { value: input.val() },
                                success: function (result) {
                                    ret = result === true;
                                }
                            });
                        }
                        return ret;
                    }

                },

            messages: {

                json_rule: "Json verified!",


            }
        });

I never see the message for some reason (I verified the server call, it does return true and false)

Validation

answered on 21 Mar 2019

20 answers

1.0K+ views

Extend insert ordered list tool to style list with letters instead of numbers

How would we go about duplicating the insert ordered list tool and then extending it to add style="list-style-type:lower-alpha" to the ordered list element?

We know how to add a custom tool and use jQuery to add the style, however we are not sure of what Kendo UI framework code to use to mimic the behaviour of the default insert ordered list tool and get a handle on the inserted ordered list element.

Editor

answered on 21 Mar 2019

3 answers

762 views

[Solved] Setting Variable Filter on Grid

What is the proper way of setting a filter on a datagrid from a variable?

I can manually set a filter in the parse function of the datasource but I assume there is a better way.

I've seen a post about setting the grid.datasource.filter such as

grid.dataSource.filter({field: "someValue", operator: "eq", value: someValue });

but when I put this in the databound event it does work but I'm getting some stack overflow errors so I assume this is wrong.

I've created a dojo showing what I have sofar.

Dojo

MVVM

answered on 21 Mar 2019

3 answers

562 views

Slider tick labels missing for kendo-angular-ui

I'm trying out the native Angular 4 components, and I'm starting with the Slider. I was really surprised not to have value labels for the ticks. You can see that in the current documentation: http://www.telerik.com/kendo-angular-ui/components/inputs/slider/

Not having them as the default wouldn't surprise me much, but there doesn't seem to be a way to turn them on on the API: http://www.telerik.com/kendo-angular-ui/components/inputs/api/SliderComponent/

The slider in kendo-ui had this feature. Am I just missing something?

Slider

answered on 20 Mar 2019

3 answers

682 views

[Solved] Row index in templates

Are there any variables available in a template such as the row index number? Something like ${ rowIndex } that is available automatically.

Thanks

Templates

answered on 20 Mar 2019

7 answers

226 views

Create a Monitoring view

I have around 200 machines which i want to create a page show their status(which updates every 5 seconds)and then when click on each of them i get more detail,but i dont have any idea in Kendo which tool can help me to achieve that?

Charts

answered on 20 Mar 2019

1 answer

330 views

Update Grid Kendo Ui with Json

I would like to know how do I get my Json updated on the grid after saving and editing, the grid is only showing my Json files manually added

<html lang="en">
<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">
<title>Grid</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href="styles/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>

<h1 style="position: center">Cadastro de Alunos</h1>
<div class="container">
<button id="abrirModal" class="k-button k-primary" style=" float: left">Cadastrar</button>
</div>
<br>
<br>

<div id="grid"></div>
<div id="kendoModal">
<div id="window">
<div class="col-sm-2">
<div class="form-group">
<label for="">Matrícula</label>
<input type="text" class="form-control" id="txtMatricula">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Nome</label>
<input type="text" class="form-control" id="txtAluno">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Idade</label>
<input type="text" class="form-control" id="txtIdade">
</div>
</div>
<button id="#btnSalvar" class="k-primary" onclick="salvarTeste()">Salvar</button>
</div>

<div class="responsive-message"></div>
<style>
#kendoModal {
min-height: 500px;
}
#undo {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.armchair {
float: left;
margin: 30px 30px 120px 30px;
text-align: center;
}
.armchair img {
display: block;
margin-bottom: 10px;
}
.k-window-content a {
color: #BBB;
}
.k-window-content p {
margin-bottom: 1em;
}
@media screen and (max-width: 1023px) {
div.k-window {
display: none !important;
}
}
</style>
</div>
<div id="kendoModal">
<div id="windowEditar">
<div class="col-sm-2">
<div class="form-group">
<label for="">Matricula</label>
<input type="text" class="form-control" id="editarMatricula">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="">Aluno</label>
<input type="text" class="form-control" id="editarAluno">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Idade
</label>
<input type="text" class="form-control" id="editarIdade">
</div>
</div>
<button id="#btnSalvar" class="k-primary" onclick="salvarEditar()">Salvar</button>
</div>

<div class="responsive-message"></div>
<style>
#kendoModal {
min-height: 500px;
}
#undo {
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.armchair {
float: left;
margin: 30px 30px 120px 30px;
text-align: center;
}
.armchair img {
display: block;
margin-bottom: 10px;
}
.k-window-content a {
color: #BBB;
}
.k-window-content p {
margin-bottom: 1em;
}
@media screen and (max-width: 1023px) {
div.k-window {
display: none !important;
}
}
</style>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="js/kendo.all.min.js"></script>
<script>
var json = [
{
matricula: '1',
aluno: 'Almir',
idade: '21'
},
{
matricula: '2',
aluno: 'Carlos',
idade: '18 '
},
{
matricula: '3',
aluno: 'Batista',
idade: '38'
},
{
matricula: '4',
aluno: 'Maria',
idade: '39'
},
{
matricula: '5',
aluno: 'Valeria',
idade: '41'
},
{
matricula: '6',
aluno: 'Douglas',
idade: '32'
},
{
matricula: '7',
aluno: 'Cida',
idade: '18'
},
{
matricula: '8',
aluno: 'Joana',
idade: '18'
},
{
matricula: '9',
aluno: 'Luis',
idade: '18'
},
{
matricula: '10',
aluno: 'Daiane',
idade: '48'
}
];
var db = JSON.parse(localStorage.getItem('json'));
if (!db) {
db = json
};
var modeloGrid = {
fields: {
matricula: { type: "string", editable: false },
aluno: { type: "string", editable: false },
idade: { type: "string", editable: false },

}
};
var colunasGrid = [
{ field: "matricula", title: "Matricula", width: 250 },
{ field: "aluno", title: "Nome", width: 250 },
{ field: "idade", title: "Idade", width: 250 },
{ command: { text: "Editar", click: (e) => { funcaoEditar(e) }, imageClass: "k-icon k-i-plus" }, title: " ", width: "100px" },
//{ command: { text: "Excluir", click: () => { eliminarTeste() }, imageClass: "k-icon k-i-plus" }, title: " ", width: "100px" },
{
command: [{
name: "Delete", imageClass: "k-icon k-i-close", click: function (e) {
e.preventDefault();
var dataItem = this.dataItem($(e.target).closest("tr"));
if (kendo.confirm("Deseja excluir?").then(function () {
kendo.alert("Aluno excluido com sucesso.");
}, function () {
kendo.alert("You chose to Cancel action.");
})) {
var dataSource = $("#grid").data("kendoGrid").dataSource;
dataSource.remove(dataItem);
dataSource.sync();
}
}
}], title: " ", width: "200px"
}
];
function kendoGridGetId(e, idGrid, keyName) {
var cell = $(e.currentTarget);
var cellIndex = cell[0].cellIndex;
var grid = $(idGrid).data("kendoGrid");
var column = grid.columns[cellIndex];
var dataItem = grid.dataItem(cell.closest("tr"));
return dataItem[keyName];
}

//função editar
function funcaoEditar(e) {
$('#windowEditar').data('kendoWindow').open();
var matricula = kendoGridGetId(e, '#grid', 'matricula');
var aluno = kendoGridGetId(e, '#grid', 'aluno');
var idade = kendoGridGetId(e, '#grid', 'idade');
$("#editarMatricula").val(matricula);
$("#editarAluno").val(aluno);
$("#editarIdade").val(idade);
}

//função salvar
let salvarTeste = () => {
let db = localStorage.info == null ? [] : JSON.parse(localStorage.info);
let matricula = document.querySelector("#txtMatricula").value;
let aluno = document.querySelector("#txtAluno").value;
let idade = document.querySelector("#txtIdade").value;

db.push({
'matricula': matricula,
'aluno': aluno,
'idade': idade
});

localStorage.info = JSON.stringify(db);
$('#grid').data('kendoGrid').dataSource.read();
$('#grid').data('kendoGrid').refresh();
kendo.alert("Salvo com Sucesso!").center();
console.log(db);
}
let salvarEditar = () => {
let db = localStorage.info == null ? [] : JSON.parse(localStorage.info);
let matricula = document.querySelector("#editarMatricula").value;
let aluno = document.querySelector("#editarAluno").value;
let idade = document.querySelector("#editarIdade").value;

db.push({
'matricula': matricula,
'aluno': aluno,
'idade': idade
});

var dataSource = $("#grid").data("kendoGrid").dataSource;
dataSource.refresh(db);
localStorage.info = JSON.stringify(db);

kendo.alert("Modoficado com Sucesso!").center();
console.log(db);
}
//função excluir
let eliminarTeste = () => {
let db = localStorage.info == null ? [] : JSON.parse(localStorage.info)
let resultadoIndex = db.findIndex(e => e.matricula == doc);
//verifica se encontrou o objeto
if (resultadoIndex != -1) {
db.splice(resultadoIndex, 1);
localStorage.info = JSON.stringify(db);
} else {
alert("Não encontrado!");
}
}

$(document).ready(function () {
var myWindow = $("#window"),
undo = $("#abrirModal");
undo.click(function () {
myWindow.data("kendoWindow").open();
undo.fadeOut();
});
function onClose() {
undo.fadeIn();
}
myWindow.kendoWindow({
width: "600px",
title: "Cadastro de Alunos",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center();
});

//modal kendol
$(function () {
var myWindow = $("#windowEditar"),
undo = $("");
undo.click(function () {
myWindow.data("kendoWindow").open();
undo.fadeOut();
});
function onClose() {
undo.fadeIn();
}
myWindow.kendoWindow({
width: "600px",
title: "Editar Alunos",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center();

//criando grid
$('#grid').kendoGrid({
dataSource: {
type: "odata",
data: json,
schema: {
model: modeloGrid,
data: function (data) {
return data;
},
total: function (data) {
return data.length;
}
}
},
excel: {
allPages: true,
fileName: 'arquivo_' + $.now() + ".xlsx"
},
height: 500,
resizable: false,
scrollable: true,
sortable: true,
filterable: true,
groupable: true,
selectable: "row",
filterable: true,
navigatable: true,
reorderable: true,
editable: { mode: "inline", confirmation: false },
columns: colunasGrid
});
});

</script>

</body>
</html>

Grid

answered on 20 Mar 2019

2 answers

5.5K+ views

How to perform 'Expand All' and 'Collapse All' in Kendo Tree View on click of Expand button and Collapse button

Dear Team,

I am new to Kendo control, please help me with this, I already have Tree View as shown in the attachment, Now I have two(Expand and Collapse) buttons, I need to perform the 'Expand All' on click of Expand button and 'Collapse All' on click of Collapse button.

How to perform 'Expand All' and 'Collapse All' in Kendo Tree View on click of Expand button and Collapse button.

Please help me on this.

TreeView

answered on 20 Mar 2019

1 answer

209 views

How to get rid of Hibernate and use database by JDBC-driver

We need to get rid of Hibernate (change it to JDBC-driver).

We use springdemos and have already changed 90% of code, but we don't inderstand how to get rid of this function:

@Override
public DataSourceResult getList(DataSourceRequest request) {
return request.toDataSourceResult(sessionFactory.getCurrentSession(), TObjectType.class);}

---

Full code of TObjectTypeDaoImpl (it's model):

--

package com.kendoui.spring.models;

import org.hibernate.Session;
import com.kendoui.spring.models.TObjectType;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

@Transactional
@Component
public class TObjectTypeDaoImpl implements TObjectTypeDao {
@Autowired
private SessionFactory sessionFactory;
private ConnectionToPostgresql cn;
{ try { cn = new ConnectionToPostgresql(); }
catch (Exception e) { e.printStackTrace(); } }

@SuppressWarnings("unchecked")
@Override
public List<TObjectType> getList() {
//return sessionFactory.getCurrentSession().createCriteria(TObjectType.class).list();
Connection connection = cn.getConnection();
List<TObjectType> result = new ArrayList<TObjectType>();
try {
Statement statement = connection.createStatement();
ResultSet resultSet = statement.executeQuery("SELECT * FROM \"TOBJECT_TYPE\"");
while (resultSet.next()) {
TObjectType to = new TObjectType();
to.setIdObjectType(resultSet.getString("ID_OBJECT_TYPE"));
to.setDescription(resultSet.getString("DESCRIPTION"));
to.setObject1C(resultSet.getString("OBJECT_1C"));
result.add(to);
}
return result;
} catch (SQLException e) {
e.printStackTrace();
return null;
}
}

@Override
public DataSourceResult getList(DataSourceRequest request) {

return request.toDataSourceResult(sessionFactory.getCurrentSession(), TObjectType.class);

}

@Override
public void saveOrUpdate(List<TObjectType> products) {
// Session session = sessionFactory.getCurrentSession();
// for (TObjectType product : products) {
// session.saveOrUpdate(product);
// }
//Connection connection = cn.getConnection();
for (TObjectType product : products) {

Connection connection = cn.getConnection();
String item = product.getIdObjectType();
try {
if (item.equals(""))
{
System.out.println("New User");
Statement statement = connection.createStatement();
PreparedStatement preparedStmt = connection.prepareStatement("INSERT INTO \"TOBJECT_TYPE\" (\"DESCRIPTION\",\"OBJECT_1C\") VALUES (?, ?)");
preparedStmt.setString(1, product.getDescription());
preparedStmt.setString(2, product.getObject1C());
//preparedStmt.setString(1, product.getIdObjectType());
preparedStmt.executeUpdate();
connection.close();
}
else {
System.out.println("Update user");

PreparedStatement preparedStmt = connection.prepareStatement("UPDATE \"TOBJECT_TYPE\" SET \"DESCRIPTION\" = ?, \"OBJECT_1C\" = ? where \"ID_OBJECT_TYPE\" = ?");
preparedStmt.setString(1, product.getDescription());
preparedStmt.setString(2, product.getObject1C());
preparedStmt.setString(3, product.getIdObjectType());
preparedStmt.executeUpdate();
connection.close();
}
} catch (SQLException e) {
e.printStackTrace();}
}
}

@Override //если добавляем
public void saveOrUpdate(TObjectType product) {
// Session session = sessionFactory.getCurrentSession();
// session.saveOrUpdate(product);
System.out.println("Вызвался метод saveOrUpdate(TObjectType product)");

}

@Override
public void delete(TObjectType product) {
System.out.println("Вызвался метод delete(TObjectType product)");
//Session session = sessionFactory.getCurrentSession();
//session.delete(session.load(TObjectType.class, product.getIdObjectType()));
}

@Override
public void delete(List<TObjectType> products) {
// Session session = sessionFactory.getCurrentSession();
// for (TObjectType product : products) {
// session.delete(session.load(TObjectType.class, product.getIdObjectType()));
// }
for (TObjectType product : products) {
Connection connection = cn.getConnection();
try {
PreparedStatement preparedStmt = connection.prepareStatement("DELETE FROM \"TOBJECT_TYPE\" WHERE \"ID_OBJECT_TYPE\" = ?");
preparedStmt.setString(1, product.getIdObjectType());
preparedStmt.executeUpdate();
connection.close();
}
catch (SQLException e){ e.printStackTrace();}
}
}
}

Grid

answered on 20 Mar 2019