I need to create dynamic filter that adds/removes rows dynamically.
It contains a drop-down box. Depending upon the drop-down box value selected, I create a dynamic <TD> that may have a text field or drop-down list.
If it's a text field, then I have to add date picker for that text field.
I have done this, except date picker for dynamically generated text field.
If you're creating 100 rows, the text fields' names should be same for all rows.
How to add datepicker for dynamically generated text field?
I had the same issue.
You would need to rebind the DatePicker to the dynamically added row.
The date picker associates a hadDatePicker Class to the dynamic row.
So you would need to remove that and rebind.
Something like this -
jQuery('.date-pick').removeClass('hasDatepicker').datepicker({
dateFormat: 'mm-dd-yy'
});
Regards,
Tina Agrawal
Actually i did use the solution provided by #Tina Agrawal But since now, when i select a date from the calendar, i click again and re-select. If i click on next month, it will go to 1900-01-01.
Well it was so strange...
After two hours of trial and errors and research.
i simply did:
$('.date-pick').live('click', function(){
$('.date-pick').datepicker();
});
Well it works.
I had the same issue and solved it in a different way. Although I am not very sure why is it working as I am very new to jquery. I wrote the following and it iterates the entire set of controls having the class "class_date" and rebinds the datepicker control to it.
$(".class_date").removeClass('hasDatepicker').datepicker();
Tirst add a class attribute as "date" to your input or div.
After dynamically add a text input to have to recall $('.date').datePicker() again to bind datePicker to new inputs or div.
I had a similar problem in that when dynamically adding new rows to my table the Date Picker fields in the new rows (any row added to the DOM dynamically) were all updating my initial rows Date Picker fields.
Removing the hasDatepicker class as suggested above was not enough to solve my issue, probably as I was using .clone() to create my dynamically added rows.
The solution when cloning rows was to remove the cloned input fields, re-create them, add them to my newly cloned table row and THEN re-initiate the Date Picker
For example:
//Remove exisiting cloned input fields
new_row.find("td.date input").remove();
//Create new input fields and append to table td
var date_tds = new_row.find("td.date");
$('<input />', {"name":"gStartDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[0]);
$('<input />', {"name":"gEndDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[1]);
//Re-initiate datepicker on the input fields
new_row.find("td.date input").datepicker({
dateFormat:"dd-mm-yy",
minDate:StartDate,
maxDate:EndDate
});
Use JQuery Live to access the dynamically created DOM.
http://api.jquery.com/live/
The you can attached the picker.
http://jqueryui.com/demos/datepicker/
one should use ".on" instead of live - see
http://api.jquery.com/on/
Related
What is the way of add just label into a form and modify its value with the entity atribute value related to the form. PRE_SET_DATA event is properly executed but I don't know how to set its value. Picture code and result:
Cheers!
There is no way to just add a label (without textArea) dynamically, at least in Symfony 2.8 . I worked it around using an non-mapped disabled text without label.
You have to ADD again the same element name into PRE_SET_DATA function and 'thanks God Symfony' it keeps the order.
Cheers everyone!!
I am learning to create reports using spotfire. Could you please help me to understand the feasibility.
Is it possible to change the filters based on the previous selection(filters has to be altered based on the previous section)
For Example:
I have a following table, with three columns.
Filter1 Filter2 Data
Name Name1 test1
Age Age1 test2
Location Location1 test3
I am planning to have filter options based on the column Filter1 and Filter2.
Is it possible to create a drop down with the values "Filter1" and "Filter2"?
Is it possible to modify the list of filter options, based on the first drop down selection.
For example. if "Filter1" is selected in the drop down. The list of filter options should be "Name","Age", "Location".
if "Filter2" is selected in the drop down. The list of filter options should be "Name1","Age1", "Location1".
Thank you
We can also create a cascading drop down list through the following steps.
Create a “property Control – Drop down list” myDropDownList
Select the “Unique Column Value ” to populate the drop down list (values).
Go to “Insert -> Calculated Column”
Use a simple conditional statement something like If([Value1] = ‘${myDropDownList}’, [Value 2], NULL)
Use the newly created column in the text area filter. This will be updated based on the previous section.
Thanks.
I have a solution utilizing JavaScript to effectively toggle between hidden DIVs. I'm not aware of a way to manipulate the filter object and which column it points to in the Text Area through the API. If someone does know a way I'd love to hear it!
Here is my solution with JS:
Set up your Text Area with a Drop Down for your selection as a column selector (with columns of interest chosen through the "Select Columns..." dialogue), a label displaying that selection (we will hide this, I realize it seems redundant), and 2 filters for your 2 columns.
Right click your text area and click Edit HMTL. Utilizing the HTML below, modify your HTML to match. You will want to have the 1st DIV as your drop down, the SPAN as your label which displays that drop down's property, and then the last 2 DIVS (LETTER and NUMBER in my case) as your two filters. Make sure the DIV id name matches your column name exactly.
<DIV><SpotfireControl id="8dc9d8974bde445cab4c97d38e7908d6" /></DIV>
<SPAN id=docProp style="DISPLAY: none"><SpotfireControl id="1311015997cd476384527d91cb10eb52" /></SPAN>
<DIV id=LETTER style="DISPLAY: none"><SpotfireControl id="760ae9ffd71a4f079b792fb5f70ac8b4" /></DIV>
<DIV id=NUMBER style="DISPLAY: none"><SpotfireControl id="488ef4b1289440d5be24b0dd8cfc3896" /></DIV>
Next we will implement the JS. To do so, click the +JS button in your Edit HTML. The JS itself is below. You'll want to change my inputs of LETTER and NUMBER in the first 2 getElementById references where we set them to display:none.
filter = function(){
input = $("#docProp").text().trim() //Take the text from our hidden label and trim it from any white space.
document.getElementById("LETTER").style.display = 'none'; //Reset DIV
document.getElementById("NUMBER").style.display = 'none'; //Reset DIV
document.getElementById(input).style.display = 'block'; //Set new display
}
//Run this function every 333ms or other length of time desired to update your filters.
setInterval(filter,333)
//Larger numbers mean slower response and better performance vs. faster response and worse performance. Tune as necessary.
Alternatively instead of scanning every X milliseconds (can cause some performance drag), you can make a JS button to run it manually. e.g. $("#divIdForButtonPlacement").button().bind('click',filter)
A few images of my setup for testing are shown below. Let me know if you have any questions regarding this.
I looked through the developer blogs and I can only find ways to create a custom global form button or to replace a field with custom code. I don't want to replace the field, I want to add a button beside a field.
Here's what I have in mind:
[Date Field][date_picker_button] [time field][time_is_now]
The button I want to add is the time_is_now, allowing the user to populate the time field with the current time.
I have tried updating custom/modules/Notes/metadata/quickcreatedefs.php with:
array (
'name' => 'billable_start_c',
'label' => 'LBL_BILLABLE_START',
'customCode' => '<button</button>',
)
But this replaces the input field with the custom code. I could just put in the stock code and then my custom code, but date fields use yui and a widget, so I'd prefer not to.
Is there anyway to do something like:
'customCode' => '{default} <button></button>',
so that the default code gets output and then the custom code?
You could create a new SugarField template, which will essentially allow you to create the markup for your field. If you named your SugarField TimeIsNow, you could create a field with that type (instead of text,int, date or whatever). You should take a look at some of the other SugarFields to see how they are formatted, but it's really just HTML. When the field is set to that type, it pulls in that HTML template. You can tie your JS to the onclick function. Sugar is very easy to customize, so I definitely wouldn't get in the habit of solving all your customization needs this way...It's another way to look at it though.
Don't use custom code if you can help it. Either copy over the tpl to custom/modules/[yourmodule]/tpls/[yourtemplate] and code the bitton in there or use an after_ui_frame hook and some js to insert you custom button into the DOM.
Since I can't figure out how to solve my problem presented here I'm thinking for the moment at a temporary solution.
I have a smartgwt DateItem widget:
DateItem date = new DateItem("Adate");
date.setWidth(120);
date.setWrapTitle(false);
date.setAttribute("useTextField", true);
date.setAttribute("inputFormat", "yyyy/MM/dd");
date.setAttribute("displayFormat", "toJapanShortDate");
Because the attribute useTextField is set to true we can see the text entry field. How can I make this text entry field to be uneditable.
Actually I want to have only the possibility to choose the date from calendar and not to change it manually.
Resolved - the issue exposed above - thanks to #RAS user.
TextItem textItem = new TextItem();
textItem.setAttribute("readOnly", true);
date.setAttribute("textFieldProperties", textItem);
Related link
But I have now another issue (resolved - see here):
The date chooser won't show the date on the text field but Today's date.
For example, enter 30/05/2009 on the text field, go to another field, then come back on click on the date chooser and the selected day will be Today's date instead on June 30th, 2009. Which is the reason for this? Can this be solved?
Also let's say I let to the user to opportunity to manually modify the date - can I put some **validators on it?** (still need an ideea on this)
Thank you.
date.setEnforceDate(true);
http://www.smartclient.com/smartgwt/javadoc/com/smartgwt/client/widgets/form/fields/DateItem.html#setEnforceDate%28java.lang.Boolean%29
You have a lot of different validators. Depending on the context it must be possible to validate cardinality, relation to other data items, datatype(not only date time values) and relations to other external records.
When using the Add or Edit form from the pager I'm wondering how a simple static label can be added in the form without it creating any additional columns in it's affect on colNames[]'s and colModel[]'s. For example I have a quite simple typical Add form which opens from the pager containing a few label's and form elements: Name, Email, Web Site, etc., and then the lower section of the form has a few drop down menus containing the number 1 through 10 with the idea being to ask the user to pick a value between 1 and 10 to put a value on the importance to them about the product or service which is listed beside it. Just above this section I want to add some text only to give a brief instruction asking the user to "Choose the importance of the following products and services using the scale: [1=Low interest --- 10=Very high interest]". I cannot figure out how to get a text label inserted in the form without having to define a column with a formoption{} etc which is not needed for just some descriptive text. I know about the "bottominfo: 'some text'" for adding text to the bottom of the form but I need to insert some text similar to that mid-way (or other positions) in the form without it affecting the tabular structure of the grid. Is this even possible? TIA.
You can modify Edit or Add forms inside of afterShowForm. The ids of the form fields are like "tr_Name". There consist from "tr_" prefix and the corresponding column name.
I modified the code example from my old answer so that in the Add dialod there exist an additional line with the bold text "Additional Information:". In the "Edit" dialog (like one want in the original question) the input field for one column is disabled. You can see the example live here. I hope that a working code example can say more as a lot of words.