calendar as a popup in ag-grid cell - javascript

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.

Related

How to add a textField to a specific row inside a table onclick of a button using reactjs & material ui

I want to add multiple textfield on to a specific row inside a table whenever the specific row add button is clicked, currently I am able to add text field onclick of add button but whenever the add button is clicked the textfield is getting added in every row of the table. Also the add icon needs to be next to the last text field but currently I could only achieve it having it on the 1st text field. Please someone help me out here. Image of what i have achieved so far.
As you can see I'm trying to add textfields on 1st row ,but it is automatically adding textfields in every row of table.
Working codesandbox:
https://codesandbox.io/s/broken-dream-7nncc?file=/src/App.js
There are a few ways to do it. A quick way is to (as Muhammad said) handle the button click for each row.
Meaning that you need to pass to the addCustomFile method the row Id and store this in your array.
Then when you map the customRow array in your main TableBody make sure to add the two custom columns only if there is a match between the customRow.rowID and the row ID you are currently rendering.
I`ve modified your sandbox https://codesandbox.io/s/infallible-resonance-qn64l?file=/src/App.js:1807-1820
you have to handle button click for each row. right now just one state so therefore it is showing in each cell
Maybe give this a try
https://www.w3schools.com/code/tryit.asp?filename=GQP3C100TJZH
hopefully it solves what you are looking for, if not please provide me with a bit more detailed issue of what exactly you want
This at the moment just works for one row and maybe for two rows you can try it by adding a it is not exactly a text field area but it should be a similar fix.

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.

sapui5 sap.ui.unified.Calendar How can we remove the SpecialDate

I have a small requirement in sap.ui.unified.Calendar, I want to remove the selected Special dates from Calendar. I'm trying with multiple options but still, I'm not able to achieve this.
On selection of a particular row, I'm going to call an OData Service and displaying the special dates which got highlighted in the Calendar.
Here my requirement is like if I select the 2 or more records in the table I should not display the special dates and the selected dates should get removed and the calendar should display the dates without any selections
I'm trying with removeStyleClass properties but it is not working. Here is my code.
if(sap.ui.getCore().roomsArr.length > 1){
MessageToast.show("Calendar Dates View will not get displayed for multiple record selections");
var oCal1 = that.getView().byId("myCalendar");
oCal1.removeStyleClass("sapUiCalItemType01");
}
Here i guess like, if i get the selected row Id's then i can remove the style class that is getting violet Background. But im getting dynamic date values so im not able to achieve this. Can someone help me to fix the issue?
Thank you in advance

Knockout with Jquery UI datepicker date display

Please see this link for details http://jsfiddle.net/pakpatel/5p6Uz/4/
Can we do the range in Datepicker, If first date choose [ 10/12/2012 ] then second date shouldn't be before 10/12/2012, Customer can select date after ex.[10/13/2012] in datepicker.
Could anyone explain me how to implement. Thanks in advance.
By using the previous row's data as the new min, it makes it challenging.
Working demo is at http://jsfiddle.net/photo_tom/5p6Uz/24/
There were two things that were required.
Added a computed observable to pass the previous row's choosedate value to the current row.
Added a new minDate binding to set the mindate option on the date picker.
This is not a completed fiddle. It doesn't properly handle adds or deletes. This is because the ko.computables need to be rebuilt.
EDIT:
Updated to handle add / delete methods. Interesting problem, trying to transfer information between two different rows in the table. Good challenge.
Soution at http://jsfiddle.net/5p6Uz/34/.

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

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.

Categories