Showing posts with label ive. Show all posts
Showing posts with label ive. Show all posts

Monday, March 26, 2012

How do I exit GridViews EditMode when user clicks to another TabPanel?

I've got a GridView/FormView pair on each of four TabPanels. If a user has a GridView is in EditMode in one tab and he clicks on another tab's header, I want to have the GridView on the current panel exit EditMode.

I've tried several approaches, but with no results, save one. That setup, though the GridView did exit EditMode, theentire TabContainer refreshed - took forever, and really looks crappy.

In the one that "worked", I had this in my code behind:

Protected Sub tabContEquipment_ActiveTabChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles tabContEquipment.ActiveTabChangedGridView1.EditIndex = -1GridView2.EditIndex = -1GridView3.EditIndex = -1GridView4.EditIndex = -1End Sub

And in the TabContainer's tag, I had to include this:

<ajaxToolkit:TabContainer ID="tabContEquipment" runat="Server" CssClass="active_tab inactive_tab hover_tab" ActiveTabIndex="0" OnActiveTabChanged="tabContEquipment_ActiveTabChanged" AutoPostBack="true">

My latest attempt was to call a sub from each of the tabs' OnClientClick event and exit the EditMode for that tab's GridView. Like such:

<ajaxToolkit:TabPanel ID="tabEquip" runat="server" HeaderText="Equipment" OnClientClick="GridView1_ExitEditMode">

and:

Public Sub GridView1_ExitEditMode(ByRef senderAs Object,ByRef eAs System.EventArgs)GridView1.EditIndex = -1End Sub

That just resulted in the entire TabContainer not rendering and I got the error: 'GridView1_ExitEditMode' is not defined. That's likely due to my inexperience in coding, but I don't understand why that setup didin't work...

I'm wondering if this has something to do with working with triggers and child controls within the container and its panels, but I'm not really getting how those work together either!

I'dREALLY appreciate it if someone could help me out here. I really thought this would be a simple matter of just setting EditMode = -1 for the GridView when the user clicks another header, but obviously that's not the case! (Which seems to be the rule, rather than the exception with the AJAX Control Toolkit - another remark from a very inexperienced developer!)

Thanks!

C'mon! No one's got any suggestions/ideas?

I'dreally appreciate some helpl here!

Thanks.


Hey, guys, I'm still not getting anywhere with this problem.

Could anyone offer any suggestions?

Thank


capella07:

<ajaxToolkit:TabPanel ID="tabEquip" runat="server" HeaderText="Equipment" OnClientClick="GridView1_ExitEditMode">

and:

Public Sub GridView1_ExitEditMode(ByRef senderAs Object,ByRef eAs System.EventArgs)GridView1.EditIndex = -1End Sub

That just resulted in the entire TabContainer not rendering and I got the error: 'GridView1_ExitEditMode' is not defined. That's likely due to my inexperience in coding, but I don't understand why that setup didin't work...

OnClientClick property indicates the client side function that will be called when the panel is clicked on client side, but it doesn't exist in your code.

capella07:

I've tried several approaches, but with no results, save one. That setup, though the GridView did exit EditMode, theentire TabContainer refreshed - took forever, and really looks crappy.

In the one that "worked", I had this in my code behind:

Protected Sub tabContEquipment_ActiveTabChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles tabContEquipment.ActiveTabChangedGridView1.EditIndex = -1GridView2.EditIndex = -1GridView3.EditIndex = -1GridView4.EditIndex = -1End Sub

And in the TabContainer's tag, I had to include this:

<ajaxToolkit:TabContainer ID="tabContEquipment" runat="Server" CssClass="active_tab inactive_tab hover_tab" ActiveTabIndex="0" OnActiveTabChanged="tabContEquipment_ActiveTabChanged" AutoPostBack="true">

This is an easy way to achieve what you described, and I think you may place the TabContainer in a UpdatePanel to avoid a full postback.

How do i clear/reset a cascadingdropdown?

i have three dropdownlists. once i've selected third i fire a postback using the third dropdown's autopostback property. my question is how do i get all the dropdowns to reset back to their prompt messages ready to be used again.

