ExtJS 4.1 - Disappearing selection when editing cell (ComboBox editor) - javascript

I have GridPanel with 2 columns :
Type : string
Details : combo
I added CheckBox selection model and I have a little problem.
When I select couple rows and want to edit Details column in some of the selected row or even not-selected, selection disappears. Only edited row remain selected.
I can't find any solution for this. Can anyone help me ?
JSFiddle : http://jsfiddle.net/papcio28/fkJT3/6/

Your problem is that the editing model and checkbox selection model and not compatible. The technical reason for this is that the checkbox model uses the rowselection model on the grid and grideditor uses cellselection model on the grid. I don't think that Extjs is compatible with your requirements here since the cell selection model is necessary for the grid to know where to put an editor and row selection model is necessary for you to visually see the selection when using checkbox selection model. In your example it sounds like it choses the row selection model, which means it selects the row when you start editing because the row has to be selected for it to know where to the put the editor.
My suggestion for you is to use checkcolumn plugin and fake the rows being selected by using a renderer on every column that changes the background to the selected color when the value for your checkcolumn is true, this way it will look like a row selection model, but not actually be one.

Related

Dependable dropdown in inline row editing in 2 ag grid cell

I started implementing ag grid in angular. Everything is good in listing. But for inline full row editing I am facing 2 issues.
I have 2 cells having dropdown. I am using custom cell editor component for each dropdown cell. now I want that If I change the value of dropdown in first cell then it should change the dropdown data in second cell.
I have an action column. having edit button. So When I click on edit, I hide the edit button and show save and cancel button and call this function. It make all columns editable.
this.gridApi.startEditingCell()
But issue is even if I click any row below current editing row then my editable row become non editable and my action column still show save and cancel. Now I do not know how to change the cell renderer of a column when row become non editable or how to prevent this action
I will suggest you to use cellRenderer with editable: true inside cellRendererParams .
This will resolve the issue of becoming previous row non-editable while clicking on another row or outside the grid as in this state all of grid row's will be behave as editable.
And to manage your action items i think it's better to manage them by comparing the previous rowData and updated rowData.
If you will use the cellEditor with cellEditorParams then the issue of non-editable row will come in the picture as in this case you can make only single row editable at a point of time.
Please let me know if i can help you further in this .
Thank you.

Kendo UI inline editing with dynamically change editor

I have two columns in this demo
Setting Type (which has drop-down list)
Editor (it contains the value of column)
I want to change the the Editor column when drop-down list value is changed (from Setting Type column). Example, if a user selects date from drop-down list, the Editor column field should change to date picker.
Can anyone help me to solve this problem? I've been stuck with this for a week. Appreciate your help. Here's a demo: DEMO IN DOJO
One option is to switch to incell edit mode (https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable) so that when the editor for the settingDefaultValue is created, the value of settingType is set.
The second option is to bind to the change event of the typeEditor and re-create the editor for settingDefaultValue. Currently, I don't think the grid.refresh() will even be fired, since the grid has a row open for edition. In the typeEditor change event, e.sender will give you the kendoDropDownList, and something like e.sender.element.closest("tr").find("td:nth-child(2)") will give you the container to put the editor in.
One more remark: use either data-bind="value:YourFieldHere", or a change handler with options.model.set("YourFieldHere", this.value()), but you don't need to do both - setting the YourFieldHere is literally what the value binding does.

calendar as a popup in ag-grid cell

I am using ag-grid to display a list of columns. One of the columns contains the date section.
User should be able to edit the row and use calendar to select a particular date. Once a date is selected, it will get updated in the cell.
Any idea how to make it achievable ?
As per Ag-grid, we have to use cellEditor rather than cellRenderer to edit a cell and show calendar at every cell for selection of a date
https://www.ag-grid.com/javascript-grid-cell-editing/index.php
They have given few examples of how we can use Celleditor. Can someone please let me know how to use calendar for each cells of the 'date' column.
Got the following answer from ag-grid team
editing of dates is not provided out of the box. you will need to create your own cell editor for dates.
details on how to do cell editors is here:
https://www.ag-grid.com/javascript-grid-.../index.php
I use bootstrap, and this has property type="date". I have one list "ListDataSource", this has one file call celDate and contains this html:
When i send this list to api.setRowData(ListDataSource), the grid create the date input.
See you.

select row only when checkbox is clicked ExtjS 4

In an ExtJS 4.1 grid that uses CheckboxModel as a selection model, when you click on an entire row, that row is selected (and the corresponding checkbox is checked). Is there a way that I can prevent that default behaviour from happening and permit row selection only when the checkbox for a corresponding row is clicked (as opposed to when clicking the entire row)?
Again I'm using ExtJS version 4.1
Thanks for any help
Note: My grid also has the CellEditing plugin attached to it. I don't want the row to be selected when the CellEditing plugin gets activated when I click on a cell.
Try the checkOnly property on your CheckBoxModel:
var sm = new Ext.selection.CheckboxModel({
checkOnly: true
});
From the documentation:
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.selection.CheckboxModel-cfg-checkOnly
checkOnly : Boolean
True if rows can only be selected by clicking on the checkbox column.
Defaults to: false
Please see my fiddle here for a working example: https://fiddle.sencha.com/#fiddle/vue
Update
To change the CheckBoxModel checkOnly mode after the grid has been rendered:
grid.getSelectionModel().checkOnly = true;

Ext JS 4.0 GridPanel CellEditing plugin breaks when multiple columns inserted

I am trying to find the proper way to dynamically add/remove columns in a GridPanel that uses CellEditing plugin in Ext JS 4.0
I tried to add/remove columns dynamically in a GridPanel, using the HeaderContainer add(), insert(), remove() methods
The problem is that CellEditing plugin stops working correctly when I try to add or remove more than one column:
when existing cell in edit mode the text and cursor is not visible
first newly added column is not editable at all
second added column is editable
Steps to reproduce:
start the page
select cell in the column to insert column position before which to add new column
click add column button and type Name1 in dialog press ok
repeat steps 2-3 Using Name2 as column name
try to edit text in existing Company column and in column Name1 and Name2
You can find the full source code and example here:
http://jsbin.com/otorix/edit#source / http://jsbin.com/otorix/edit#preview
Can you reproduce this behavior?
Can you confirm this as bug?
Or what am I doing wrong?
I will be grateful for any help you can provide
you were right, there was a bug, but apparently it was induced by the way you reconfigured your grid, I added some modifications to your code ( just for the add column) i guess the remove should be fairly easy, so my corrections:
the memory data for the store rangeData was an array , while the reader was expecting an Object with an array inside an items attribute (this didn't seem to cause any errors but it's much clearer this way)
The column reconfigure was the main issue, i removed the part where you create a new column and just write the config for the new column, after that added the new column at the end of your column array, or somewhere in the middle using splice. The reconfigure function on the grid offers the posibility to reconfigure the store and the columns so is safer then adding the newly created column in the header container.
you have the modified code here http://jsbin.com/otorix/17/edit

Categories