Category Archives: MultiView

MultiView

[RESOLVED]strange behavior for updatepanel , multiview using ajaxtoolkitmanager

Hi,

i have the below code :

<ajaxtoolkit:ToolkitScriptManager ID="ajaxScriptManager" runat="server">
</ajaxtoolkit:ToolkitScriptManager>

<asp:UpdatePanel runat="server" ID="panlMultiView" UpdateMode="Conditional" ChildrenAsTriggers="False">
        <Triggers>
                 <asp:AsyncPostBackTrigger ControlID="lnk1" EventName="Click"/>
                 <asp:AsyncPostBackTrigger ControlID="lnk2" EventName="Click" />
                 <asp:AsyncPostBackTrigger ControlID="lnk3" EventName="Click"/>
         </Triggers>
<ContentTemplate>
   <asp:MultiView ID="multv" runat="server" >
      <asp:View ID="view1" runat="server">
         <asp:UpdatePanel  ChildrenAsTriggers="True" UpdateMode="Always"  runat="server" ID="upanl2">
              <ContentTemplate>
                 <asp:Panel ID="panlview1" CssClass="b" runat="server"></asp:Panel>
              </ContentTemplate>
          </asp:UpdatePanel>
       </asp:View>
       <asp:View ID="view2" runat="server">
          <asp:Panel runat="server" ID="panlview2"></asp:Panel>
       </asp:View>
       <asp:View ID="view3" runat="server">
           <asp:Panel runat="server" ID="panlview3"></asp:Panel>
       </asp:View>
    </asp:MultiView>
</asp:UpdatePanel>

on Page_Init , i’m loading user controls and add it to panlview3 , inside the user control i have a readonly textbox.

the strange thing is , no matter how i tried to make it readonly , it is not rendered as readonly , i checked in html response from ajax call and i can see the "readonly" attribute , however it is not updating the page.

TextBox t = new TextBox();

t.Attributes.Add("readonly","readonly");

t.ReadOnly = true;

but when i tried to modify "CssClass" , suddenly it works…..

TextBox t = new TextBox();

t.Attributes.Add("readonly","readonly");

t.ReadOnly = true;

t.CssClass+= "readonly"

any idea what happen ?

[RESOLVED]DataList Empty designator in Footer Template

I’m trying to create a label that becomes visible if my datalist is empty.  Unfortunately, this code never shows the label even when the data is empty and I don’t understand why….

 

All I see is "nothing".  The NoResultsLbl Label is never displayed in the footer. 

 

<asp:DataList ID="ProdSearchDL" runat="server" DataKeyField="myID" DataSourceID="ProdDataSource1"
            RepeatColumns="3" RepeatDirection="Horizontal">
            <ItemTemplate>
                <table class="Prod-Table">
                    <tr>
                        <td style="width: 100px">
                            <asp:HyperLink ID="ImageHyperLink" runat="server" AlternateText='<%# Eval("ShortName") %>'
                                ImageUrl='<%# ProdImgURL(Eval("DetailID")) %>' NavigateUrl='<%# GetProductURL(Eval("DetailID")) %>'
                                ToolTip='<%# Eval("ShortName") %>'>HyperLink</asp:HyperLink></td>
                    </tr>
                    <tr>
                        <td style="width: 100px">
                            <asp:HyperLink ID="ProdHyperLink" runat="server" CssClass="Nav-Menu-Main" NavigateUrl='<%# GetProductURL(Eval("DetailID")) %>'
                                Text='<%# Eval("ShortName") %>' ToolTip='<%# Eval("FullName") %>'></asp:HyperLink></td>
                    </tr>
                </table>
            </ItemTemplate>
            <FooterTemplate>
            <asp:Label ID="NoResultsLbl" runat="server" CssClass="Errors"
            Text="Sorry, No Results Available for that Search !" Visible='<%# Boolean.Parse((ProdSearchDL.Items.Count = 0).ToString())%>'></asp:Label>
            </FooterTemplate>
        </asp:DataList>

Most likely your expression is not evaluating correctly.  This is why you should not mix markup with code, because it is not easily debugable.  I would simple use the code-behind to set the visible property based on your value.

A better idea is to use a MultiView control.  Have one view that shows the results when you have them, and another view to display your message.  Then in the codebehind, when you bind the data, set the appropriate view visible (SetActiveView(view) method).

