Our team has a web app built on asp.net (C#) and uses some infragistics asp.net controls. I'm having serious problems (in particular) with the infragistics web dialog window (IGWD) since I started to move the html of the app to html5 and using bootstrap 3 as the css framework.
I believe that some properties like table-layout:fixed and table widths that bootstrap 3 uses are messing up the IGWD control. But if I remove those properties from bootstrap css I mess all the framework and thus, all the app.
Any ideas where I should start? Already read the infragistics documentation but is not as good as one might think and didn't help me at all on this particular issue :-(
Thanks in advance for all your help and patience.
After many attempts I'm starting to get some results - what I did was just follow the guidelines and samples of this guy = http://www.ezineasp.net/post/AJAX-Calendar-Extender-CSS-Theme.aspx and adapt his ideas to infragistics controls.
So, I created my own cssclass and contextualize all infragistics web dialog window classes under my own! But I had to go codebehind to make sure some attributes are set the way I want. For example, I had to add these lines
wdwAddCurso.WindowState = DialogWindowState.Normal;
wdwAddCurso.InitialLocation = DialogWindowPosition.Centered;
otherwise I couldn't get the window to stay where I wanted it even if I had
<ig:WebDialogWindow ID="wdwAddCurso" runat="server" Width="640px" Height="480px" InitialLocation="Centered" Moveable="true" Modal="True" StyleSetName="RubberBlack" ModalBackgroundCssClass="igdw_RubberBlackModalBackground">
<ContentPane FrameBorder="true">
<Template>
<uc1:CursosAdd01 runat="server" ID="CursosAdd011" />
<div class="text-center">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" CausesValidation="False" CssClass="button" Text="Fechar" />
</div>
</Template>
</ContentPane>
<Header>
<CloseBox Visible="false" />
</Header>
<AutoPostBackFlags WindowStateChange="On" />
</ig:WebDialogWindow>
in the aspx file.
Anyway, thanks for the answer!
The version we're using is Infragistics4.Web.v10.3, Version=10.3.20103.2217.
And the result I'm getting is this (not the final result we desire but...as I've said before, we are getting somewhere):
you can see a screenshot here
Related
I've got a styling question on my hands. Using sensenet, a platform for ASP.net functionality, forms are done with not only sensenet language, but also ASP.net language as well.
I'm having a problem making the ASP:TextBox feature look like the bootstrap input box. I've called the bootstrap css file, tried changing the class for the ASP:TextBox code, but nothing works aside from just using the html tag of
<input class="text input-sm">
Here's the code I have so far:
<asp:TextBox CssClass="text input-sm" ID="InnerControl" placeholder="Middle Name" runat="server"></asp:TextBox>
.. and the css is being incoporated here:
<sn:CssRequest CSSPath="$skin/styles/Projectname/bootstrap.min.css" ID="pageTemplateUIStyleReq1" runat="server" />
Is there anyway to make the ASP:TextBox to look like the bootstrap input box but also function the way it's meant to function through ASP language?
Attached are images of the before and after-sought effects:
what I have now:
what I'm looking to attain:
The way you are adding the class to your textbox is correct. The problem is here:
<sn:CssRequest CSSPath="$skin/styles/Projectname/bootstrap.min.css" ID="pageTemplateUIStyleReq1" runat="server" />
Just add a normal reference to your stylesheet and don't try to load it server side. If your page requires this, check to ensure it is loading bootstrap correctly in your browsers dev tools.
I inhereted this old .net 2.0 site and need to make this code view as an image, like a normal input type = "image" src=".." etc.
<cc1:LocalizedButton ID="btnLogin" runat="server" />
The site is precompiled, so I have no access to the code behind, and I need to keep this forms functionality.
It is VB to if that makes any difference.
Thanks in advance!
UPDATE: Code for first question: https://gist.github.com/1320856
You can use the ImageButton control
I've got the beautiful task at hand to look at some nice legacy asp.net 2 code and implement some new controls.
It's my first attempt at asp.net (the classic one, i've experimented with mvc a bit) so i am not too fond of it.
Right now i am trying to understand why a databinding sometimes works and a similar binding wont work on another page.
<asp:ImageButton ID="SaveAsPDFButton" runat="server"
ImageUrl='<%#GetPdfIconSmallPath() %>'
ToolTip='<%$ Resources:SaveAsPDFButton.Text %>'
CausesValidation="false" />
While the Tooltip gets evaluated and set, the ImageUrl of this control wont be set. The function is not getting executed. I've tried all, even disabling ViewState on it.
On other places, this same code however works just fine, like this small snippet here which does exactly what you might expect it to do:
<asp:HyperLink ID="InvHl" runat="server">
<asp:Image ID="Img1" ImageUrl='<%#GetPdfIconSmallPath() %>' runat="server" />
</asp:HyperLink>
Same thing occurs with the Visible Property of an ASP:Panel i have on other places in this page.
Any ideas on how to get this working appreciated!
We didnt really solve the problem but switched to the newest version of ASP.NET which does not show such a strange behaviour.
I have been using asp.net programming just from few months and I have to maintain an application that is made up of many aspx webforms with updatepanels.
One of the task of the maintenance is to integrate some of the JQueryUI widgets (mostly datepicker, tabs and buttons).
I am experiencing some problems on doing this smoothly expecially when the controls are
Inside an update panel
Generally inside any templated control (e.g. Wizard control)
For example this very simple code:
<script type="text/javascript">
$(document).ready(function() {
$("#myTabs").tabs();
$("[ID$=TextBox2]").datepicker();
$("[ID$=btnOk]").button();
});
</script>
<div>
Jquery UI controls inside a div (Tabs, datepicker and buttons)
<br />
<div id="myTabs">
<ul>
<li>quick sample</li>
</ul>
<div id="p-tabs-1">
<p>In this page there are a datepicker control and a button</p>
<p>
Please select a date :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnOk" runat="server" Text="Ok" OnClientClick="btnOk_Click" />
</p>
</div>
</div>
</div>
will immediately cease to work if placed inside an update panel.
Do there is a solution regarding this issue or I have to follow a completely differnt approach? Do I have to substitute all the updatepanels? And what is the best alternative to this easy to use control?
Thanks very much
Lorenzo
After applying Chuck suggestion I was getting a javascript error (Sys is not defined).
Googling around tooked me at this web post that solved my problem.
Now everything works! :)
See: jQuery $(document).ready and UpdatePanels?
An updatepanel destroys all javascript references, which includes jquery bindings. If it did not do this it would create a memory leak.
I am using ASP.NET controls to fill in HTML for my jQTouch application, but I am having trouble with my hrefs ceasing to function as intended on my search page. The jQuery function for my anchor class evidently does not get called; it simply links back to the default page, even though the link is built similarly on other pages without any problems.
This is where my links are breaking:
<form id ="form1" runat="server" class="form">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="up1">
<ContentTemplate>
<ul class="rounded">
<li><asp:TextBox ID="txtSearchString" runat="server" name="search-articles" placeholder="Search GROK"></asp:TextBox></li>
<li><asp:Button ID="btnSearch" runat="server" Text="Search" type="rounded" OnClick="btnSearch_Click"></asp:Button></li>
</ul>
<asp:Literal ID="litSearchResults" runat="server"></asp:Literal> <%--HTML for jQTouch inserted here--%>
</ContentTemplate>
</asp:UpdatePanel>
</form>
This is an example of the HTML generated by code behind.
<ul class="edgetoedge"><li class="sep">Found 101 articles</li><li>PAWS: How to Access the Sample Test Database</li><li>Mac OS X: Hardware Test</li><li>The JavaScript Test</li><li>PAWS: Emergency Text Message Test</li><li>Definition: remote digital loopback test</li><li>Definition: power-on self test</li><li>Definition: power-on self test</li><li>AVG 9.0 Free Edition: Setting Scan Process Priority</li><li>Microsoft Office 2007: Diagnostics</li><li>Moodle: Description of Aggregation Methods</li><li>AVG 9.0 Free Edition: How can I run the complete scan of whole computer?</li><li>LSU A-Z: Office of Assessment and Evaluation</li><li>Linux: sed Insert a Newline Into the RHS of a Substitution</li><li>Microsoft PowerPoint 2007: Narrating a Slide</li><li>Ubuntu: Deleting Undeletable Files In the Trash</li><li>Linux: Remove All Digits/ Input From Inputs</li><li>SQL: Create a MySQL DocDB Databse</li><li>Linux Gnome: Screens and Graphics</li><li>Linux Xfce: Adjust keyboard settings</li></ul>
jQTouch handles every other tag normally, it is just the anchors that have ceased to function as intended by being placed inside this form. Can I keep using update panels here or will it inevitably break? Is there a work-around? Or am I approaching the problem incorrectly?
Keep in mind I want to retain the AJAXical animations produced by jQTouch. If you find that I am unclear or you would like to see more code (I only included what I believe to be necessary), please let me know.
Bonus points if you can tell me how to get jQTouch to replace the ugly the ASP.NET button control with an iPhoney button. :)
I think you are going to have to do a ton of hacks to get ASP.Net working with jqtouch with update panels, as you are going to be fighting the JavaScript inserted by ASP.Net with the JavaScript that jqtouch inserts. In your example all your links are going to the same anchor (#article). To do this in a jQtouch kind of way, you would have all the the links going to '#' and handle the tap of the articleLinkClass and then adjust as you need to.
$('.articleLink').tap(function()
{
var id = $(this).val('id');
// Pseudo CODE HERE FOR Setting up the article based on id... E.g.
$.json(jsonServiceUrl, { article_id: id }, function(data)
{
$('#article data).html(data);
});
jQt.goTo('article'); // Display the article page...
});
The iPhoney buttons are created in jQtouch as 's with their class as "whiteButton", i.e.:
<a id="myTestButton" class="whiteButton">Test Button</a>
Hope this helps...