We Keep Coding

Ext JS Grid Filters in Header checkbox not working

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!

Multiple radio buttons in Kendo UI grid with inline and batch editing

I thought I would be doing something simple as Kendo UI already can do so much, alas it is not as simple as I thought. Radio buttons make it hard.
I'm trying to create a permission mask just as you can see here:
And the corresponding, almost working JSFiddle:
http://jsfiddle.net/oz0b7xcu/
Currently I have View, Edit and None as separate columns - I can imagine them being an enum.
I figured out how to use a template & editor per field as to display the boolean with radio buttons instead of "true"/"false".
My problems:
Currently the inline editor only reacts when I click next to the radio button. Only after activating it I can select it. After "leaving" the field, the value is not persisted. (Try it out in the JSFiddle)
How do I create the "Save changed permissions" button? I would need one event per changed permission and add it to some array
How would I make it work over several pages, persisting the current permission "change set"
How do I set the edited row as "dirty"/"changed"?
I think what I am trying to do is pretty clear:
I have a list of users with permissions
I want to be able to quickly edit all users (batch) and just select view/edit/none (exclusive)
Maybe have a visualization for changed rows (dirty)
When I'm done, I want to get a list of all changed permissions
PS: Maybe all of this would be easier with "virtual columns"? Have only one PermissionMask field and depending on its value virtual columns are filled. Possible? Maybe a better solution? I don't depend on any data source so I could define something different here...

If you do not have any other editable fields except radio buttons, I feel you don't need to make the grid editable and you can still make it work. I made some changes to the code in your fiddle. here is the code. (only code that is changed)
columns: [
{ field: "Name" }, {
field: "View",
width: "80px",
template: "<input type='radio' name='#: uid #' onclick='markDirty(this);' />"
}, {
field: "Edit",
width: "80px",
template: "<input type='radio' name='#: uid #' onclick='markDirty(this);' />"
}, {
field: "None",
width: "80px",
template: "<input type='radio' name='#: uid #' onclick='markDirty(this);'/>"
We can manually mark a record as dirty when selection is changed.
function markDirty(ctrl) {
$("#grid").data("kendoGrid").dataSource.getByUid(ctrl.name).dirty = true;
}
Finally you can get the data source from the grid on button click and perform any action required.
//this will have the data in an array
var data = $("#grid").data("kendoGrid").dataSource.data();
Hope this helps.

DGrid - Single Selection Mode while using Drag and Drop -> Results in multiple selections

I am trying to get a DGrid working using the following properties:
Drag and Drop
Single Selection
Unfortionatly, this doesn't work quite as easily as I was hoping. I am declaring my DGrid like this:
this._grid = new (declare([OnDemandGrid, DijitRegistry, Selection, DnDGrid]))({
store: this.store,
columns: [
{label: "ID", field:"id", sortable: false},
...
],
touchesToScroll: 2, // Required to enable d&d on mobile
dndSourceType: "grid-row",
getObjectDndType: function(item){
return [item.type ? item.type : this.dndSourceType];
},
selectionMode: "single"
}, this.gridDiv);
this._grid.startup();
For the most part this works well. DnD is working. Selection is mostly working. There is just some strange state on occasion. These are the cases:
Shift Select:
If I perform a shift select then I will get multiple items looking as if they are selected. They will have the following css classes attached to them:
.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }
When listening to the dgrid-select event, it reports the selected elements correctly.
Attempting to drag the selected elements also works correctly -> only one of them is moved.
Edit: I have found a solution to the Shift Select issue. It is posted as answer below. I still haven't been able to figure out the next issue.
Programmatic Deselect:
If I do the following:
Select an item
Programmaticlly deselect all: this._grid.clearSelection();
Programmatically select another item: this._grid.select(row);
Leaves two items looking selected.
The two items have different styles. The incorrect one has:
.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }
The correct one has:
.dgrid-selected
As before, when listening to the dgrid-select event, it reports the selected elements correctly.
It seems like this is the default dojo DnD moduel that is causing me issues. Looking at the doc it seems like I need to do something with the selector. Selector has a property called singular but I haven't been able to figure out how/where to set this.
Info on singular: https://dojotoolkit.org/reference-guide/1.9/dojo/dnd.html#id2