Got that bit of a code from another post as "answer" in this forum.

Intellisense won't update for controls added in a MultiView/UpdatePanel

Hello,

I’ve noticed a problem in VS 2005 SP1 that I’ve observed on many different computers.  Basically if I add an asp.net control to an <asp:multiview> (within the <asp:view>) or an <asp:updatepanel> (within the ContentTemplate) the intellisense in the code file
will NOT update until I close the .aspx file and reopen it.  By this I mean I won’t see the control in the dropdown that lists all controls in the page, and if I start typing, the control won’t be in the intellisense box.  Also, I’ll get errors in the "Error
List" if I’ve already written code to use this control. 

These aren’t legitimate errors either, if I run the page, it’ll work fine.

I’ve searched all over for a fix for this problem, but haven’t found anyone else with the problem, and no hotfix seems to be available.  The only workaround is to close the .aspx file and reopen it.

I’m using the VB.Net editor as well.

 Any help or a workaround (other than closing, reopening the file) would be much appreciated!

–Michael

 If you are using masterpages, keep them open in tabs while development. This may solve your problem. These kind of things happen typically when the scriptmanager is in master page I guess. You should give it a try.

 

–Hope this helps,

 Anup Daware

issue with detailsview

I am having issues with the detailsview getting the mode of the detailsview to change. I have a detailsview that I want the mode to change to insert if there is no information in the detailsview for that particular record. Here is the code I am using. The
issue that I am having is that when I click on the gridview, the mode is changing to insert every other time when there is not a record. It is not showing up at all the other times. Any ideas? I have been working on this for two days with no solution sight.
please assist

Private
Sub GridView1_SelectedIndexChanged(ByVal sender
As Object,
ByVal e As System.EventArgs)
Handles GridView1.SelectedIndexChanged

MultiView1.SetActiveView(View1)

If Me.DetailsView2.Rows.Count = 0
Then

Me.DetailsView2.ChangeMode(DetailsViewMode.Insert)

Me.DetailsView2.DataBind()

Else

Me.DetailsView2.ChangeMode(DetailsViewMode.ReadOnly)

Me.DetailsView2.DataBind()

End If

 

 

If Me.DetailsView3.Rows.Count = 0
Then

Me.DetailsView3.ChangeMode(DetailsViewMode.Insert)

Me.DetailsView3.DataBind()

Else

Me.DetailsView3.ChangeMode(DetailsViewMode.ReadOnly)

Me.DetailsView3.DataBind()

End If

End Sub

Try this way

MultiView1.SetActiveView(View1)

If
Me.DetailsView2.Rows.Count = 0
Then

Me.DetailsView2.ChangeMode(DetailsViewMode.Insert)

Else

Me.DetailsView2.ChangeMode(DetailsViewMode.ReadOnly)

Me.DetailsView2.DataBind()

End If

Thanks for the quick response

I tried your method and I got the same result. Every other time I click on my gridview list to get the details, the detail list in insert mode shows up. The other times nothing shows up at all.

Any thoughts?

[RESOLVED]How to access hidden field data using css

I have a hiddenfield which is storing the data in followng format:

1Hello-2Hai-3Bye-4GoodBye

Now I have two buttons in Asp.net like "<<"  [backward Button], ">>"  [Forward Button]]

First time when page loads it should display like below.

eg: Hello

Now, When I click ">>" foraward button it should display next message from hiddenfield.

eg: Bye

Again, If I Click "<<" backward button , It should display like below:

eg: Hello.

How to do this with css ?

Hi,

use the Multi-view control…. it does all that automatically for you.

http://asp-net-example.blogspot.com.au/2008/10/multiview-example-how-to-use-multiview.html

Hello,

gopikrsna

How to do this with css ?

This can’t achieve with CSS. This can achieve with javascripts/jQuery.

  • First read the hidden field value and store that value in a variable. Then split that variable using a regex and store the values in a array.
  • Have a global variable for the index value initially set to 0.
  • Have two methods. One for backward button and one for forward button.
  • In backward method, increment the global variable index value by one and access that position in the array
  • In forward method, decrement the global variable index value by one and access that position in the array
  • Avoid post back on each clicks

