Questions on Kendo UI for jQuery Forum

2 answers

10.6K+ views

[Solved] How to clear all grid filter controls?

I added a custom button to my grid to clear any currently active filters. It's mostly working, but I am having a problem getting the filtermenu control to completely clear. With the code below the actual data in the grid is unfiltered and the first item in each filtermenu is cleared. The problem is that if you add an "and" or "or" condition to the filtermenu, the second condition is not cleared. Any ideas as to how to properly do this? Or is it possible to get a "clearAllFilters" method on the grid at some point in the future? Thanks for your help.

$(".k-grid-clearfilters").click(function() {

// Clear the grid filters

var gridDataSource = $("#departmentgrid").data("kendoGrid").dataSource;

for (var i = 0; i < gridDataSource.options.fields.length - 1; i++) {

gridDataSource.filter({ field: gridDataSource.options.fields[i].field, value: "" });

}

gridDataSource.filter([]);

});

Regards,
Brian

Grid

answered on 22 Mar 2019

2 answers

828 views

A kendo tree list in a kendo grid custom command popup window doesn't work more than once

I have a kendo tree in a dialog box (https://demos.telerik.com/kendo-ui/dialog/treeview-integration) in my kendo grid custom command window (https://demos.telerik.com/kendo-ui/grid/custom-command)

For the first time when the user clicks on the custom command button (View Details) of any kendo grid row, the kendo tree works fine. But, when he makes a second click on custom command button on the same/different kendo grid row, the kendo tree loads forever. Also, I am newing up the kendo treeview object on every custom command button click. The dojo link is below

https://dojo.telerik.com/@varunmechie@gmail.com/IDOQIqaP

Please let me know if this can be fixed.

Thanks.

DropDownTree

answered on 21 Mar 2019

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

990 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

765 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

566 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

688 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

232 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

335 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