Can any one help me in including datepicker inside sjg:gridColumn tag.I have included my code below.Whats the Edittype to be used so that a could able to get datepicker.
<sjg:gridColumn name="dateclosed" index="dateclosed"
title="Date Closed" sortable="false" editable="true"
edittype=" "/>
Rather than use edittype, you can use a nice jQuery datepicker for editing your sjg:gridColumn. This assumes you have jQuery in your project.
First, add the following to your JSP page, above the grid:
<script>
$(document).ready(function(){
$.struts2_jquery.require("js/base/jquery.ui.datepicker.min.js");
}
</script>
Next, change your sjg:gridColumn:
<sjg:gridColumn name="dateclosed" index="dateclosed" title="Date Closed"
sortable="false" hidden="false" hidedlg="false"
editable="true" align="center"
formatter="date" formatoptions="{newformat : 'm/d/Y', srcformat : 'Y/m/d'}"
width="100" editrules="{date: true, required:false}"
editoptions="{size:12, maxlength: 19, dataInit: function(elem){$(elem).datepicker({dateFormat:'mm/dd/yy'});}}" />
See also: http://jqueryui.com/datepicker/
Alternate implementation: https://code.google.com/p/struts2-jquery/wiki/SearchGrid#A_Grid_Column_with_Datepicker_in_the_search_dialog
Related
I'm trying to display a bottom navigation, in which the TabContent comes from components. Now, with the following code I can't get the tab content to show, and I don't get any errors.
PageContainer.vue:
<template>
<BottomNavigation selectedIndex="1" class="tab__container" #loaded="loaded">
<TabStrip>
<TabStripItem class="tab">
<Label :text="text.groups" />
</TabStripItem>
<TabStripItem class="tab">
<Label :text="text.mail" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<GroupsScreen />
</TabContentItem>
<TabContentItem>
<MailScreen />
</TabContentItem>
</BottomNavigation>
</template>
<script >
import GroupsScreen from './GroupsScreen';
import MailScreen from './MailScreen';
export default {
components: {
GroupsScreen,
MailScreen,
},
data() {
return {
text: {
groups: 'Groepen',
mail: 'Berichten',
},
}
},
}
</script>
GroupsScreen.vue:
<template>
<Frame #loaded="loaded">
<ActionBar :title="text.groups" />
<StackLayout class="page">
<Label v-if="groupsLoading" text="Loading"></Label>
</StackLayout>
</Frame>
</template>
Is this even possible, or am I trying to do something that should be done in another way?
The hierarchy is always,
Frame
Page
Content (Layouts, ScrollView etc.,)
A Frame can only host a Page, it can not directly host Content. You need Frame only if you want to navigate within that particular container.
So your primary issue was not wrapping your BottomNavigation with a Page element.
Updated Playground
I want to create a modal component from the parent and fill data in that modal in a listview
If the component was already created, I don't have a problem, but I want the component created in that parent page
template>
<Page class="page">
<ActionBar title="Modal Data" class="action-bar"></ActionBar>
<ScrollView>
<StackLayout class="m-20">
<Button text="Button" #tap="goToDetailPage" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
const Detail = {
template: `
<Page>
<ActionBar title="Asal Ikan" />
<StackLayout>
<ListView class="list-group" for="mylist in mylists" style="height:600px;">
<v-template>
<FlexboxLayout flexDirection="row" class="list-group-item">
<Label :text="mylist.name" style="width:100%;" #tap="closeModal" />
</FlexboxLayout>
</v-template>
</ListView>
</StackLayout>
</Page>
`
};
export default {
data() {
return {
mylists: [{
code: "SL",
name: "Sinjai"
},
{
code: "MK",
name: "Makasar"
}
]
};
},
methods: {
goToDetailPage() {
this.$showModal(Detail);
}
}
};
</script>
Data from my List is not showing.
here the playground link :
https://play.nativescript.org/?template=play-vue&id=WlzgRU&v=104
There are a number of things you may want to improve / correct in your code.
Detail is a standalone component, it won't have access to the data in your Master (HelloWorld) component. You should pass mylists in props if you like to access the same data.
A Page can only be hosted within a Frame and a valid Page can only have ActionBar. Since you haven't defined a Frame in your Detail component, it won't be valid.
With ListView use itemTap event instead of adding event listeners to individual component.
Updated Playground
I hope you can help me to solve my problem.
I am working on a Nativescript-Vue Application and I want to render this conditionally:
<Label if="isRendering" text="This is a text"></Label>
But this does not work.
I already tried it with <v-template if="..."></v-template> but this also does not work.
If i am not mistaken, in Vue.js it is possible to render conditionally with v-if and i am searching for a possibility to make it in Nativescript-Vue.
Thank you
It's the same like in Vue.js.
Instead of using if you should be using v-if.
Playground example
Example:
<Label v-if="isRendering" text="This is a text"></Label>
But if you want to use an if in a ListView it's different.
Example:
<ListView for="item in listOfItems" #itemTap="onItemTap">
<v-template>
<Label :text="item.text" />
</v-template>
<v-template if="$odd">
<!-- For items with an odd index, shows the label in red. -->
<Label :text="item.text" color="red" />
</v-template>
</ListView>
But more info about that in the docs
I'm trying to use font-awesome icon inside the TabView item. I am able to use this same code elsewhere in the page and it works fine. It just wont show any icon inside the tabview.
In my main.js:
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
'fa': './assets/css/font-awesome.css',
'ion': './ionicons.css'
};
TNSFontIcon.loadCss();
Vue.filter('fonticon', fonticon);
In App.vue:
<TabView class="tab-view" :selectedIndex="selectedIndex" androidTabsPosition="bottom">
<TabViewItem class="fa" :text="'fa-plane' | fonticon" >
<Label text="Content for Tab 1"/>
</TabViewItem>
<TabViewItem title="Tab 2">
<Label text="Content for Tab 2" #tap="pretextsTap()" />
</TabViewItem>
</TabView>
I'm using Nativescript Vue platform and couldn't find the example of using font-awesome icon inside the tabview item. In the first TabViewItem, I was trying to add fa-plane icon to see if I got it right. It didn't. I look forward to your tip.
Thanks.
Tab view items have a title property, not text.
Give :title="'fa-plane' | fonticon" a shot.
I have 2 radio buttons , i selected one to them , there is an ajax call when i select that , what i want that there should not be any ajax call when i click on the already selected radio button . How to implement this.
<label for="cooperativeAuthorisedRepresentativeType">#{msg['com.crimsonlogic.egov.rol.rnra.landsubdivision.applicantdetails.cooperative.cooperativeAuthorisedRepresentativeType']}</label>
<h:selectOneRadio id="applicantDetails_cooperative_cooperativeAuthorisedRepresentativeType" required="true"
value="#{landSubdivisionController.cooperativeDetails.repCode}" requiredMessage="#{cmn['rol.common.message.error.RADIO_REQUIRED']}" >
<f:selectItem itemLabel="#{msg['REPRWAND']}" itemValue="REPRWAND" />
<f:selectItem itemLabel="#{msg['REPFOR']}" itemValue="REPFOR" />
<f:validateRequired />
<a4j:ajax event="click" listener="#{landSubdivisionController.changeRepresentativeTypeForCooperative()}" render="cooperativeCitizenNationalId,cooperativeCitizenNationalIdForFranchisee,cooperativeCitizenSurname,cooperativeCitizenOtherNames,cooperativeCitizenDistrict,cooperativeCitizenSector,cooperativeCitizenCell,cooperativeCitizenVillage,cooperativeForeignerPassportNo,cooperativeForeignerSurname,cooperativeForeignerOtherNames,cooperativeForeignerCountry,cooperativeForeignerCity" />
</h:selectOneRadio>
<div class="col-md-4">
<h:message for="applicantDetails_cooperative_cooperativeAuthorisedRepresentativeType" styleClass="help-block"></h:message>
</div>
You should use change event instead of click event of javascript.
You can try writing like this:
<a4j:ajax event="change"