Ruchira Thanks!

[RESOLVED]I have a problem with callback function

in the below code i have problem with callback function as used in line 21+ i have 3 radio buttons and if click any one a div associated with this radio button will appear and other 2 will fadeout. if i repeat the clicks on all the radio buttons fast
i can see all the radio buttons 

how to over come this 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script src="jquery-1.7.js" type="text/javascript"></script>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type ="text/javascript">
        $(document).ready(function () {
            $("#divinput").click(function () {
                $("#divreport").removeClass("divborder");
                $("#divinput").addClass("divborder");
                $("#divslide2").slideUp("slow", function () { $("#divslide1").slideDown("slow"); });
            });
            $("#divreport").click(function () {
                $("#divreport").addClass("divborder");
                $("#divinput").removeClass("divborder");
                $("#divslide1").slideUp('slow', function () {   // I HAVE PROBLEM HERE
                    $("#divslide2").slideDown("slow");
                });
            });
            //to display period - week, month, and between dates
//------------------------
            $("#<%=RadioButton1.ClientID %>").click(function () {

                $("#month").fadeOut("slow", function () {
                    $("#dates").fadeOut("slow",function()
                    { $("#week").fadeIn(); });
                    
                 });

            });
//------------------------
            $("#<%=RadioButton2.ClientID %>").click(function () {

                $("#week").fadeOut("slow", function () {
                    $("#dates").fadeOut("slow", function(){$("#month").fadeIn(); } );
                    
                 });

            });
//------------------------
            $("#<%=RadioButton3.ClientID %>").click(function () {

                $("#month").fadeOut("slow", function () {
                    $("#week").fadeOut("slow",function(){$("#dates").fadeIn(); });
                    
                 });

            });
//------------------------

        })
</script>
    <div style ="width:180px; height:30px;">
    <div id ="divinput" class="divmultiview" >
        <a class="aclass" href="#">Input</a></div>
    <div id ="divreport" class ="divmultiview">
        <a class="aclass" href="#">Report</a> </div>
    </div>
    <div id ="divslide1" class="ddd"><p>this is div 1
        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    </p></div>
    <div id="divslide2" class="ddd">
    <div>
        <asp:RadioButton ID="RadioButton1" GroupName="rd" Text="This Week" runat="server" />
        <asp:RadioButton ID="RadioButton2" GroupName="rd" Text="This Month" runat="server" />
        <asp:RadioButton ID="RadioButton3" GroupName="rd" Text="Between 2 Dates" runat="server" />
      </div>
      <div style =" width:200px; " >
      <div id ="week" style ="display:block;" class ="divperiod"><p> this week</p> </div>
      <div id ="month" class ="divperiod" > <p> this month</p> </div>
      <div id ="dates" class ="divperiod"> <p> Between dates</p> </div>
      </div>
    </div>


</asp:Content>
</div>

you use stop() to stop animations. on the click you need to stop() all fadeout/fadein(), then dtermine via css which are partially open, then strat new animations.

[RESOLVED]how to implement the Tabs in asp.net with out using Ajax or Jquery

Hi, I would like to know the method to implement the tabs in a webform with out using ajax or Jquery

Well, right off a non-elegant solution that works would be create a panel for each content container. Add a button for each panel. Set one panel as the default visible with the rest hidden. As you click a button, swap the visibility. There may be more elegant
solutions but this one is easy to build and is 508 compliant.

hi..

Refer the below link to aplly tab using css

http://blixt.org/articles/tabbed-navigation-using-css#section=introduction

[RESOLVED]is it possible to call a multiview in a function !?

Hi

i have a popup function thats works by calling it with maybe sAlert(‘hello’)
Then it will make a popup and in that popup i will get the word hello.
the function is called sAlert(str).

Is ot posible to say that str = a multiview !?

Lets sat that i have a code like that get a record from a db and depending on the value then i call a multiview like this

If blnNoRecords Then
            MultiView1.ActiveViewIndex = 0
        ElseIf intStatus = 0 Then
            MultiView1.ActiveViewIndex = 1
        Else
            MultiView1.ActiveViewIndex = 2
        End If

its works, but now i want to show the multiview in the sAlert, how can i set the str = my multiview !?

