I am using telerik DatePicker in my MVC3 project like :-
<ul class="floatleft width25">
<li>
<%: Html.LabelFor(model => model.AppointmentDate)%>
<%: Html.Telerik().DatePickerFor(model => model.caseSearchRequest.AppointmentDate).OpenOnFocus(true).ShowButton(true)%>
</li>
</ul>
Please tell mo how i to add a image for opening calendar for this datepicker.
Are you looking to change the icon which comes with each DatePicker? This can easily be done by just modifying the sprite.png file which is tied to each of the provided Telerik skins. Just open up that file (located in the [install directory]/content/[version number]/[skin name]/) in your favorite image editor and change the icon around.
If for some reason this icon is not being displayed at all then I believe there are issues related to the CSS files not being sent to the client. I would use the Developer Tools of the browser to check if any issues appear with sprite.png not getting downloaded properly.
Related
I have 2 image files in my App_Data directory and I want to show them in my view like this:
#foreach (var media in Model)
{
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail"><img src="#Url.Content("~/App_Data/uploads/" + #media.URL)" alt="image" /></a>
</div>
}
When I check the link in the browser I get this :
<img src="/App_Data/uploads/Warnings.png" alt="image">
It says he can't find the image. How can I set the correct link?
The App_Data folder is a special .NET "system" folder in which IIS is configured to not allow the contents of that folder to be visible to web users. Create a different folder to store your images as you really should not allow App_Data to be web visible (if you can even change the setting).
From iis.net:
For example, on Web servers that are hosting ASP.NET content, IIS 7
blocks several of the ASP.NET-related paths for you; Web.config, bin,
App_Code, etc. Blocking these URL segments reduce the chance of an
attacker being able to exploit these URLs for information.
I'm using the theme provided by themeRoller in my personal mobile web application.
The issue I'm facing is when I use checkbox in <li> clause.
Probably, if we want to use themeRoller checkbox we write it like:
<label><input type="checkbox" />checkbox</label>
Above example displays the checkbox as I want but when I use the same code in <li> it doesn't keep the same.
Im starting a project from scratch in Worklight. Im using Jquery Mobile and I need to know how Im suppose to do the transition between pages. When I drag and drop a new list view, the following code is generated using Hyperlinks:
<ul data-role="listview" id="listview" data-inset="true">
<li data-role="list-divider" id="divider">Divider</li>
<li id="listitem">Item</li>
<li id="listitem0">Item</li>
<li id="listitem1">Item</li>
</ul>
But if I take into consideration the "building multiple page application" guide, I should not use hyperlinks...How should I do this?
As you rightly so mention, Worklight is a Single Page Application. Thus you cannot load another HTML file and expect the application to continue functioning. By doing so you lose the "context" of the Worklight framework - the references to the included JS files, etc.
In order to implement multipage navigation, then, you can use either jQuery Mobile's changePage or jQuery's load functions (or the equivalents in other frameworks...), depending how you'd like your application to behave.
jQuery.mobile.changePage()
http://api.jquerymobile.com/jQuery.mobile.changePage/
.load()
http://api.jquery.com/load/
Here are a couple of Worklight 6.1 projects demonstrating page navigation:
JQM_multipage_load_changePage.zip - uses either .load or .changePage
JQM_multipage_changePage_pageshow.zip - uses .changePage and .pageShow
In both approaches you have 1 HTML file (Worklight's index.html) and multiple other HTML files; you take the contents of these HTML files and replace with it a specific subset of the index.html. This way Worklight's index.html remains intact (the references to the framework's JS, etc), but the app contents is changed.
Taking the above to your particular case, you can add an onclick to your href and use jQuery Mobile "to transition" and display the contents of "another" page.
I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.
I know this might seem a simple question, but with all the WMD versions out there, I need to know how to include WMD Editor in my website, and is there a server control to include in server-side or there is only WMD classes to manage and sanitize input content?
I recently wrote an article in my blog with a simple discussion on how to get derobins wmd editor (same one as the SO wmd editor) in your web site: http://codesprout.blogspot.com/2011/03/wysiwyg-derobins-wmd-markdown-editor-in.html In my blog I provide the links for downloading the latest WMD editor, the instructions and a test page provided with the WMD download.
Installation
The installation instructions were quite good, so the installation went without a hitch!
Usage
I found it useful to muck with the wmd test page a little, just to get a feel for the editor (which should be pretty familiar to people who are already familiar with StackOverflow).
Implementation
Suppose you've already added/merged the wmd style sheet to your web site's style sheet, now you just need to add the proper references in your master page, create a partial view with the wmd editor, and finally display the partial view on a page of your choice.
Step 1: Follow the installation instructions for wmd.
The installation are in the readme file of the wmd download.
Step 2: Create a partial view for the editor (I called mine MarkdownControl).
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel"></div>
Step 3: Display the control in a page of your choice:
<% Html.RenderPartial("MarkdownControl"); %>
And there you have it: a WYSIWYG editor in a partial view which you can display anywhere on your web site! You can see my implementation in action here: www.mydevarmy.com/Competition/Propose