I have this filter field with arrows that increase or decrease numbers and I want to remove them
As far I've tried several solutions that didn't help
{
field: "TotalEnergyCharge",
title: "Calc Total",
format: "{0:n2}",
width: "70px",
headerAttributes: {
style: "overflow: visible; white-space: normal; text-align: center; font-weight: bold"
},
attributes: {
style: "text-align: right"
},
operator: "eq",
filterable: {
cell: {
operator: "eq",
showOperators: false
}
},
spinners: false,
editor: function (container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
spinners: false
});
}
},
You couldn't remove because both ways you're trying are meant to work in a different way. The spinners before editor won't work at all, and the spinners option for the widget located inside editor will work only when user edits a row.
Now, for the filter widget, I couldn't find anything strightforward to use, like an event or method as used in editor. It seems that there is nothing like that for filters.
So I did a trick after grid initialization, changing the filters' fields options:
$('#grid .k-filter-row input[data-role="numerictextbox"]').each((i, el) => {
$(el).data('kendoNumericTextBox').setOptions({ spinners: false });
});
Dojo
Modify the selector to get the filters you like to remove the spinners.
Note that setOptions is not listed as a method in the NumericTextBox documentation. Kudos for Kendo!!
Related
Background
I have a Kendo Grid with checkboxes, dropdownlist and datepicker. I am using row template functionality to add these controls on the grid. Below is the code for my grid.
This is how I build my Kendo Grid
$("#firstReqGrid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["save"],
columns: [
{ field: "claimId", title: "ClaimID", width: 40 },
{ field: "lineCnt", title: "Lines", width: 10 },
{ title: "Med Requested", field: "medRecRequested", template: '<input type="checkbox" #= medRecRequested ? \'checked="checked"\' : "" # class="chkbx" />', width: 25, editable: function (e) { return false; } },
{ title: "EOB", field: "eobChk", template: '<input type="checkbox" #= eobChk ? \'checked="checked"\' : "" # class="chkbx" />', width: 25, editable: function (e) { return false; } },
{ title: "Claim", field: "clmChk", template: '<input type="checkbox" #= clmChk ? \'checked="checked"\' : "" # class="chkbx" />', width: 25, editable: function (e) { return false; } },
{ field: "MedRecRcvd", title: "Med Rec Rcvd", width: "30px", editor: medRecRcvdDropDownEditor, template: "#=MedRecRcvd.MedRecRcvdName#" },
{
field: "dateReceived", title:"Date Rcvd", format: "{0:dd MMM yyyy}", width: 30, editor: function (container, options) {
var input = $("<input/>");
input.attr("name", options.field);
input.appendTo(container);
input.kendoDatePicker({});
}
},
{ title: "Memo", width: 40, template: '<input type="k-button" onclick="return addMemo(#=claimId#)" class="k-button" name="btnMemo" value="Memo" />' }],
editable: true,
dataBound: function (e) {
/* This code disables all the checkboxes in the grid*/
$("#firstReqGrid :input").attr("disabled", true);
// var grid = $("#firstReqGrid").data("kendoGrid");
// var pageSizeDropDownList = grid.wrapper.children.find(".k-dropdown select").data("kendoDropDownList");
//var dropDown = e.container.find("[data-role='dropdownlist']").data("kendoDropDownList");
//if (dropDown) {
// dropDown.readonly();
//}
}
});
What I am trying to achieve
I want to be able to disable Datepicker and Dropdownlist if certain conditions are met. I was planning on checking for those "conditions" in the databound event of the grid and if conditions were met then disable datepicker and dropdownlist. I am aware of the datepicker.enable(false) event but in order to do that I need an id which I don't have in this instance. Same goes for dropdownlist list as well; I need an ID to disable the attribute. I need help on how to go about adding an ID for datepicker and dropdownlist with the code I have layed out. So that I can refer to that ID in grid databound event and turn on the disable property. Or if there is any other way I am open for suggestions. Thanks a lot.
You can handle the edit event (documentation) to do the following:
Do you custom business logic to determine if the input should be enabled/disabled
If disabling, then get the input
Then get the input's name
Do a conditional check to see if you want to get the kendoDatePicker or the kendoDropDownList
Call the enabled method with the result of the business logic.
Here is an example:
edit: function(e) {
if (SomeBusinessLogicHere()) {
var input = e.container.find('input');
var name = input.attr('name');
if (name === 'my date field') {
var datepicker = input.data('kendoDatePicker');
datepicker.enable(false);
}
}
}
Fiddle: https://dojo.telerik.com/uJidaKIf
FYI - If you wanted to prevent the editor from showing up in the first place you could handle the beforeEdit event (documentation) and simply call e.preventDefault() if your business logic is true.
I'm using AgGrid table in my application. Here is the demo. According to the documentation i want to stop movement of the columns. For this i used:
suppressMovable: true
The above code I used here:
columnDefs: [
{
headerName: 'Athlete', //the generic name of header
children: [
{
field: 'athlete', //children header from generic header
width: 150,
suppressMovable:true
},
{
field: 'age',
lockVisible: true,
cellClass: 'locked-visible',
suppressMovable:true
},
{
field: 'country',
width: 150,
},
{ field: 'year' },
{ field: 'date' },
{ field: 'sport' },
],
...
suppressMovable:true, it works, and the athlete and age columns aren't possible to be moved like others, but this code also disable the movement of the main column: Athlete. So when i try to switch the place of Athlete and Medals columns, i can't, but i don't want this, i want to set this 2 main columns as movable.Question: How to disable movement of columns inside the Athlete and Column, but to keep the movement functionality of these 2 main columns?
Out of the box answer is you can't.
If any child is fixed, then AG Grid doesn't allow moving the group.
you can write custom event listener(if possible) to change the suppressMovable property of child columns while the parent column is being dragged and then again set them to not movable/suppressMovable to true. else you can programatically move all columns in a group using moveColumnByIndex(from,to)
I've got a Kendo grid which is being created in JS. This code is not mine, but someone else's, and I really don't think we should be changing many of the fundamentals of it. However, there is one column in it which we would ideally like to display as a dropdown box all the time, or at least look like one. Code is below:
self.caGridOptions = {
widget: self.caKendoGrid,
data: undefined,
dataSource: {
schema: {
model: {
fields: {
id: { type: "number" },
description: { type: "string", editable: false },
value: { type: "number", editable: false },
caTypeDescription: { type: "string", editable: false }
}
}
},
autoSync: true
},
sortable: true,
scrollable: false,
editable: true,
columns: [
{ field: "id", title: "Code", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'code') : id #", editor: self.caDropDownEditor },
{ field: "description", title: "Description", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'description') : id #" },
{ field: "value", title: "Value", width: 90, format: "{0:n2}", template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'value') : id #" },
{ field: "caTypeDescription", title: "Type", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'caTypeDescription') : id #" },
{ width: 90, filterable: false, template: kendo.template('<a class="btn btn-danger btn-sm" title="delete"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a>') }
],
dataBound: self.gridButtons,
noRecords: true,
messages: {
noRecords: "There is no data available"
}
};
//
// functions
self.getca = function (id, type) {
if (id == null) return null;
return self.caOptions().filter(function (item) { return item.id == id; })[0][type];
};
The ID field (first column) goes into a dropdown box when it is edited, as you can see. However, what we would like is for this to appear as a dropdown box all the time. Not necessarily by always having the editor on (which I believe would be impossible, as Kendo can only turn the editor on on one row at a time), but perhaps by simply formatting it like a dropdown.
Any help would be gratefully appreciated. It's annoying as this is a tiny, minor thing and we've got examples of it working elsewhere, but they're grids which have been written primarily in cshtml (using Kendo MVC, I think) and I really don't want to rewrite the entire grid for something so trivial, as well as possibly any other functions that rely on its data.
The primary issue you are facing is that the cell is just a table cell until you actually start editing. At that time, it dynamically creates the input.
I had a similar requirement in the past and it ended up being easier to decorate the cell to look like a drop-down as opposed to trying to render a drop-down in every row of the grid. This allows you to keep the default grid behavior intact and allows the user to see that there will be a list of values when they edit that cell. We ended up just putting a down-arrow icon to the right of the value in the display template - from your code, it looks like you are using some font-awesome icons, but there are some delivered by Kendo UI as well - so, the template could be something like this:
template: '#=id# <span class="k-icon k-icon-s"></span>'
UPDATE:
The kendo icons do depend on your version and I had a typo in the name above. In any case, here is an example you can look at:
This Kendo demo shows adding a custom editor (dropdown) on the Category column:
http://demos.telerik.com/kendo-ui/grid/editing-custom
If you scroll down, there is a button to "Edit this Example" - here, you'll see that the Category column uses a template:
template: "#=Category.CategoryName#"
You can change the template to the following to create a drop-down looking effect:
template: "<span style='border-style:solid; border-width: 1px; padding: 4px; width: 150px; display: block'>#=Category.CategoryName# <span class='k-icon k-i-arrow-60-down' style='float:right'></span></span>"
You can tune the css to get it closer to exactly what you want, but this give you the idea. Other possibilities include actually defining css classes that can be applied so you don't need to include so much in-line styling.
I am using the Telerik Kendo UI grid. I have configured it to use grid inline editing. I have an interesting requirement. One of the columns is a checkbox and this defines whether some of the controls are editable or not. i.e when ticked columns E,F,G are read-only and others are editable. When unticked column B,C are editable and others are read-only.
I have successfully implemented this but I would like to improve it. I have implemented it so that the controls are disabled. However, I would prefer if it the controls change to labels such as the Display Mode.
function gridEdit(e) {
setRowStatus(e.container, e.model.IsCustomJob);
}
function setRowStatus(c, isSpecificSH) {
changeControlStatusNumeric(c, 'ColumnB', !IsCustomJob);
changeControlStatusNumeric(c, 'ColumnC', !IsCustomJob);
changeControlStatusNumeric(c, 'ColumnE', IsCustomJob);
changeControlStatusNumeric(c, 'ColumnF', IsCustomJob);
changeControlStatusDropDown(c, 'ColumnG', IsCustomJob);
}
function changeControlStatusNumeric(c, name, isEnabled) {
var ctrl = c.find("input[name='" + name + "']").data("kendoNumericTextBox");
ctrl.enable(isEnabled);
if (!isEnabled) {
ctrl.value('');
}
}
The problem with my implementation as can be seen below is that it is not very clear for the user which items are editable and which items are not. That is why I would like to change the disabled controls to labels or maybe hide them completely. Is there a functionality in the Grid API for implementing this ... or maybe I should implement this using jquery?
When Ticked:
When Unticked:
I'd suggest creating custom editors for the columns that should be disabled and then conditionally append read-only content instead of the editor, e.g. like this:
Grid:
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [{
field: "ProductName",
title: "Product Name"
}, {
field: "Category",
title: "Category",
width: "160px",
editor: categoryDropDownEditor,
template: "#=Category.CategoryName#"
}, {
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "120px"
}, {
command: ["edit", "destroy"]
}],
editable: "inline"
});
Editor:
function categoryDropDownEditor(container, options) {
// if model is set to disabled we don't show an editor
if (options.model.disabled) {
$("<span>" + options.model.get(options.field).CategoryName + "</span>").appendTo(container);
return;
};
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
});
}
You could set the model.disabled property in your changeControlStatusNumeric function, or if you don't want an additional field in the model, you can add a CSS class to the container and check for that in the custom editor.
(demo)
After doing some research I seem to be unable to solve a problem with a Shield UI Grid control. I want to be able to allow users to place columns in a order of their choice. I have similar orders like the code below:
$(function () {
$("#grid").shieldGrid({
dataSource: {
data: products
},
columns: [
"ProductName",
{ field: "['Category']['CategoryName']", title: "CategoryName", format: "{0:c}", width: "330px" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});
});
And after I didn’t find the solution I placed some additional controls on the page to display the columns sequence, but this doesn’t liik quite the way I want.
Is there a way to dynamically change places of the grid columns?
As a matter of fact the solution is quite simple. The Shield UI Grid control supports dynamical column reordering.
All you need is to include the columnReorder property set to true in your code:
columnReorder: true,
In addition to that there is no need to use additional controls. Using drag and drop users can just drag the column and place it in the desired position.