I try to remove an item from dropdown of Kendo grid filter. But it is still rendered. How can I reach such behaviour?
$("#grid").kendoGrid({
columns: [
{ field: "someDate", type: "date" }
],
dataSource: [
{ someDate: "2016-3-29"},
{ someDate: "2016-3-30"}
],
filterable: {
extra: true,
operators: {
date: {
gte: "Is after or equal to",
lte: "Is before or equal to"
}
}
},
filterMenuInit: function(e) {
e.container.find("select:eq(0)>option")[1].remove();
e.container.find("select:eq(1)>option")[1].remove();
e.container.find("select:eq(2)>option")[0].remove();
}
});
Link on dojo.
Please help.
EDITED:
I need two complex filters for dates. In the first filter I need only "Is after or equal to", then "AND", and in the second filter I need only "Is before or equal to". I try to do this by removing "Is before or equal to" from the first dropdown and "Is after or equal to" from the second one.
Instead of removing you can add only what you want
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
You need to get the kendoDropDownList object, then remove the item from the dataSource; I have updated your dojo
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" }
],
dataSource: [
{ name: "Jane Doe"},
{ name: "John Doe"}
],
filterable: true,
filterMenuInit: function(e) {
if (e.field == "name") {
var filter1 = e.container.find("select:eq(0)").data("kendoDropDownList");
var filter2 = e.container.find("select:eq(2)").data("kendoDropDownList");
filter1.dataSource.remove(filter1.dataSource.at(0));
filter1.select(0);
filter2.dataSource.remove(filter2.dataSource.at(0));
filter2.select(0);
}
}
});
</script>
see the below example use filterable: false in field section to remove filter from column.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name", filterable: false },
{ field: "age" }
],
filterable: true,
dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
</script>
Related
I have a data model that I want to be able to add a generic amount of filters to. I am specifying a name and a value. How can I add these hasMany associated fields as filters to my grid? I have attempted to write custom filtering option, but I can't have filters show up without an attached dataIndex, which is not available for the hasMany association.
Ext.define('AirGon.model.Project', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Link', type: 'string' },
{ name: 'Title', type: 'string' },
{ name: 'Description', type: 'string' },
{ name: 'MappedMetadata', mapping: 'Metadata'},
{ name: 'XMax', type: 'float' },
{ name: 'XMin', type: 'float' },
{ name: 'YMax', type: 'float' },
{ name: 'YMin', type: 'float' }
],
hasMany: { model: 'Metadata', name: 'Metadata', associationKey: 'Metadata' }
});
Ext.define('Metadata', {
extend: 'Ext.data.Model',
fields: ['Name', 'Value']
});
This is my custom filtering attempt. I am getting the DataStore from the main store and then adding custom rendering, but I can't filter or sort this column because of the lack of a dataIndex.
var column = {
header: 'Meta',
//?????????dataIndex: 'MappedMetadata[0]',?????
sortable: true,
filterable: true,
filter: {
type: 'string'
},
renderer: function (value, meta, record) {
console.log(record.MetadataStore.data.items[index].data)
return record.MetadataStore.data.items[index].data.Value;
}
}
Data. The data is modeled so that a variable amount of metadata can be entered and the 'tag' will not be known by the system.
{
"Link": "link.com",
"Title": "project",
"Description": "descript",
"State": "",
"Metadata": [
{
"Name": "County",
"Value": "32"
},
{
"Name": "Info",
"Value": "info"
},
{
"Name": "State",
"Value": "TN"
}
],
"XMin": "-1",
"XMax": "-1",
"YMin": "1",
"YMax": "1"
}
I was able to solve this by dynamically flattening the data model and adding columns once the store has been loaded. Although this breaks the MVC structure this was the best solution I came up with so it might be able to help you.
var defaultColumns = [];
var store = Ext.getStore('store');
store.on('load', function (store) {
var model = store.model;
var fields = model.getFields();
store.getAt(0).MetadataStore.data.items.forEach(function (item, index) {
var header = item.data.Name;
//isField returns a boolean if the field is already part of the data model
if (!isField(fields, header)) {
//Add a new metadata field to the data model
var field = { name: header, mapping: 'Metadata[' + index + '].Value' }
fields.push(field)
//Add a new metadata column
var column = {
header: header,
dataIndex: header,
sortable: true,
filterable: true,
filter: {
type: 'list'
},
flex: 0.2
}
defaultColumns.push(column);
}
});
model.setFields(fields);
//reload the grid after adding columns
var gridView = Ext.ComponentQuery.query('gridpanel')[0];
gridView.reconfigure(store, defaultColumns);
});
//reload the data after creating new fields
store.load();
I then set the columns of the grid to defaultColumns.
{
xtype: 'grid',
store: 'Projects',
overflowX: 'auto',
autoScroll: true,
features: [filters],
columns: defaultColumns
}
I have a kendo ui function dropdownlist, and it will call at Grid column editor. My question, by default how to display "Yes" when Add New Record in edit function. Currently it display null when Add New Record.
Demo in Dojo
Here I provide a working demo. Thank You
If I understand correctly you only have to add a default value to the Price in the Model?
"Price": {type: "string", defaultValue: "y" },
I include the whole function, just in case:
$(function() {
$("#grid").kendoGrid({
dataSource: {
data: [
{ Name: "Young John", Price: "y" },
{ Name: "John Doe", Price: "n" },
{ Name: "Old John", Price: "y" }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" },
"Price": {type: "string", defaultValue: "y" },
}
}
}
},
editable: "inline",
toolbar: ["create"],
columns: [{ field: "Name"},
{ field: "Price",
template: "#=(data.Price == 'y' ? 'Yes' : 'No')#",
editor: radioPrice
} ],
edit: function(e) {
if (e.model.isNew()) {
e.model.Price = 'y';
}
}
});
});
I am using the following Infragistics component for viewing hierarchical data. http://www.igniteui.com/tree/drag-and-drop-single-tree
I have initialized the tree view like below to see all the nodes of the tree expanded initially. Can someone please suggest me if I am missing any option to display all nodes collapsed initially?
$("#tree").igTree({
checkboxMode: "off",
singleBranchExpand: true,
nodeClick: function (evt, ui) {
if (ui.node.data.Folder == "") {
var agreements = [];
var entry = [];
entry.push(ui.node.data.AgreementNbr);
entry.push(ui.node.data.ExternalDescription);
entry.push(ui.node.data.Description);
entry.push(ui.node.data.EffDate);
entry.push(ui.node.data.ExpDate);
entry.push(ui.node.data.ReleaseStatus);
agreements.push(entry);
$('#example').DataTable({
responsive: true,
columns: [
{ title: "Agreement Number" },
{ title: "External Description" },
{ title: "Description" },
{ title: "Effective Date." },
{ title: "Expiry Date" },
{ title: "Release Status" }
],
data: agreements,
destroy: true,
processing: true,
});
}
else {
var output = ui.node.data.Folder.map(function (obj) {
var a = [obj.AgreementNbr, obj.ExternalDescription, obj.Description, obj.EffDate, obj.ExpDate, obj.ReleaseStatus];
return Object.keys(a).map(function (key) {
return a[key];
});
});
console.log(output);
$('#example').DataTable({
responsive: true,
columns: [
{ title: "Agreement Number" },
{ title: "External Description"},
{ title: "Description"},
{ title: "Effective Date"},
{ title: "Expiry Date"},
{ title: "Release Status"}
],
data : output,
destroy: true
});
}
},
dataSource: files,
dataSourceType: "json",
initialExpandDepth: 0,
pathSeparator: ".",
bindings: {
textKey: "Text",
valueKey: "Value",
imageUrlKey: "ImageUrl",
childDataProperty: "Folder",
Description: "Description"
},
// Enable Drag-and-drop feature
dragAndDrop: false
});
Use the initialExpandDepth option
initialExpandDepth : -1
You have that option set to 0.
If you set the initialExpandDepth to -1, all nodes should display collapsed initially.
You can see infragistics.com for more information.
I got a little problem.
I have a Kendo grid inside another kendo grid. This subgrid appear when i add a new record of the record i selected on the principal grid.
There's no problem there, the inconvenient i got is i want to refresh de grid without refreshing the entire page, because i got too many records and search again that record for add a new records gonna be a little tedious.
Anyone got suggestion for this?
<script type="text/javascript" >
$(document).ready(function() {
{% if app.session.hasFlash('MensajeError') %}
$("#mensajeFlashError").fadeIn('slow').delay(6000).fadeOut('slow');
{%endif%}
{% if app.session.hasFlash('Mensaje') %}
$("#mensajeFlash").fadeIn('slow').delay(6000).fadeOut('slow');
{%endif%}
$("#grid").kendoGrid(
{
sortable: true,
filterable: true,
resizable:true,
pageable:true,
detailInit: detailInit,
detailTemplate: kendo.template($("#template5").html()),
dataSource:
{
pageSize: 15,
transport:
{
read: "{{path('slb_do_liquidaciones_listado',{ 'catalogo' : inhouse })}}",
},
schema:
{
data: "data",
total: function(response)
{
return response.data.length;
},
model:
{
id: "id",
fields:
{
id:{editable: false,type :"number"},
descripcion: { editable: false },
fecha_creacion: { editable: false },
usuario_creacion: { editable: false },
}
}
}
},
columns:
[
{ field: "id",filterable: true, title: "No. DO",width: 70 },
{ field: "descripcion",filterable: true, title: "Descripcion",width: 310 },
{ field: "fecha_creacion",filterable: true, title: "Fecha",width: 70 },
{ field: "usuario_creacion",filterable: true, title: "Usuario",width: 100 },
{command: [{ text: "Nuevo Rubro",imageClass:"k-icon k-add" ,click: showDetails }], title: " ", width: "230px" }
// { command: ["create"], title: " ", width: "100px" }
],
editable: "popup",
pageable:
{
//refresh: true,
messages:
{
display: "{0} - {1} de {2} DO", //{0} is the index of the first record on the page, {1} - index of the last record on the page, {2} is the total amount of records
empty: "No existen Datos",
page: "Página",
of: "de {0}", //{0} is total amount of pages
itemsPerPage: "Facturas por página",
first: "Ir al Inicio",
previous: "Previa",
next: "Siguiente",
last: "Ir al Final",
refresh: "Actualizar"
}
},
filterable:
{
messages:
{
info: "", // sets the text on top of the filter menu
filter: "Buscar", // sets the text for the "Filter" button
clear: "Limpiar", // sets the text for the "Clear" button
gte: "Mayor o igual a",
and: "y",
or: "o",
eq: "Igual a",
},
operators:
{
//filter menu for "number" type columns
number:
{
eq: "Igual a",
neq: "Diferente a",
gte: "Mayor o igual que",
gt: "Mayor que",
lte: "Menor o igual que",
lt: "Menor que"
},
//filter menu for "date" type columns
date:
{
eq: "Igual a",
neq: "Diferente a",
gte: "Despues o igual a",
gt: "Después de",
lte: "Antes o igual a",
lt: "Antes del"
},
//filter menu for foreign key values
enums:
{
eq: "Igual a",
neq: "Dirferente a"
}
}
},
}
);
$(".tabstrip").kendoTabStrip(
{
animation:
{
open: { effects: "fadeIn" }
}
});
});
********************Grid*******
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
requestEnd: onRequestEnd
},
**************Script******************************
function onRequestEnd(e) {
if (e.type == "create") {
$("#SiteGrid").data("kendoGrid").dataSource.read();
}
else if (e.type == "update") {
$("#SiteGrid").data("kendoGrid").dataSource.read();
}
}
i agree with Shaz.. You may also shorten read function call like
$("#grid").kendoGrid({
dataSource:...,
..
..
,
requestEnd: onRequestEnd
})
function onRequestEnd(e) {
if (e.type == "create") {
e.sender.read();
}
else if (e.type == "update") {
e.sender.read();
}
}
In my project had a kendo grid with filtering, filtering is working fine,but data is not clearing dynamically while filter is cleared. filter data is cleared by button click how to clear without "clear" button click.My grid code is
var grid = $("#grid").kendoGrid({
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderID : { type: "number" },
Freight : { type: "number" },
ShipName : { type: "string" },
OrderDate: { type: "date" },
ShipCity : { type: "string" }
}
}
},
pageSize : 10
},
filterable: true,
sortable : true,
pageable : true,
columns : [
{
field : "OrderID",
filterable: false
},
"Freight",
{
field : "OrderDate",
title : "Order Date",
width : 100,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipName",
title: "Ship Name",
width: 200
},
{
field: "ShipCity",
title: "Ship City"
}
]
}).data("kendoGrid");
The only thing I can think of is to use the parameterMap function (when type is 'read') to get rid of the filters that you do not need and always send only the last item of filters array.