I have ext:FileUploadField on the page. After file upload I need to show a link to this file.
I dynamically create a LinkButton, add it on the Panel1, and I can't see the the LinkButton! I dunno why!
<ext:Panel ID="Panel1" runat="server">
<Content>
<ext:FileUploadField ID="FileUploadField1" runat="server" EmptyText="Choose a file" FieldLabel="File" Icon="ImageAdd" />
</Content>
<Buttons>
<ext:Button ID="SaveButton2" runat="server" Text="Upload">
<DirectEvents>
<Click OnEvent="UploadClick"></Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:Panel>
protected void UploadClick(object sender, DirectEventArgs e)
{
if (this.FileUploadField1.HasFile)
{
var attachment = new Attachment { ............ };
if (UploadAttachment(attachment))
{
X.Msg.Show( ...... );
var linkButton = new LinkButton();
linkButton.ID = "fdsfdsfds";
linkButton.Text = attachment.Name;
linkButton.NavigateUrl = "#";
linkButton.Render();
Panel1.Add(linkButton);
// Panel1.Render(true);
Panel1.DoLayout(true,true);
}
else
{
//................
}
}
else
{
//................
}
}
I am guessing you need to add it to the buttons list of the Panel not to the panel itself. You may also have a layout issue if you have fit layout and adding a second item, that wont work.
Try to use this code:
X.Msg.Show( ...... );
var linkButton = new LinkButton();
linkButton.ID = "fdsfdsfds";
linkButton.Text = attachment.Name;
linkButton.NavigateUrl = "#";
linkButton.Render(Panel1, RenderMode.AddTo);
This will add link button directly to Panel1
Related
Is there option to insert raw html code to quill?
quill.insertText();
quill.clipboard.dangerouslyPasteHTML()
both are parsed by matcher but I need to paste exactly formatted html code for an email footer.
If the footer content is meant to be static and un-editable, you can do this by extending the BlockEmbed blot then adding a button for your new format in the toolbar. There are 2 different ways to handle what HTML get's entered into the new format.
1. Let the user enter the HTML to embed:
// Import the BlockEmbed blot.
var BlockEmbed = Quill.import('blots/block/embed');
// Create a new format based off the BlockEmbed.
class Footer extends BlockEmbed {
// Handle the creation of the new Footer format.
// The value will be the HTML that is embedded.
// By default, the toolbar will show a prompt window to get the value.
static create(value) {
// Create the node using the BlockEmbed's create method.
var node = super.create(value);
// Set the srcdoc attribute to equal the value which will be your html.
node.setAttribute('srcdoc', value);
// Add a few other iframe fixes.
node.setAttribute('frameborder', '0');
node.setAttribute('allowfullscreen', true);
node.setAttribute('width', '100%');
return node;
}
// return the srcdoc attribute to represent the Footer's value in quill.
static value(node) {
return node.getAttribute('srcdoc');
}
}
// Give our new Footer format a name to use in the toolbar.
Footer.blotName = 'footer';
// Give it a class name to edit the css.
Footer.className = 'ql-footer';
// Give it a tagName of iframe to tell quill what kind of element to create.
Footer.tagName = 'iframe';
// Lastly, register the new Footer format so we can use it in our editor.
Quill.register(Footer, true);
var quill = new Quill('#editor-container', {
modules: {
toolbar: {
container: ['footer'] // Toolbar with just our footer tool (of course you can add all you want).
}
},
theme: 'snow'
});
.ql-toolbar .ql-footer:before {
content: 'footer';
}
.ql-editor .ql-footer {
background: #f7f7f7;
}
<link href="//cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"/>
<div id="editor-container">
<h1>Test Content</h1>
<p>Enter a footer</p>
</div>
<script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script>
2. Use specific HTML
// Import the BlockEmbed blot.
var BlockEmbed = Quill.import('blots/block/embed');
// Create a new format based off the BlockEmbed.
class Footer extends BlockEmbed {
// Handle the creation of the new Footer format.
// The value will be the HTML that is embedded.
// This time the value is passed from our custom handler.
static create(value) {
// Create the node using the BlockEmbed's create method.
var node = super.create(value);
// Set the srcdoc attribute to equal the value which will be your html.
node.setAttribute('srcdoc', value);
// Add a few other iframe fixes.
node.setAttribute('frameborder', '0');
node.setAttribute('allowfullscreen', true);
node.setAttribute('width', '100%');
return node;
}
// return the srcdoc attribute to represent the Footer's value in quill.
static value(node) {
return node.getAttribute('srcdoc');
}
}
// Give our new Footer format a name to use in the toolbar.
Footer.blotName = 'footer';
// Give it a class name to edit the css.
Footer.className = 'ql-footer';
// Give it a tagName of iframe to tell quill what kind of element to create.
Footer.tagName = 'iframe';
// Register the new Footer format so we can use it in our editor.
Quill.register(Footer, true);
// Specify the HTML that will be embedded.
var footerHTML = '<h1>Footer</h1>'
+ '<p>This is our new footer</p>';
// Create the footer handler.
var footerHandler = function() {
// Get the cursor location to know where footer will be added.
var index = this.quill.getSelection(true).index;
// Insert the footer with the footerHTML.
this.quill.insertEmbed(index, 'footer', footerHTML);
};
// Import the Toolbar module so we can add a custom handler to our footer button.
var Toolbar = Quill.import('modules/toolbar');
// Add our custom footer handler to the footer button.
Toolbar.DEFAULTS.handlers['footer'] = footerHandler;
var quill = new Quill('#editor-container', {
modules: {
toolbar: {
container: ['footer'] // Toolbar with just our footer tool (of course you can add all you want).
}
},
theme: 'snow'
});
.ql-toolbar .ql-footer:before {
content: 'footer';
}
.ql-editor .ql-footer {
background: #f7f7f7;
}
<link href="//cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"/>
<div id="editor-container">
<h1>Test Content</h1>
<p>Enter a footer</p>
</div>
<script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script>
I have list of check boxes inside rich:dataTable and I want to check all the boxes at once with a single check box from header column.
<rich:column id="includeInWHMapping" >
<f:facet name="header">
<h:selectBooleanCheckbox value="#{checkallbox.selectAll}">
<f:ajax actionListener="#{checkallbox.selectAllBox}" render="selectedForWHProcess" />
</h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox id="selectedForWHProcess" value="#{checkallbox.checked[data]}">
<f:ajax actionListener="#{checkallbox.selectAllRows}"/>
</h:selectBooleanCheckbox></rich:column>
Code in checkallbox Bean:
private Map<StandardStructure, Boolean> checked = new HashMap<StandardStructure, Boolean>();
private boolean selectAll;
public boolean isSelectAll() {
return selectAll;
}
public void setSelectAll(boolean selectAll) {
this.selectAll = selectAll;
}
public Map<StandardStructure, Boolean> getChecked() {
return checked;
}
public void setChecked(Map<StandardStructure, Boolean> checked) {
this.checked = checked;
}
public void selectAllBox(ValueChangeEvent e){
boolean newSelectAll = (Boolean) e.getNewValue();
Iterator<StandardStructure> keys = checked.keySet().iterator();
while(keys.hasNext()){
StandardStructure ss = keys.next();
checked.put(ss, newSelectAll);
}
}
When I check the h:selectBooleanCheckBox of header column nothing happens. What am I missing here? Should I have to implement Map for "selectAll" property too?
Thanks.
First of all. f:ajax doesn't have actionListener, it has a listener. Read the docs here. Second thing, you can use valueChangeListener on h:selectBooleanCheckbox and only there. Third, listener inside rows boxes is wrong. Basically, it looks like you need to read this topic.
Now, here is the working example:
<h:form>
<rich:dataTable value="#{checkallbox.allValues}" var="data" id="dataTable">
<rich:column>
<f:facet name="header">
<h:selectBooleanCheckbox value="#{checkallbox.selectAll}"
valueChangeListener="#{checkallbox.selectAllBox}">
<f:ajax render="dataTable" />
</h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox value="#{checkallbox.checked[data]}">
<f:ajax />
</h:selectBooleanCheckbox>
</rich:column>
<!-- other columns -->
</rich:dataTable>
</h:form>
Other possible problems with your code (since you've shared just a part).
The data table needs to be in form, since you're executing ajax inside.
Your keys in map are objects. You have to make sure that equals method is good. In 95% of case the default is not, especially if they are #Entity.
You have to make sure that the map is populated with false at the beginning. I use #PostConstruct:
#PostConstruct
protected void performPostConstructAction() {
for (StandardStructure s : getAllValues()) {
checked.put(s, false);
}
}
Thanks Emil! I solved it.
public void selectAllBox(){
if(!selectAll){
for(StandardStructure item : ssTable.getDto()){
checked.put(item, true);
}
}else{
for(StandardStructure item : ssTable.getDto()){
checked.put(item, false);
}
}
}
Working on DNN 7 , I have a grid where I display somes users infos.
I would like to set an "edit action", to edit the user, like into admin panel.
So I choose to make a modale into the same page.
<rad:GridTemplateColumn HeaderStyle-Width="0" ItemStyle-HorizontalAlign="Center" AllowFiltering="False">
<ItemTemplate>
<a href="#" data-id="<%#((CustomerViewModel)Container.DataItem).UserID%>" class="e">
<img src='<%=ResolveUrl("~/Icons/Sigma/Edit_16x16_Standard.png")%>' title='Edit user' />
</a>
</ItemTemplate>
</rad:GridTemplateColumn>
// edit user infos
$('.e').click(function () {
var url = "<%= GetEditUrlUser() %>".replace(new RegExp("KEYFIELD", "g"), $(this).attr("data-id"));
//alert(url);
dnnModal.show(url, true, 550, 950, false, '');
return false;
});
And here my cs function
public string GetEditUrlUser()
{
// I need to show "dnndev.me/en-us/Admin/User-Accounts/ctl/Edit/mid/"+ModuleId+"/UserId/KEYFIELD/filter/All/pagesize/10/currentpage/0?popUp=true ";
var url = Globals.NavigateURL("393", "Edit", "mid=" + ModuleId, "UserID=KEYFIELD", "filter/All/pagesize/10/currentpage/0", "popUp=true");
return url;
}
But that's not good, since Globals.NavigateURL() return me the page where I am.
I have also took a look about ResolveUrl() function, but didn't succeed to do something well.
So if someone can help me, or give me an example / tips, it would be great.
Thanx
EDIT : It working with this code, but it doesn't seems optimised and really great
public string GetEditUrlUser()
{
var url = Globals.NavigateURL("Edit", "mid","393","UserID","KEYFIELD", "filter/All/pagesize/10/currentpage/0", "popUp=true");
return url;
}
EDIT 2 : To make it more efficient, I got this actually. But this isn't working, I got a blank modale.
But this way look like really better, since it will search itself for admin module
public string GetEditUrlUser()
{
// dnndev.me/en-us/Admin/User-Accounts/ctl/Edit/mid/"+ModuleId+"/UserId/KEYFIELD/filter/All/pagesize/10/currentpage/0?popUp=true
var moduleController = new ModuleController();
var adminUserModule = moduleController.GetModuleByDefinition(PortalId, "User Accounts");
var url = EditUrl(adminUserModule.TabID, "Edit", false, "mid="+adminUserModule.ModuleID, "userId=KEYFIELD");
return url;
}
Okay, I think, finally, I got it.
The ASCX code would be
<rad:GridTemplateColumn HeaderStyle-Width="0" ItemStyle-HorizontalAlign="Center" AllowFiltering="False">
<ItemTemplate>
<a href="#" data-id="<%#((CustomerViewModel)Container.DataItem).UserID%>" class="e">
<img src='<%=ResolveUrl("~/Icons/Sigma/Edit_16x16_Standard.png")%>' title='Edit user' />
</a>
</ItemTemplate>
</rad:GridTemplateColumn>
With somes Javascript Function for self-update without reload the page.
function refreshGrid() {
// grdCustomers should be the ID of your grid
$find("<%= grdCustomers.ClientID %>").get_masterTableView().rebind();
}
// edit user infos
$('.e').click(function () {
var url = "<%= GetEditUrlUser() %>".replace(new RegExp("KEYFIELD", "g"), $(this).attr("data-id"));
dnnModal.show(url,/*showReturn*/true, 550, 950, true, 'javascript:parent.window.refreshGrid()');
return false;
});
And into the CS file, it should be like.
public string GetEditUrlUser()
{
var moduleController = new ModuleController();
var adminUserModule = moduleController.GetModuleByDefinition(PortalId, "User Accounts");
var url = Globals.NavigateURL(adminUserModule.TabID, "Edit", "mid=" + adminUserModule.ModuleID, "userId=KEYFIELD", "popUp=true");
return url;
}
And it work fine.
I hope it could help someone.
I have created a function that would be able to place the array contents into a listview, Here is my progress so far.
<div id="MainPage" data-role="page" >
<div data-role="content">
RENAME
</div>
</div>
<div id="ViewPage" data-role="page" >
<div data-role="content">
<ul id="viewlist" data-role="listview" data-filter="true" data-filter-placeholder="Sample Contents" data-inset="true">
<!-- array contents goes here -->
</ul>
</div>
</div>
<script>
var sampleContent = new Array( );
displayArray( )
{
for(var scan=0; scan<sampleContent.length; detect++)
{
$('#viewlist').append('<li>' + sampleContent[scan] + '</li>');
}
}
</script>
My code works during the first press of the button but when i pressed it the second time, the list view becomes messed up.
Any help or advice will be glady accepted thanks in advance.
edited, i have figured out how to do it but I am having problems during the second press of the button.
First of i don't want to be rude but i think you should start first to read some basics about android.
Like:
Android Activities , life cycle of activities
Layout in Android (how to add button on an activity then respond to a click etc) , different existing Layout in android and android widget (like the listView for example)
of course there are a lot more to read but it s a good way to start.
However i will provide you codes that will do what you are asking for and i will try to explain as much as i can
First of all you need to create the other activity and inside the layout of that activity insert a listview
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_gravity="center_horizontal" />
</LinearLayout>
then the java code of the other activity will look like this
public class MainActivity2 extends Activity {
//create the array adapter that will input your array and convert it into a list of view
ArrayAdapter<String> arrayAdapter;
String[] list;
ListView listView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
listView = (ListView)findViewById(R.id.listView);
// get the array from ressource and insert them on an array
list = getResources().getStringArray(R.array.listArray);
// then create the arrayadpater with input your array of string if you dont get //anything here just read android documentation about arrayAdapter
arrayAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,list );
//then set the adapter to your listView
listView.setAdapter(arrayAdapter);
}
}
res xml file
<resources>
<string-array name="listArray">
<item>Apple</item>
<item>Banana</item>
<item>Cherry</item>
<item>Cranberry</item>
<item>Grape</item>
<item>Grape</item>
</string-array>
</resources
>
Hope it will help
Just add .listview('refresh') after you have added all items.
$('#viewlist').listview('refresh');
If you want to empty the list each time and refill it, call .empty() before the for loop:
$('#viewlist').empty();
To use better jquery mobile coding, structure your code like this:
Take the onclick out of the anchor tag and add an id:
<a id="viewPageBtn" href="#ViewPage" data-role="button" >RENAME</a>
In your script tag, handle pagecreate on the main page, and within it handle the click event of the anchor:
$(document).on("pagecreate", "#MainPage", function(){
var sampleContent = ["item 1", "item 2", "item 3"];
$("#viewPageBtn").on("click", function(){
$('#viewlist').empty();
for(var scan=0; scan < sampleContent.length; scan++)
{
$('#viewlist').append('<li>' + sampleContent[scan] + '</li>').listview('refresh');
}
$('#viewlist').listview('refresh');
});
});
I am very new in MVC. I want to bind my combobox with server side data when a user click on a button.
Thanking You
Hasibul
On Controller Use following code:
public List<ReceiveType> _data = new List<ReceiveType> {
new ReceiveType{ReceiveTypeID=1,ReceiveTypeName= "Purchase Order"},
new ReceiveType{ReceiveTypeID=2,ReceiveTypeName= "Sales Return"},
new ReceiveType{ReceiveTypeID=3,ReceiveTypeName= "FOC"}
};
public string load_cmbBoxWithServerSideDataFromClient()
{
var _List = new SelectList(_data, "ReceiveTypeID", "ReceiveTypeName");
return new JavaScriptSerializer().Serialize(_List);
}
On View Page Use following code
#(Html.Telerik().ComboBox().Name("cmbLoadServerData"))
<input type="button" value="load" onclick="load_ServerDataFromClient()" /><br />
function load_ServerDataFromClient() {
var cmb = $('#cmbLoadServerData').data('tComboBox');
$.get("/Home/load_cmbBoxWithServerSideDataFromClient", function (response) {
var selectList = $.parseJSON(response);
cmb.dataBind(selectList, true);
});
}