I want to make a KendoUI Grid column programmatically non editable.
The information which column should be non editable, I will get after the grid was created and filled with data in my application. Thats why I have to set it programmatically.
First I created the grid on this way:
var dataSource = new kendo.data.DataSource({
schema: {
model: {
fields: {
field1: {
editable: true,
},
field2: {
editable: true,
}
}
}
}
});
$(domNode).kendoGrid({
editable: true,
dataSource: dataSource,
columns: [{
field: 'field1',
title: 'First column'
},
{
field: 'field2',
title: 'Second column'
}
]
});
Then I add some data (I know its not realy necessary to show this here):
var grid = $(domNode).data('kendoGrid');
grid.dataSource.add({
field1: 'Some value',
field2: 'Some other value'
});
Later in my application, I will get the information which column should be non editable. Then I've tried the following:
grid.dataSource.options.schema.model.fields['field1'].editable = false;
grid.dataSource.read(); // No changes, cloumn is still editable
grid.refresh(); // No changes, cloumn is still editable
grid.setDataSouce(grid.dataSouce); // No changes, cloumn is still editable
I'm desperately. Whats the correct way to porogrammaticly make a column non editable?
I would suggest two approaches:
Define an editor function for each field and when invoked decide on how to render it it if should be an input or a plain div / span. This might be a lot of work since you need to repeat this for each field that can be both editable and not editable depending on that information that you receive latter.
Whenever you receive the information about which fields are editable, create a new grid that contains the actual information about which fields are editable and which ones are not. You might opt for destroying the previous grid definition or just hide it and make the new one visible in the same place.
Unless there are just a few fields which might be editable or not, I would go with the second approach.
Related
I am trying to implement filtering in my grid.Panel component. The filtering works fine (date, string and numbers) but I can not uncheck the "Filters" checkbox by clicking on it. As far as I have seen in the Ext js documentation there is nothing that I should add extra to be able to uncheck the Filters checkbox (see image below)
When I click on the Filters checkbox, nothing happens, no error also. The only way to disable this particular "Wholesaler" filter is if I go to the text box and remove the entry. This of course would be just fine, but at the date filters, I also can not click the checkbox and thus can not remove the filter once applied (see image below) The only way to remove it is to refresh the page.
I am using Ext JS version 5.1.2, and here is the sample code:
{
dataIndex: 'Wholesaler',
text: 'Wholesaler',
filter: {
type: 'string'
},
}
And the Panel componenet itself:
Ext.apply(this, {
region: 'center',
api: new Dextop.api('sample'),
border: false,
plugins: 'gridfilters',
columns: sample.getController().getGridColumns(),
storeOptions: {
autoLoad: false
}
});
Any help is appreciated!
I am trying to create a multi checkbox filter on a column of the kendo grid with serversidefiltering set to true. In the multiselect-checkbox filter, I want to default the selection to some value. I am trying to achieve these 2 scenarios given below:
1) I would still want the multiSelect filter to show me all the values for that field and only have the default selections checked.
2) Also, have the data on the grid column filtered down to the checkbox checked in the multi-checkbox filter.
I have tried the following and I am mostly getting close to achieving either 1) or 2). But I am trying to get both of them working together.
Here's a link to the demo for 1)
With the above, I could get to only have the default checkbox checked, but the grid data on load does not show the filtered data, it shows everything.
For 2) I tried the following
Filter: [{
field: "ProductName", operator: "eq", value: "Chai"
}],
This above code filters the data on the grid correctly, but For the menu filter, the checkbox list is also narrowed down to contain only the list of filtered items sent by the server. (looking for a solution to narrow down the data in grid, but show all options in the checkbox filter).
Is there a way I could get both these requirements work together on a multi-checkbox filter with ServerSide filtering?
Any idea to resolve this issue is highly appreciated.
Thank you in advance!
When serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets. It means, that you will have to implement method at your server which will return list of items to be displayed in filter.
columns: [
{
field: "FirstName",
filterable: {
multi: true,
//when serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "FirstName"
}
}
}
}
},
},
Here is a working demo.
Here is a link to Telerik's demo.
I am using free jqgrid 4.14 and I need to have a custom image (some kind of mail icon) in my grid and when the image is clicked it should open a modal window having a form and which has the data of clicked row in the message field of form and also has other couple of field like sender mail id, receiver mail id and also a subject.
So, I was able to have a custom image in my grid. Now, we have onSelectRow property by which we can get the id of the clicked row and we have getRowData which will give the data of the columns.
So, I made changed onSelectRow a bit like this
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery(this).restoreRow(lastSel);
lastSel=id;
var rowId = $(this).getRowData(lastSel);
}
jQuery(this).editRow(id, true);
}
Now, this will give the data of each row when it is clicked. But how will I get same functionality when my custom image is clicked?
EDIT: I need something like this-
http://www.ok-soft-gmbh.com/jqGrid/Admin3.htm
But here I am not able to find the image like here it finding
There are many ways to implement the requirement. One from the easiest one I described in the answer. You can add the column with formatter: "actions"
{
name: "act", template: "actions", width: 25,
formatoptions: { editbutton: false, delbutton: false }
}
and the jqGrid option, which specify additional custom buttons
actionsNavOptions: {
mailicon: "fa-envelope-o",
custom: [
{
action: "mail",
position: "first",
onClick: function (options) {
alert("Mail for rowid=" + options.rowid);
}
}
]
}
See https://jsfiddle.net/OlegKi/3tuxg71z/
I have a jqgrid table that has a username and password column, and if I could add automatic selection of a cell's entire contents when the cell is clicked, that would be of great benefit to those who use the table for their work.
Here is what I have so far:
$("#theTable").jqGrid({
[...]
colNames:[[...],'Username', 'Password',[...],
colModel:[
[...]
{name: 'username', index: 'username', width: 110, sorttype: 'text', cellattr: function () {return 'class="selectcell"'}},
{name: 'password', index: 'password', width: 110, sorttype: 'text', cellattr: function () {return 'class="selectcell"'}},
[...]
],
});
Then later on...
$(".selectcell").click(function(){
this.select();
});
I took that $.click() from code that automatically selects an entire textbox whenever it is clicked on. It functions perfectly there, but it isn't working as is. How can I make this work?
It seems that you don't use any editing of the grid. You can add cellEdit: true in the situation. The option allowed to edit cells of columns which have editing: true property. Cell editing have one more important feature. It highlight the cell of all non-editable columns. Because all columns are not editable in your case then you will have the feature highlighting of cells just by adding cellEdit: true option.
If you do need to select the text in the cell then I would recommend you to read the old answer (see the demo) which demonstrates how to select the text inside of clicked cell on double-click.
I am using a ExtJs Grid with the CellEditing plugin. It works perfectly except that invalid values are lost when it fails the validation I imposed on it.
For example, if I have a editable textfield in the grid that doesn't allow values over 10 characters, and the user enters "olympicssucks" the validation will fail and a red box will appear around the textfield. When the user clicks out of the field the value "olympicssucks" will be lost.
I want the grid to still save the invalid data, and keep the red box around it.
Another (maybe more clear) example:
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/cell-editing.html
Try editing the first cellvalue: "Adder's-Tongue" and make it empty. Notice the red box and validation message. Now click out of the box. The failed validation will revert the cell back to its original value, Adder's-Tongue.
tl;dr: My question, restated, is that I want to keep the invalid value, and yet still have validation displaying a red box around it. I'm sure its possible, but how is it done?
What I've tried:
I've looked into Ext.Editor and it seems promising because it has a config property called revertInvalid that does exactly what I want. Unfortunately, it seems that the CellEditing plugin does not seem to use Ext.Editor. I've tried providing a Ext.Editor into the Editor field of the grid column, but that produced un-editable text.
I've tried placing revertInvalid everywhere I could but this was always a far-shot.
Code:
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var grid = {
xtype: 'grid', store: dataStore, plugins: [cellEditing],
columns: [
{
text: 'Items', dataIndex: 'items', flex: 1, sortable : false,
editor: {
xtype: 'textfield',
validator: function(value) { //custom validator to return false when value is empty and other conditions}
},
//...
],
tbar: [{
xtype: 'button', text: 'Add ' + type,
handler: function() {
dataStore.insert(0, {items: 'New ' + type});
cellEditing.startEditByPosition({row: 0, column: 0});
}
}]
}
This worked for me (Extjs 4.2):
Ext.override(Ext.Editor, { revertInvalid: false });
It very may well be that Sencha has not yet fully developed the revertInvalid field, and that its simple functionality does not yet work. To those looking for a workaround, you may have to mess with the CSS of the grid cell itself to custom-mark it as invalid.
see http://www.sencha.com/forum/showthread.php?271318-Ext.Editor-revertInvalid-false-what-is-the-expected-behavior&p=994118#post994118
to me it is a bug in ExtJs that you can fix by overriding the completeEdit function of Ext.editor