right now i use this to show the sAlert(‘hello’) in my str from sAlert(str)

        document.body.appendChild(msgObj);
        document.getElementById("msgDiv").appendChild(title);
        var txt = document.createElement("p");
        txt.style.margin = "1em 0"
        txt.setAttribute("id", "msgTxt");
        txt.innerHTML = str;
        document.getElementById("msgDiv").appendChild(txt);

[RESOLVED]cssclass not being applied to controls in viewpanels

Trying to get a consistent look to my buttons.

The css stylesheet is correctly reffed in the head of the page. Other classes are being applied from the stylesheet to other controls. But where I have buttons that are not seen at the first page load, because they are on multiview view panels, the cssclass
is not being applied when the buttons are shown.

These buttons are on a view panel inside a multiview inside an ajax panel.

My first guess is that the css selectors are not matching the elements you expect.  Check your css aainst the actal page source that is rendered to the browser.  Otherwise, post your markup and css.

I’m only talking about buttons here. There are several but an example will make the point. There is a button that appears at page load. It has the cssclass applied correctly. That same button after clicking, when it’s code behind shows some other stuff,
loses the css rules that had been applied to it. 

I’m suspecting it’s something to do with being on a view panel or being on an ajax panel ….

You can have a look at the problem here

http://www.poporangi.com/

Look at the button near the top of the page "Show vehicles"

Using the web developer Chrome extension I can see that on page load the css is applied and I can view the css that was applied. After the button has been clicked it reverts back to a button without my css being applied to it.  But why???

The simple answer is that the css is not being applied because the spans with classes: button-wrapper, button-l and button-r are not rendered to the page after the button is clicked.

 

How are these spans included in the rendered output the first time?  Are they in the page markup or applied via javascript or some other way?  I guess you need to make certain that they are included when the update panel updates its contents.

 

 

There is a link to the stylesheet in the head of the master page. The buttons are all on the master page too. How would I ensure  they get updated? 

How and when are you applying your css styles? 
 

In the case of this button in the aspx file 

<asp:Button ID="btnSearch" runat="server" Text="Show Vehicles"
CssClass="button" />

With a link in the head to the stylesheet.

The css is been changed (as you notice) .
Check for your code if you don’t change this button css class on post back event handler or something like that. 
other way is to enforce the class to be applied on page load / pre-render.

My choice goes to check the code for any changes to class.
Or you could use an updatepanel =) where you put the grid on and not modifying the master page. 
 

It isn’t being changed anywhere. 

How would I enforce the class to be applied at page load? I have tried  btnSearch.CssClass = "button" in page load and it does nothing.

damn… it should be a stupid thing. 
(i’m not calling you names, just this must be a tiny thing). 

or just redo the page and put the content (that grid view ) in an updatepanel  - either the ways it looks prettier  and it should solve you problem.  

Hmmm. There was an earlier version with another view panel with another button. I had the same problem. 

Moving the gridview doesn’t help because there are buttons on there I want to apply the same style to! 

I’ve seen a lot of similar problems from other people but no appropriate solutions yet.

ok..
did you tri with jquery?

you could on document ready event to bind the css class to your button.
why not give a shot?
 

Okay but no idea how to do that. Can you give a hint?

On your master  page (inside head) add the jquery.js referece :
 <script src="~/Scripts/jquery-1.6.2.min.js"  type="text/javascript"></script>
OR 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

still on header  tag add this:

    <script type="text/javascript">

 $(document).ready(function () {  

$('[id$=btnSearch]').addClass("button");

});

</script> 

i’m using a cheat on selector for your button but it’s easier this way.

check and this: 
http://www.w3schools.com/jquery/default.asp 

Dadgamit I’d really like to give you a win on this but sadly not. No change.

