Hi all,
I have a hierarchical grid with editing mode and there're some datepicker column. I want with them:
- In display mode: Display in format "d MMM": I did, it's ok
- In Editing mode (user click to date cell):
+ Input is like as read-only (user cannot type)
+ Display in format "d MMM" as above
+ Open DatePicker dialog
+ Dont need show dropdown area in right (due to DatePicker dialog should be opened when click to cell)
I work this with mvc helper and cannot do as required. Anyone can help me?
Thanks,
Ngan
Dear Ngan Le Thi,
Thanks for using Ignite UI controls.
You may set those preferences in Updating Hierarchical Grid Feature. In Updating add Column Settings for desired column as follow snippet:
...
features: [{... columnSettings: [{ columnKey: 'OrderDate', // Desired column key editorType: 'datepicker', editorOptions: { readOnly: true, dateFormat: 'd MMM', button: 'none', dropDownOnReadOnly: true, dropDownTriggers: 'focus' }
... }]
Please feel free to contact me if you have any additional questions regarding this matter.
Best Regards,
Stanimir Todorov
Hi Stanimir,
I am using MVC helper, can you give me instructions in mvc helper?
Hello,
Would you send an application sample with that issue?
Stanimir
Sorry for reply late. My sample is in below. I used options as your guide and it's ok. But:
- How can I set minDate and maxDate for calendar. I did before with DateEditorOptions but when applied EditorOptions, it's cleared.
@{ const string opts = "readOnly: true,dateFormat: 'd MMM',button: 'none',dropDownOnReadOnly: true,dropDownTriggers: 'focus'";}
cs.ColumnSetting().ColumnKey("LOStartDate").EditorType(ColumnEditorType.DatePicker).DateEditorOptions(opt => opt.MinValue(Model.MinDate).MaxValue(Model.MaxDate)).EditorOptions(opts);
- Can I set minDate and maxDate again when user change data of StartDate/EndDate
- An issue in display value in edit textbox when open calendar (see attached image). This also happen with default datepicker in editing grid
http://www.mediafire.com/download/mmbqf7bc2mjqux1/FrameworkSample.rar
Hello Ngan Le Thi ,
The editor options will overwrite the settings for the DateEditorOptions. You can either set the DateEditorOptions or the EditorOptions.
To set the min and max value you can add the following settings in the current editor options you’re using: minValue: new Date(2004, 11, 21), maxValue: new Date()
For example:
@{
const string opts = "readOnly: true,dateFormat: 'd MMM',button: 'none',dropDownOnReadOnly: true,dropDownTriggers: 'focus', minValue: new Date(2004, 11, 21), maxValue: new Date()";
}
And then leave only the EditorOptions settings for the column setting:
cs.ColumnSetting().ColumnKey("LOStartDate").EditorType(ColumnEditorType.DatePicker).EditorOptions(opts);
You can find a list of all available options for the date picker here:
http://help.infragistics.com/jQuery/2014.1/ui.igdatepicker
You can also change the min and max value by setting it via the editor’s options:
$(".selector").igDatePicker("option", "minValue", new Date(1980, 6, 1));
You could for example use the EditCellStarted event and in it get the editor:
http://help.infragistics.com/jQuery/2014.1/ui.iggridupdating#events
And change the min or max value options.
The issue with the initial date not appearing when you enter edit mode seems to be related to the DataType setting:
DataType("System.DateTime")
Actually the data types the grid columns should be are the following:
string
number
bool
date
object
You can find a full list here:
http://help.infragistics.com/jQuery/2014.1/ui.iggrid#options
Under the columns section.
So you can replace DataType("System.DateTime") with DataType("date") and that should fix that issue.
Let me know if you have any additional question or concerns.
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.infragistics.com/support
Hi Maya,
Thanks for your reply. Yeah, I did somethings as you, it's work ok. Howerer, there're some issues:
- I change DataType("System.DateTime") to DataType("date") but the initial date still does not appear when entering edit mode
- After I implement changing setting of calendar in even iggridupdatingeditcellstarted, calendar is ok but now:
+ I have to double-click to open calendar => I want just click instead of double click
+ When ended editing date, the grid doesn't recognize it's update action and there's no transaction to save. You can see that, value of date is displayed incorrect in 2 modes: display and editing.
Thank,
This is changed code
I am also encountering this issue. Is there a work around? Can I also access the development tracking system for this issue?
Regards,
Arthur
Where can I see Development Issue?
ngan
Hello Ngan ,
I’ve tested this on my side and encountered the same behavior with the read only date picker.
I have logged this behavior in our internal tracking system with a Development ID of 171337.
I’ve also opened a private case for you with number: CAS-135994-G5T9S4 so that you may track the progress of the development issue.
You can view the status of the development issue connected to this case by selecting the "Development Issues" tab when viewing this case on the web site.
Please let me know if you need more information.
Thanks for your code. It's so good. But there's a issue. I test in Ipad mode, when click date column, the calendar show and disappear soon, cannot select a date.
Can you help me?
Thank you for the code.
The following code that you use on the editcellstarted event:
$(editor).igDatePicker({
readOnly: true,
dateDisplayFormat: 'd MMM',
button: 'none',
dropDownOnReadOnly: true,
dropDownTriggers: 'focus',
minValue: minDate,
maxValue: maxDate
});
With actually re-create the date picker.
It will basically re-instantiate it when you enter edit mode. The newly instantiated editor will not automatically set the selected value to the cell.
Due to this the editor will not work as expected.
You can instead change the related options of the editor directly. For example:
function setupCalendar(colKey, editor) {
//do somethings...
var minDate = new Date(2014, 3, 10);
var maxDate = new Date(2014, 5, 2);
$(editor).igEditor("option", "minValue", minDate);
$(editor).igEditor("option", "maxValue", maxDate);
I’m attaching the modified sample for your reference.
I’ve removed the dlls from the Bin folder due to their size.
Please refer to the attached sample and let me know if you encounter any issue with it or if you have any questions.