Technorati-Tags:
telerik,
iPhone,
iPadWorking on iDivine I had to provide an update mechanism for puzzles.
The goal was to provide some kind of web interface where users can select puzzles and download them.
The first idea was to work with web services. This would mean to build an iPhone (iPad) UI which displays the data provided by the service. Since there is no “multi select list” on these devices I would have to implement such a thing. Not that big problem – but it made me think about a different solution.
I also wanted to provide a “normal web view” (just to see the riddles on a website).
And the biggest problem – timing. I wanted to use the expected “application review time” to finish these things.
Then I tried if I could achieve the desired results using an apsx page. And it worked.
At the iPhone / iPad side I needed just to call some java-script functions and a few methods to download content and provide information (installed games list) for the website.
Looking for an easy way to provide a nice looking UI I (of course) took a look at the
telerik RAD controls for ASP.NET Ajax.
The result (on the iPhone) looks like this:
There is a little scrolling which doesn’t appear on the iPad where this dialog is a bit larger.
The “tricks” I’ve done in this form are two things.
- I made the checkboxes bigger
- I provided a “details view” to keep the list small without loosing information
which MAY (not must) be of interest
The details look like this:
As you can see there is another RAD Control on the details view – RAD Rating.
While the list itself is optimized for the iPad (little scrolling on iPhone) the details are optimized for the iPhone (no scrolling there).
When you have a look at the supported browsers in RAD Controls for ASP.NET Ajax you won’t find the mobile safari browser. But anyhow – the controls work as expected.
While this page is optimized to be used inside the game (templates) I also use the grid on the “default web interface” without any special adaption for the iPhone / iPad. The following image proofs that rendering works correct without special customization:
The same view from a PC (IE 8):
You can checkout yourself: http://idivine.pp-p.net/GameInfo/RiddleList.aspx
I will have to do some adoptions (notice the bigger text above the list in the upper screenshot) – but notice also that this only affects my own elements where a CSS style makes this to big text.
The telerik RAD Grid looks perfect – without any need for customization.
And since most of my blog post provide at least a little code – here is how the “game page” (download list) has been done. The details page is (to save work) done using the Edit mode of RAD Grid.
Snippet created with CBEnhancer <ClientSettings Selecting-AllowRowSelect="true" > <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" UseClientSelectColumnOnly="true"></Selecting> <ClientEvents OnPopUpShowing="PopUpShowing" /> </ClientSettings> <MasterTableView DataKeyNames="GameID" DataSourceID="odsGames" EditMode="PopUp"> <NoRecordsTemplate> <p>Sorry - we found no games for you
</p> </NoRecordsTemplate> <EditFormSettings CaptionDataField="Name" CaptionFormatString="<b>{0}</b>" PopUpSettings-Modal="true" PopUpSettings-Width="290px" PopUpSettings-Height="320px" EditColumn-Display="False" EditColumn-Visible="False" /> The first 2 lines bring up the checkboxes to select the puzzles.
Next I set EditMode=”PopUp” – which will show “editing” in a popup window.
And since I need no “Update / Cancel” buttons on this form I set EditColumn-Display=”False”.
There is a little more needed. First some functionality to place the popup:
Snippet created with CBEnhancer <script type="text/javascript"> function PopUpShowing(sender, eventArgs) {
var popUp = eventArgs.get_popUp();
popUp.style.left = (getScrollWidth() + 3).toString() +
"px";
popUp.style.top = (getScrollHeight() + 6).toString() +
"px";
}
function getScrollHeight() {
var h = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
return h ? h : 0;
}
function getScrollWidth() {
var h = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
return h ? h : 0;
}
</script> And (since I suppressed EditColumn-Display) I needed the close button.
I combined it with the Comment display like this:
Snippet created with CBEnhancer <telerik:GridTemplateColumn EditFormColumnIndex="0" ItemStyle-Font-Size="11px" Visible="false" EditFormHeaderTextFormat="{0}"> <EditItemTemplate> <div style="border:
1px solid green;
"> <uc:CommentDisplay ID="CommentDisplay1" runat="server" TheText='<%#Eval("Comment")%>
' Width="180px" FontSize="10px" /> </div> <div style="width:
100%;
text-align:
right"><asp:Button CssClass="BigButton" CommandName="Cancel" runat="server" Text="Close" /></div> </EditItemTemplate> </telerik:GridTemplateColumn> It is nothing more than a button with the command name set to “Cancel” (which will cancel “edit” and close the form).
The last element is the “Get selected games button”. Thanks to the “client select interface” of the telerik RAD Grid the code is very easy:
Snippet created with CBEnhancer
protected void btnGetSelected_Click(object sender, EventArgs e) {
List<int> lSelectedGames = new List<int>();
lblInfo.Text="";
foreach(GridDataItem gdI in rgGames.SelectedItems) {
lSelectedGames.Add((int)gdI.GetDataKeyValue("GameID"));
}
…
}
With this code I get the list of selected games (their IDs) – the rest is easy.
Conclusion: the title of this post is misleading I know – I was kidding a bit.
Of course there are now telerik controls for the iPhone – iPad – but although telerik doesn’t promise that their ASPX controls work for iPhone / iPad browsers (which are different beasts than desktop Safari) – they do their job pretty perfect.
As far as I remember telerik had a slogan: deliver more than expected
And that is exactly what I (not for the first time) learned with this “let’s simply try it approach” building a UI beyond the scope of a normal web site.
Manfred
Subscribe