hum… 
on your css file duplicate the class for the button and give it a new name (as far i remember there were two css classes with the same name for example: "myButtonClass".

then do this

 $(document).ready(function () {  

alert("enter");

$('[id$=btnSearch]').addClass("myButtonClass");
alert("out");

});

 tell me if you got any js error or missing file, ok? 
 

No change and no errors.

Load stylesheet from server side.

string ky="includecss";

ScriptManager.RegisterClientScriptBlock(this,this.GetType(),ky,"<link href =’" + ResolveClientUrl("~/styles/stlyesheetname.css") + "’ rel=’stylesheet’ type=’text/css’ />",false);

Let me know if this resolve your issue

I’m sure we’re getting closer by using the scriptmanager but it ain’t right yet. 

I’m not sure I implemented your suggestion properly. Here is the code I put in page load

Dim ky As String = "includecss"

ScriptManager.RegisterClientScriptBlock(Me, Me.GetType, ky, "<link href ='" + ResolveClientUrl("~/style.css") + "' rel='stylesheet' type='text/css' />", False)

I’m not at all sure what those three arguments should be.

I think you are getting a little off the track.  As far as I can see, the browser is loading the css correctly and the styles are being applied correctly.  The problem is that the html after the button is clicked does not contain the elements that the css
uses to style the button.  The button (inout element of type button) is being assigned the class, button, but the css selector only references the button class as a contained element inside a button-wrapper class which is on the page when it first loads but
is nt on the page after the button click.

Your styles like background are not appled to the "button" class but to spans with the "button-l" and "button-r" classes:

span.button-wrapper>span.button-l, span.button-wrapper>span.button-r
{
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: 0;
   padding: 0;
   background-image: url('images/button.png');
   background-repeat: no-repeat;
}

span.button-wrapper>span.button-l
{
   left: 0;
   right: 14px;
   background-position: top left;
}

So I think you need to answer the question about where and how these spans with the button-wrapper, button-l and button-r classes are being added to the DOM.  Are they in your markup?  Where do you assign the button-wrapper class to any element?

Thanks Richard. I finally get the idea that the cssClass is being changed somewhere. I had figured that was not the case because I hadn’t assigned it differently in my code. But I got the css file from the designer on the project and just looking over what
he sent me there is a bunch of javascript too. I suspect the change is happening in one of those scripts. I’ll check this out and report back.

I suspect that the javascript is wrapping the button (input of type button) with the spans used to style it.  This javascript is probably being executed when the document ready event is raised.  Since the browser does not raise the document ready event after
an ajax call, the wrapper spans are not put in the DOM.   Just a guess, but something to check.

Pretty good guess Richard. Here is the relevant part of the jscript file.

/* begin Button */
function artButtonSetup(className) {
    jQuery.each(jQuery("a." + className + ", button." + className + ", input." + className), function (i, val) {
        var b = jQuery(val);
        if (!b.parent().hasClass('button-wrapper')) {
            if (b.is('input')) b.val(b.val().replace(/^s*/, '')).css('zoom', '1');
            if (!b.hasClass('button')) b.addClass('button');
            jQuery("<span class='button-wrapper'><span class='button-l'> </span><span class='button-r'> </span></span>").insertBefore(b).append(b);
            if (b.hasClass('active')) b.parent().addClass('active');
        }
        b.mouseover(function () { jQuery(this).parent().addClass("hover"); });
        b.mouseout(function () { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().removeClass('active'); });
        b.mousedown(function () { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().addClass('active'); });
        b.mouseup(function () { var b = jQuery(this); if (!b.hasClass('active')) b.parent().removeClass('active'); });
    });
}
jQuery(function() { artButtonSetup("button"); });

/* end Button */

So what do I need to do about this? 

You have a couple of choices.  I think that you can register the javascript so that it will be called each time the update panel updates.  This link may help (google/bing for more).  My disclaimer here is that I have been working in MVC so much that I am
not real up to date on UpdatePanel controls.

http://stackoverflow.com/questions/1190549/how-can-i-run-some-javascript-after-an-update-panel-refreshes

You might want to rethink the idea of using javascript to style an element.  Just add the required html to the markup.  I think this is probably the best practice but there can be many compelling and valid reasons for the way it is done in your case.

If you need more help, you might want to think about closing this thread and opening a new thread with a title that describes what we now think the situation to be.

Richard is correct, you need to rerun that javascript on the buttons after they are rendered (or re-rendered) inside the update panel.  There are a number of ways of doing so, as pointed out by the stackoverflow page he sent you to.  Any of those should
resolve your problem.

Just add this javascript to your page:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){artButtonSetup("button");});

Thanks very much guys.

Hey Thsman

Did you try placing the !important for the class attribute which you wanted to be enforced ?

this should work.

Regards

I didn’t but I have it working now. Thanks