I have two fields pn(Autocolplete field) and SKU (Multifield).
My requirement is When pn value changes, the sku value should be auto populated on the bases of pn value selection.
My Dialog code looks like this:
<pn
granite:id="sample-pn"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete"
fieldLabel="PN"
name="pn"
required="{Boolean}false">
<datasource
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/projects/admin/datasource/pndatasource"/>
<options
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/list"/>
</pn>
<skus
granite:id="sample-sku"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click 'Add' to add a SKU"
fieldLabel="SKU"
required="{Boolean}false">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="skus">
<items jcr:primaryType="nt:unstructured">
<sku
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="SKU"
name="sku"/>
</items>
</field>
</skus>
And this is the touch UI listener:
registry.register("foundation.validation.validator", {
selector: "#sample-pn",
validate: function(el) {
var pn = $(el).find("input[name='pn']").val();
if(undefined != pn && "" != pn) {
$.ajax({
url: "/bin/sample/skudata.json?pn=" + pn,
success: function(data) {
$("#sample-sku").find("coral-multifield-item").remove();
$.each(data, function( index, value ) {
$("#sample-sku button[coral-multifield-add]").click(); // this will trigger the click event of Add button of multifield
// So, text field gets added (Which is what I want)
$("#sample-sku").find("input[name='skus/item"+index+"/sku']").val(value.sku);
//I was trying to populate the value of those text field. But these values are not getting populated,
//coz the render of the textfield occurs after the event is completed.
});
}
});
}
}
});
I need help in populating the values of this multifield.
Thanks in advance.
Related
I want to export the kendo grid data into excel. I am using kendo dropdownlist as a template for some columns.
When i export it exports but it not show the text value for those columns but rather shows value for that fields.
This may not be the "best" solution but it worked for me. Basically I created a function that loops through and processes the row with the dropdown, using a switch statement to set the text based on the value (the data that comes through unfortunately only has the value, rather than the object).
Here is the markup for my grid:
<div id="grid" data-role="grid"
data-sortable=" {mode: 'single' , allowunsort:true }"
data-toolbar="[{template: this.model.getToolbar}]"
data-excel="{ fileName: 'export.xlsx', allPages:'true' }"
data-excel-export="model.curateExcelData"
data-columns="#string.Format(#"[
{{ title:'{0}', field: 'Column1', width:80 }},
{{ title:'{1}', field: 'Column2', width:80 }},
{{ title:'{12}', field: 'DropDownColumn',template: kendo.template($('#dropdown-template').html()),'width':80, sortable: false }},
]", CommonResource.Column1, CommonResource.Column2, CommonResource.DropDownColumn)"
data-bind="source: items"
data-editable="inline">
</div>
And the template:
<script id="dropdown-template" type="text/x-kendo-template">
<input data-role="dropdownlist"
data-auto-bind="false"
data-value-primitive="true"
data-text-field="Text"
data-value-field="Value"
data-bind="value: dropDownValue, source: dropDownValues"
style="width:65px" />
</script>
And here is the function that updates the values for the export (in my case I had a dropdown that was "Days" and "Weeks", which was the 12th column):
curateExcelData: function (data) {
var sheet = data.workbook.sheets[0];
$.each(sheet.rows, function (index, row) {
if (row.type == "data") {
switch (row.cells[12].value) {
case "D":
row.cells[12].value = "Days";
break;
case "W":
row.cells[12].value = "Weeks";
default:
break;
}
}
});
},
I have downloaded Demos.nsf and try to learn select2 from http://www.bootstrap4xpages.com/bs4xp/demos.nsf/select2.xsp
Everything run well but I have found a problem select2 didn't trigger XPAGES server side event when return "No Matches found"
Here how to produce this problem :
I have input hidden and computed text that binding with document datasource
I have another button to partial update to that computed text
That input hidden used for select2 with scriptBlock
Run that xpages
Type name (e.g. patrick) and select that name
Click that button and computed text will display like selected name
Type keyword like "qqqqqqq" and select2 will results "No Matches Found"
Click that button again, and computed text will be "blank"
Redo number 6 dan 7 again, and computed text still be "blank" and didn't display "Patrick" name
How to solve this problem ?
Here my code :
<xp:inputHidden id="inputHidden1" value="#{document1.coba}"/>
<xp:scriptBlock id="scriptBlock4">
<xp:this.value><![CDATA[
x$( "#{id:inputHidden1}" ).select2({
placeholder: "Find someone",
minimumInputLength: 2,
quietMillis: 300,
width: '300px',
allowClear : true,
ajax: {
url: "namesDataStore.xsp",
dataType: 'json',
data: function (term, page) {
return {
q: term, // search term
page_limit: 10
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
return data;
}
},
initSelection: function(element, callback) {
//sets a default value (if a value was selected previously)
var id = $(element).val();
//if a value was selected: perform an Ajax call to retrieve the text label
if (id !== "") {
$.ajax(
"namesDataStore.xsp", {
data: {
id: id
},
dataType: "json"
}).done(function(data) { callback(data); });
}
}
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:text escape="true" id="computedField1"
value="#{document1.coba}">
</xp:text>
<xp:button value="Refresh"
id="button2" styleClass="btn btn-success">
<i class="glyphicon glyphicon-ok " />
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="computedField1">
</xp:eventHandler>
</xp:button>
I have created an Xpage with a form as the data source. It has 8 fields or so. One some of the fields I want to be able to set a default value (like today's date) but let the user change it.
I have an edit box bound to a date field on my form. If I put in a default value in the edit box control, it never appears unless I make the field read only.
I have tried adding the value in the before and after events.
Nothing works.
This has to be easy and I am overlooking something simple. Please help.
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = mm+'/'+dd+'/'+yyyy;
var doc:NotesDocument = timeEntry.getDocument();
//var thisDB:NotesDocument = session.getCurrentDatabase()
//var document:NotesDocument = thisD
if (doc.isNewNote()) {
//doc.getComponent("date1").setValue(today);
doc.replaceItemValue("date", today);
}
Here's an example of an edit box control bound to a date field with a default value:
<xp:inputText id="Date" value="#{document.Date}" defaultValue="#{javascript:#Today()}">
<xp:this.converter>
<xp:convertDateTime type="date" />
</xp:this.converter>
<xp:dateTimeHelper id="dateTimeHelper2" />
</xp:inputText>
Here my problem:
I have an input text and behind a date picker ui: and I would like to get the datepicker's value in razor:
Index.cshtml
<input id="datePickerCalendar" type= "text"/>
<script type="text/javascript">
$(document).ready(function () {
$('#datePickerCalendar').datepicker({
altFormat: "dd-mm-yy",
dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
monthNames: ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
changeMonth: true,
onSelect: function () {
/*('#datePickerCalendar').change(loadCalendar());*/
}
});
});
</script>
<table border="1" class="tableCalendar" id="calendar">
<caption> Veuillez sélectionner l'horaire souhaité </caption>
<th id="court"></th>
#foreach(var item in Model) {
foreach(var court in item.TennisCourts){
if (court.Outside == true)
{
<td id="court" class="court">Court n°#court.Number (Extérieur)</td>
}
else
{
<td id="court" class="court">Court n°#court.Number (Intérieur)</td>
}
}
}
#foreach (var item in Model)
{
var chooseDate = $('#datePickerCalendar').value; // here ! This instruction is not correct...
}
I'm Building a dynamic calendar that allow the user to make a reservation for a tennis court...
So, my questions are:
1)How to get the value from the datepicker in razor ?
2)How can I get the value every time when the user change the date ?
Thanks in advance
You need to post your value to a action method on the controller, surround the field with a form
#using (Html.BeginForm("Controller", "Action", FormMethod.Post))
{
}
Then change your field into a server side rendered one (So the model binder can capture the new value)
#Html.TextBoxFor(m => m.MyDate)
The action method needs to take the model as argument and it needs to have the DateTime property named MyDate
edit:
If you will be sending values from the server you need to be sure the client datepicker and the serer uses the same date format. This is a bit tricky, but I did this with the globalize jquery plugin, you have to choose if you want to hardcode the ui culture, or if the sever will use the client culture. This is done in web.config
Hardcoded
<globalization culture="se-SE" uiCulture="se-SE" enableClientBasedCulture="false" />
Client chooses
<globalization enableClientBasedCulture="true" />
edit2
Sorry for all my edits :D
A good way for sending server settings like datetime and such is to create a settings razor view and change its mime type to javascript, also be sure to have caching otherwise the client will load it every time
#{
Layout = null;
Response.Expires = 120;
Response.CacheControl = "public";
Response.ContentType = "text/javascript";
}
MyAppName = {};
MyAppName.settings = {
culture: "#Thread.CurrentThread.CurrentCulture.Name",
timeFormat: "#Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortTimePattern.ToLower()",
dateFormat: "#Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern.ToLower().Replace("yyyy", "yy")",
}
I'm trying to create a custom field type in SharePoint (WSS 3.0) that has custom properties. I have created my fldtypes*.xml file based on the SDK docs and this blog post and it seems to render fine and I can retrieve the custom property values inside my code. My problem is that after the initial field creation, if I go back to the list settings page and click on my newly added field, the form shows my custom properties with some value that I'm not providing it. For example, if my custom property's display name is "My Custom Prop" then the value in its textbox will be "My Custom Prop field value".
My question is this: how can I properly show the actual string values of my custom property types in these textboxes?
Here's my fldtypes*.xml file:
<?xml version="1.0" encoding="utf-8"?>
<FieldTypes>
<FieldType>
<Field Name="TypeName">MyCustomField</Field>
<Field Name="TypeDisplayName">My Custom Field</Field>
<Field Name="TypeShortDescription">MyCustomField</Field>
<Field Name="ParentType">Text</Field>
<Field Name="UserCreatable">TRUE</Field>
<Field Name="FieldTypeClass">MyCustomField.CustomFields.MyCustomField, MyCustomField, Version=1.0.0.0, Culture=neutral, PublicKeyToken=d772gbab82fe6996</Field>
<PropertySchema>
<Fields>
<Field Name="MyCustomProp" DisplayName="My Custom Prop" Type="Text" MaxLength="50" DisplaySize="30" />
</Fields>
</PropertySchema>
</FieldType>
</FieldTypes>
And here's the code for my field type class:
public class MyCustomField : SPFieldText
{
private string propval;
public MyCustomField(SPFieldCollection fields, string fieldName)
: base(fields, fieldName)
{
}
public MyCustomField(SPFieldCollection fields, string typeName, string displayName)
: base(fields, typeName, displayName)
{
}
public override void Update()
{
// I can see any updated value here
propval = GetCustomProperty("MyCustomProp") as string;
base.Update();
}
public override Type FieldValueType
{
get { return typeof (string); }
}
}
What can I do to see the correct custom property values in my "Change Column" page (FldEditEx.aspx) in my SharePoint app?
There is a well known issue with saving and retrieving custom properties on a custom field type. Here is a direct link to the work around.
btw, some of the comments on the post purport the same problem.