i've tried changing the selectedindexes for the dropdowns to 0 and -1 but that doesn't work

Check outthis thread.

isn't there an easier way of doing this? Seems like a lot of work just to reset the dropdownlists


Hi Iljones,

Based on my research, I think the best solution is to modify the source code to meet your expectation. Here is another sample, please add the code below to your source code. When the last CascadingDropDown populated , onpopulated function will be called and it will set the first CascadingDropDown's selectedIndex to be 0.

<script type="text/javascript" language="javascript">
var flag = true;
function pageLoad(sender, args){
$find("myCDECity").add_populated(onpopulated);
}
function onpopulated(sender,args){
if(flag){
flag = false;
$get("<%=dlState.ClientID%>").selectedIndex = 0;
$find("myCDECity")._onParentChange(false);
$get("<%=dlCity.ClientID%>").disabled = true;
}
}
</script>

Hope this help.

Best Regards,

Jonathan


Jonathan Shen – MSFT:

Hi Iljones,

Based on my research, I think the best solution is to modify the source code to meet your expectation. Here is another sample, please add the code below to your source code. When the last CascadingDropDown populated , onpopulated function will be called and it will set the first CascadingDropDown's selectedIndex to be 0.

<script type="text/javascript" language="javascript">
var flag = true;
function pageLoad(sender, args){
$find("myCDECity").add_populated(onpopulated);
}
function onpopulated(sender,args){
if(flag){
flag = false;
$get("<%=dlState.ClientID%>").selectedIndex = 0;
$find("myCDECity")._onParentChange(false);
$get("<%=dlCity.ClientID%>").disabled = true;
}
}
</script>

Hope this help.

Best Regards,

Jonathan

i'll give this a go today and let you know how it goes. Thanks Jonathan


Probarly to late, but here is an answer anyway.

CS: protected void Reset_Click(object sender, EventArgs e) { CascadingDropDown1.SelectedValue = null; }

Wednesday, March 21, 2012

How can i stop my client side list view from disappearing every time i poll a web service?

I've written a page that displays some live information that is provided by a web service and then bound to a client side list view (the binding follows this example:http://atlas.asp.net/docs/Walkthroughs/GetStarted/databind.aspx). This page is updated with a client side timer that ticks every 3 seconds. The idea is that the page updates seamlessly as the web service is polled every few seconds.

This almost works, but there seems to be a delay whilst the web service is fetching the information, during which no list view is rendered. This means that every 3 seconds the table disappears momentarily, and then the new information is shown correctly. This leads to the screen looking "flickery".

My question is how can i prevent this flickering from appearing whilst the data is retrieved from the web service?

Many thanks

-Matt

Bonus Information:

Here are some code examples to make this a bit clearer. This is the code that updates the page and retrives the information from the webservice:

function PageRefreshTick() { LotItemDataService.GetInProgressLots(inProgressCallComplete); }function inProgressCallComplete(result) { document.getElementById("InProgressLotsItemListView").control.set_data(result); }
 And here are the relevant parts of the markup: 
