I have noticed in the kendoNumericTextBox docs that there is a property named spinners that enables or disables the spinners.
The question is how can i access and set this property to false on a numeric field on a grid.
At the current stage i declare my field as number.
I do not know if this http://demos.kendoui.com/web/grid/editing-custom.html can be any help in this scenario or there is an easier work around.
There is a spinners flag in the initialization of kendoNumericTextBox.
$("#numeric").kendoNumericTextBox({
spinners : false
});
EDIT
For using it in grid you should define an editor function in the column definition. Example:
{ field: "number", title: "Number", editor: editNumberWithoutSpinners }
And define editNumberWithoutSpinners as:
function editNumberWithoutSpinners(container, options) {
$('<input data-text-field="' + options.field + '" ' +
'data-value-field="' + options.field + '" ' +
'data-bind="value:' + options.field + '" ' +
'data-format="' + options.format + '"/>')
.appendTo(container)
.kendoNumericTextBox({
spinners : false
});
}
late to the game but I just fiddled around with CSS and this seems to do the trick:
1. hide the select area within numeric textbox
2. remove the right padding which was added to allow for the selectors
.k-numerictextbox .k-select { display: none; }
.k-numerictextbox .k-numeric-wrap { padding-right: 2px; }
obviously inspect your html to make sure those styles exist and make it more or less inclusive depending on your situation.
Related
What is the perfect meaning of editor and template in kendo grid
columns: [{
field: "CategoryId",
title: "#T("Admin.Catalog.Products.Categories.Fields.Category")",
width: 200,
editor: categoryDropDownEditor,
template: "#:Category#"
}]
With the editor property you can specify a function that is called when editing the cell (of course, the grid must be set to 'editable:true')
The function could look like this:
function numberEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 0,
step : 1,
min : 0
});
}
So when editing a cell, a NumericTextBox is shown which in this case only allows positive (min:0) integers (decimal:0). In general you can define how the cell can be edited.
The template defines how the value is displayed.In your case the value is just shown as it is.
You could for example add some html:
template: "<b>#:Category#</b>" // Display bold text
template: "#:Category#" // Display as link
The #:Category# accesses the data field with that name. You can also use multiple fields in one column:
template: "#:Category# / #:SomethingElse#"
I'm trying to set the values for an multiselect editor, as in:
http://dojo.telerik.com/oneGE
But when I implement same in a Kendoui Grid custom editor the value setting is ignored.
The editor is setup in the grid declaration as a function:
$("#rocongrid").kendoGrid({<br/>
....
editor : function (container,options) {
$('<select multiple="multiple" data-bind="value:' + options.field + '"/>')
.appendTo(container).kendoMultiSelect({
dataTextField: "genre",
dataValueField: "genre",
dataSource: GenreDS,
value: [ "Classical" ]
});
}
},
The "Classical" item is set fine in the dojo sample, but in the Grid Edit mode it does not. Is there something I am not implementing in the custom editor?
There are a couple of questions that you need to consider when implementing multiselect in a Grid.
Values are not going to be a single value but an array of values so you need to implement some way for displaying it as (for example) comma separated values.
if you use data-bind="value:' + options.field + '" then this will overwrite value: [ "Classical" ]. Actually the later does not make sense since what you want is initially showing the values that are already stored in the Grid DataSource
I have a jqgrid with inline edit and few frozen columns. I gathered some information on how to make this work from here. The answer in the link has a frozen column which is multi-select.
But what I wanted to know is if there is any way or a work around to edit a frozen column in inline edit.
I have been trying to figure this one out for a little while now, and was finally able to come up with something that works for my situation. Hopefully you can do something similar.
I created the following function to be called when the edit button is clicked:
var editRow = function(rowId) {
$('#' + gridId).editRow(rowId);
$('#' + gridId + '_frozen').editRow(rowId);
};
This will make the frozen columns appear editable to the user.
I created the following function to be called when the save button is clicked:
var saveRow = function(rowId) {
$('#' + gridId + '_frozen' + ' #' + rowId + ' > td').each(function () {
var col = $(this).attr('aria-describedby');
$('#' + gridId + ' #' + rowId + ' > td[aria-describedby="' + col + '"]')
.children(':first')
.val($(this).children(':first').val());
});
$('#' + gridId).saveRow(rowId);
};
This code will take the value from the frozen cell and copy it to the underlying hidden cell - which is the cell whose value is submitted on save.
I also have a cancel option, which calls the following method:
var cancelRow = function(rowId) {
$('#' + gridId).restoreRow(rowId);
$('#' + gridId + '_frozen').restoreRow(rowId);
};
UPDATE:
I found that this solution only works in IE(8), not in Chrome or Firefox. The web application I am working on only needs to be compatible with IE8, but I will try to find a solution for the other browsers as well.
I have a jqGrid and when I do a seach I get a small dialog. There is a Add button at the top which has a "+" sign to add rows for advanced searching. Is it possible to change this button text to a plain old school "Add" without hacking into js library. Is there any way by writing an extendion? Is so how?
<input type="button" value="+" title="Add rule" class="add-rule ui-add">
The method navGrid has some parameters which can be used to change the look of navigator buttons. I used additionally toppager: true option of jqGrid and cloneToTop: true option of navGrid for the case that one uses top pager. If one just create the navigator buttons with respect of the call
$grid.jqGrid('navGrid', '#pager', {
cloneToTop: true,
view: true,
add: true,
edit: true,
addtext: 'Add',
edittext: 'Edit',
deltext: 'Delete',
searchtext: 'Search',
refreshtext: 'Reload',
viewtext: 'View'
});
one will see the results like
I used rowNum: 2 for the tests only to reduce the height of the pictures.
If I correct understand you, you want to have pure text buttons. To remove the icons from the buttons one can execute the following additional lines
var pagerId = 'pager', gridId = $.jgrid.jqID($grid[0].id);
$('#' + pagerId).find('.navtable span.ui-icon').remove();
$('#' + gridId + '_toppager').find('.navtable span.ui-icon').remove();
The gridId will be set to 'list'. One need to use $.jgrid.jqID if the grid id could contain meta-characters. The results will be
Next step will be to fix right and left the padding or margin of the buttons to show the texts better:
.ui-jqgrid .ui-jqgrid-pager .navtable .ui-pg-div,
.ui-jqgrid .ui-jqgrid-toppager .navtable .ui-pg-div {
padding-right: 3px;
padding-left: 3px;
}
The results will be improved to the following
Now we need fix the position of the pager. We can do this with respect of
$('#' + pagerId + '_left').width($('#' + pagerId + ' .navtable').width());
$('#' + gridId + '_toppager_left').width($('#' + gridId + '_toppager .navtable').width());
$('#' + pagerId + '_center')[0].style.width='';
$('#' + gridId + '_toppager_center')[0].style.width='';
and have the following results
or remove additionally unused right part of the pager with
$('#' + pagerId + '_right').remove();
$('#' + gridId + '_toppager_right').remove();
which places the pager in the middle of the rest place on the pager:
In my opinion it's mostly the matter of taste which look is better. You can see the resulting demo here.
Alternatively you can do use icons over the text, but place the text under the icons. You can see
details in the demo which produces the following results:
UPDATED: To customize the "Add rule" or "Add group" buttons you can use afterRedraw option:
afterRedraw: function () {
$('input.add-rule',this).val('Add new rule');
$('input.add-group',this).val('Add new rule group');
}
The demo which use the option produce the searching dialog like the following:
(the button "Add group" exist if multipleGroup: true are used and the "Add rule" button exist if multipleSearch: true are used).
UPDATED 2: One can improve the visibility of the searching dialog if one would use jQuery UI Buttons:
afterRedraw: function () {
$('input.add-rule',this).val('Add new rule').button();
$('input.add-group',this).val('Add new group or rules').button();
$('input.delete-rule',this).val('Delete rule').button();
$('input.delete-group',this).val('Delete group').button();
}
The result dialog can be like the following
I need to catch the event where the columns are resized. How do I do that?
It seems to me you should use resizeStop event (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events&s[]=resizeStop#list_of_events)
UPDATED:
After you resize a column header in the jqGrid it calls resizeStop event. For example
jQuery('#list').jqGrid({
caption: 'My caption',
url: myUrl,
resizeStop: function (newwidth,index) {
alert('Column #' + index + ' has now size ' + newwidth + ' px');
},
// other jqGrid parameters
});