RE programmatic deselect, I think you've found a legit dgrid bug. I took a quick look at this and issued a pull request. See if that changeset resolves the issue for you.

It is possible to prevent Shift Select the multiple selection issue by using the dndParams field.
Instantiating the grid like this will solve the issue:
this._grid = new (declare([OnDemandGrid, DijitRegistry, Selection, DnDGrid]))({
store: this.store,
columns: [
{label: "ID", field:"id", sortable: false},
...
],
touchesToScroll: 2, // Required to enable d&d on mobile
dndSourceType: "grid-row",
getObjectDndType: function(item){
return [item.type ? item.type : this.dndSourceType];
},
selectionMode: "single",
dndParams:{singular: true} // ADDED THIS.
}, this.gridDiv);
this._grid.startup();
Still haven't figured out how to deal with programmatic changes.

Make a labelview editable on click of a button - Sproutcore

I'm very new to sproutcore. Although I know about the SC.InlineEditable mixin and isEditable field, the problem is when I click on the button to make a labelView editable. The label remains the same and I have to double-click on the label to type in text.
What I want is when I click on the edit button , the label should turn into a text field and should become the first responder, i.e the cursor should blink on the textfied.
I couldn't find any decent documentation(sproutcore didn't help much) or tutorial to do this. Links to such references would also be very helpful.

According to the showcase, you should be able to accomplish this as follows:
SC.LabelView.extend({
classNames: ['my-label-view'],
isEditable: true,
layout: { width: 300, height: 16, centerX: 0, centerY: 0 },
value: 'Double-click this label to edit inline.'
})
If this doesn't work, can you tell us what version of SC you are using, and what browser/version? It could be a potential bug.

To me it feels like enabling the labels is a different state in your application. In this case you would best tie the action of the button to the statechart.
So, you first create a controller with an isEditing property, which is false (by default).
myApp.myController = SC.Controller.create({
isEditing: false;
});
Now you create a function in the current state, which is called by the action on the button. This will result in going to an EDITING state, which sets the isEditing property to true in the enterState and to false in the exitState.
I don't know by heart how you can bind the editing state of the label view to this isEditing property, but assuming this is possible, you can in this way control the editing state of all the fields at the same time, and you will know for sure that all the fields will also be returned to normal when the editing is done.

how to show readonly fields in edit form in jqgrid or other way to show whole text from readonly column

jqGrid colModel contains read-only multi line column defined using properties below.
Content line lenghts are greater than column width, text is to long so that tooltio does not show its whole content. It is not possible to see whole content.
I'm looking for a way allow user to see whole column content.
For example, if edit form button is pressed, this column content should de displayeid in edit form as readonly textarea.
However, readonly columns does not appear in edit form.
How to allow user to see whole column content ?
colModel: [{
"name":"LoggedLongText",
"editable":false,"width":539,
"classes":"jqgrid-readonlycolumn","fixed":true,
"hidden":false,"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]}}
}]

Is the setting
editable: true, editoptions: { readonly: "readonly" }
probably what you need?
UPDATED: Free jqGrid supports more values for editable property starting with version 4.8. The wiki article described that editable can be function and it supports additionally three string values in case of using form editing: "hidden", "disabled" and "readonly".

To show readonly fields you might try using the "disabled:disabled" inside editoptions.
Yet another option is to use a custom element type that returns a span as below:
colModel: [
...
{name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
...
]
..
function myelem (value, options) {
var el = document.createElement("span");
$(el).val(value); // be sure to escape special characters as necessary.
return el;
}
function myvalue(elem, operation, value) {
// just reutrun null or empty string.
return "";
}
I prefer this over using "readonly:readonly", because the readonly option wraps an input control around the cell value, the input control still receives focus, which I think is misleading to the user. Using "disabled:disabled" keeps the input element from receiving better, which is slightly better, in terms of usability.
Using a span is much better. Interestingly, jqGrid sends even "unsuccessful" form controls to the server.
Hope this helps.
-- jqr

To show readonly fields on EditForm, you must try using the {readonly: true} property inside editoptions for a jqGrid column and will work.