<asp:Content ID="Content2" ContentPlaceHolderID="Zone1Content" runat="server"> <timer id="PageRefreshTimer" interval="3000" enabled="true" tick="PageRefreshTick" /> <atlas:ScriptManagerProxy id="ScriptManagerProxy" runat="server"> <services> <atlas:ServiceReference Path="LotItemDataService.asmx" /> </services> </atlas:ScriptManagerProxy><div class="ListView"> <div id="InProgressLotsItemListView"> </div> <div style="display: none;"> <div id="InProgressLotsItemListView_layoutTemplate"> <div id="InProgressLotsItemListView_layoutTemplate_templateItem"> <table border="0"> <tbody id="InProgressLotsItemListView_layoutTemplate_LotItemParent"> <tr id="InProgressLotItem" style="height: 28px; width: 599px;"> <td style="height: 28px;"> <table cellpadding="0" cellspacing="0"> <tr> <td style="width: 16px;"> <img id="InProgressIsTracked" alt="Tracked" src="../App_Themes/BCADirect/images/icons/icontracker.gif" /> </td> <td style="width: 40px;"> <a id="InProgressLotId" class="BidSessionLink"></a> </td> <td style="width: 10px;">   </td> <td style="width: 40px;"> <img id="VehicleImage" alt="VehicleImage" /> </td> <td style="width: 10px">   </td> <td style="width: 250px;"> <table> <tr> <td> <a id="InProgressCompleteDescription" class="BidSessionLink" /> </td> </tr> <tr> <td> <label id="InProgressRegistration" class="BidSessionLabel" /> </td> </tr> </table> </td> <td style="width: 10px;"> </td> <td style="width: 300px;"> <table> <tr> <td> <label id="InProgressHighestBidder" class="BidSessionLabel" /> </td> </tr> <tr> <td> <label class="BidSessionLabel">Current price: </label> <label id="InProgressCurrentPrice" class="BidSessionLabel" /> </td> </tr> </table> </td> <td style="width: 10px;">   </td> <td> <label class="BidSessionLabel" id="PlaceBidLabel">Test</label> </td> <td style="width: 100px; height: 100px;"> <label id="InProgressTimeRemaining" class="BidSessionLabel" /> </td> </tr> </table> </td> </tr> </tbody> </table> <a id="InProgress_layoutTemplate_HyperLink1" href="http://www.google.com" class="BidSessionLink"> </a> </div> </div> </div></div> <listView id="InProgressLotsItemListView" itemTemplateParentElementId="InProgressLotsItemListView_layoutTemplate_LotItemParent"> <layoutTemplate> <template layoutElement="InProgressLotsItemListView_layoutTemplate" /> </layoutTemplate> <bindings> <binding dataContext="waitingLotsItemDataSource" dataPath="data" property="data" /> </bindings> <itemTemplate> <template layoutElement="InProgressLotItem"> <image id="InProgressIsTracked"> <bindings dataPath="IsTracked" property="visible" /> </image> <hyperLink id="InProgressLotId"> <bindings> <binding dataPath="Id" property="text" /> <binding dataPath="VehicleDetailsUrl" property="navigateURL" /> </bindings> </hyperLink> <hyperLink id="InProgressCompleteDescription"> <bindings> <binding dataPath="CompleteDescription" property="text" /> <binding dataPath="VehicleDetailsUrl" property="navigateURL" /> </bindings> </hyperLink> <label id="InProgressRegistration"> <bindings> <binding dataPath="Registration" property="text" /> </bindings> </label> <label id="InProgressTimeRemaining"> <bindings> <binding dataPath="TimeRemaining" property="text" /> </bindings> </label> <label id="InProgressHighestBidder"> <bindings> <binding dataPath="HighestBidUserName" property="text" /> </bindings> </label> <label id="InProgressCurrentPrice"> <bindings> <binding dataPath="CurrentPrice" property="text" /> </bindings> </label> <label id="PlaceBidLabel"> <bindings> <binding dataPath="BidNowText" property="text" /> </bindings> </label> </template> </itemTemplate> </listView></asp:Content>

Although i didn't receive any replies through this board, I received a number of emails from my companies .net community, including this one:

The problem with the list view is a known issue with the Atlas team (not that they seem to be actively trying to fix it). I am currently working n a custom list view to try and reduce the flickering.

So there are couple of options open that you could try :-

1.Buffer your data and only redraw the list view when there is a delta in your data reducing the flicker.

2.Use the XML script data binding but draw the list view manually using atlas client side JavaScript (Here at HMV I manually create the list view using divs or a table due to the flickering issues).

3.If you are not bound to a Atlas then try http://www.telerik.com/ who has some awesome ajaxable controls that you can use.

I tried rendering the output myself with JavaScript to the innerHTML of a div tag, and this indeed fixed the problem. However this in turn introduces its own set of problems further down the line as I wanted to use animations, and using this method I have no components in the xml portion of the markup.

I guess until the underlying listview big is fixed, there is no way to move forward with this?

-Matt