Programmatically exit gridviews edit mode when changing tabs

Hi,

I have a gridview in a tabpanel and I would like to have it operate such that if the user puts the gridview in edit mode and then clicks to another tab, then the gridview exits edit mode. I tried this:

Protected Sub tabContPersonnelAdmin_ActiveTabChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles tabContPersonnelAdmin.ActiveTabChangedgvPersonnel.EditIndex = -1gvPersonnelType.EditIndex = -1End Sub

... but that has no effect.

Any ideas, anyone?

Heck, while I'm at it, I'd also like to be able to exit the gridview's edit mode when a panel with a collapsiblepanel extender attached to it is clicked.

I appreciate anyone's help!

Hi,

By default, the ActiveTabChanged event isn't fired on the server when another tab is clicked on the client. You need to set AutoPostBack property of the TabContainer to true.

For CollasiblePanel, it doesn't have build-in support for server side event when it's expanded or collapsed, so you may need to invoke __doPostback method on the client to force a postback. And pass different arguments in it.

Hope this helps.

Thanks, Raymond!

I'll see what I can do with that info.

Regards

Programmatically Scroll GridView Control

I have an AJAX enabled web form with several data-filled GridView controls. The users accessing this web app will navigate the site via touch-screen monitors (i.e.: no mouse). As a result, I need an easy way for them to scroll the GridViews when the data is not visible. I want them to click on a button, which will then accordingly scroll the grid up or down. I have tried all the various combinations of the suggestions that I could find:

GridView.Rows(20).RowState = DataControlRowState.Selected

and

GridView.Rows(20).Focus()

and

GridView.SelectedIndex = 20

and

'Set focus to a hidden button control (column)
GridView.SelectedRow.Cells(5).Focus()

If I could set focus to a particular row, I think it should scroll to show that row. This would be fine, but nothing seems to work. Anyone have any suggestions on how I could programatically scroll a GridView control?

Thanks!

Hi AxeRose,

Did you find any solution for this problem?

I have asimilar purpose and meantime I don't have no idea, how to do this.

No, I never found a solution. I ended up using Paging instead -- which works fine for my situation.

Good luck!

I do not know if this works (and probably only in IE or in everything but IE ) but there is a javascript function called scrollIntoView that you could try. Just a suggestion.

Seehttp://forums.asp.net/t/1162570.aspx

You can use the JavaScript function: scrollTo(...)

-Damien

<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_beginRequest(beginRequest);

function beginRequest()
{
prm._scrollPosition = null;
}
</script>

http://forums.asp.net/t/1156877.aspx

Pulling hair out! Cannot get GridView & Search Button to work with Update Panel

I don't know what else to do. As far as I know, my web.config is set up fine. I get no errors as to the ASP.NET AJAX controls and I feel I have tried everything I know, which isn't much yet about UpdatePanels but there doesn't seem to be that much to know after reading

Here's my code below. When I click the search button, I still am getting a full page postback:

<formid="Form1"runat="server"method="post">

<asp:scriptmanagerid="ScriptManager1"enablepartialrendering="true"runat="server"/>

...more code and then

<tdclass="narrowTableWrapperCell"colspan="8"align="left">

<asp:updatepanelid="gvSearchResultsUpdatePanel"runat="server"updatemode="always">

<contenttemplate>

<asp:updateprogressid="UpdateProgressSearchResults"runat="server">

<progresstemplate>

Working......

</progresstemplate>

</asp:updateprogress>

<asp:buttonid="Search"runat="server"onclick="Search_Click"usesubmitbehavior="false"width="113px"/>

<asp:gridviewid="SearchResults"runat="server"onpageindexchanging="SearchResults_PageIndexChanging"onrowcreated="SearchResults_OnRowCreated"

onsorting="SearchResults_Sorting">

<columns>

<asp:templatefielditemstyle-horizontalalign="left">

<headertemplate>

<asp:checkboxid="cbSelectAll"runat="server"textalign="left"/>

</headertemplate>

<itemtemplate>

<asp:checkboxid="cbRow"runat="server"/>

<asp:hyperlinkid="hyName"runat="server"navigateurl='<%# FormatUrl(Eval("MyID"))%>'text='<%# Eval("FullName")%>'/>

</itemtemplate>

</asp:templatefield>

<asp:boundfielddatafield="Phone"headertext="Phone"htmlencode="False"itemstyle-horizontalalign="left"readonly="True"sortexpression="Phone"/>

<asp:boundfielddatafield="HomePhone"headertext="Other Phone"htmlencode="False"itemstyle-horizontalalign="left"readonly="True"sortexpression="HomePhone"/>

<asp:boundfielddatafield="Email"headertext="Email"htmlencode="False"itemstyle-horizontalalign="left"readonly="True"sortexpression="Email"/>

<asp:boundfielddatafield="AlternateEmail"headertext="Alt Email"htmlencode="False"itemstyle-horizontalalign="left"readonly="True"sortexpression="AlternateEmail"/>

<asp:boundfielddatafield="PrimaryAddress"headertext="Primary Address"htmlencode="False"itemstyle-horizontalalign="left"readonly="True"sortexpression="PrimaryAddress"/>

<asp:boundfielddatafield="ShippingAddress"headertext="Shipping Address"htmlencode="False"itemstyle-horizontalalign="left"readonly="True"sortexpression="ShippingAddress"/>

</columns>

</asp:gridview>

</contenttemplate>

</asp:updatepanel>

</td>

...rest of aspx

My Webconfig:

<?xmlversion="1.0"?>

<configuration>

<!-- ASP.NET AJAX Settings | Do not remove-->

<sectionGroupname="system.web.extensions"type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

<sectionGroupname="scripting"type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

<sectionname="scriptResourceHandler"type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"requirePermission="false"allowDefinition="MachineToApplication"/>

<sectionGroupname="webServices"type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

<sectionname="jsonSerialization"type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"requirePermission="false"allowDefinition="Everywhere" />

<sectionname="profileService"type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"requirePermission="false"allowDefinition="MachineToApplication" />

<sectionname="authenticationService"type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"requirePermission="false"allowDefinition="MachineToApplication" />

</sectionGroup>

</sectionGroup>

</sectionGroup>

<!-- End ASP.NET AJAX Settings-->

</configSections>

<system.web>

<!-- ASP.NET AJAX Settings | Do not remove-->

<pages>

<controls>

<addtagPrefix="asp"namespace="System.Web.UI"assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<addtagPrefix="asp"namespace="System.Web.UI.Controls"assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<addtagPrefix="ajaxToolkit"namespace="AjaxControlToolkit"assembly="AjaxControlToolkit"/>

<addtagPrefix="iu"tagName="Footer"src="~/Components/Footer.ascx" />

<addtagPrefix="iu"tagName="Header"src="~/Components/header.ascx" />

<addtagPrefix="iu"tagName="Navbar"src="~/navbar.ascx" />

</controls>

</pages>

<compilationdebug="true">

<assemblies>

<addassembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

</assemblies>

</compilation>

<!-- End ASP.NET AJAX Settings-->

<httpHandlers>

<!-- ASP.NET AJAX Settings | Do not remove-->

<removeverb="*"path="*.asmx"/>

<addverb="*"path="*.asmx"validate="false"type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<addverb="*"path="*_AppService.axd"validate="false"type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<addverb="GET,HEAD"path="ScriptResource.axd"type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"validate="false"/>

<!-- End ASP.NET AJAX Settings-->

<addpath="ChartAxd.axd"verb="*"type="Dundas.Charting.WebControl.ChartHttpHandler"validate="false" />

</httpHandlers>

<!-- ASP.NET AJAX Settings | Do not remove-->

<httpModules>

<addname="ScriptModule"type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

</httpModules>

<!-- End ASP.NET AJAX Settings-->

<xhtmlConformancemode="Legacy"/>

</system.web>

<!-- ASP.NET AJAX Settings | Do not remove-->

<system.web.extensions>

<scripting>

<webServices>

<!-- Uncomment this line to customize maxJsonLength and add a custom converter-->

<!--

<jsonSerialization maxJsonLength="500">

<converters>

<add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>

</converters>

</jsonSerialization>

-->

<!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate.-->

<!--

<authenticationService enabled="true" requireSSL = "true|false"/>

-->

<!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved

and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and

writeAccessProperties attributes.-->

<!--

<profileService enabled="true"

readAccessProperties="propertyname1,propertyname2"

writeAccessProperties="propertyname1,propertyname2" />

-->

</webServices>

<!--

<scriptResourceHandler enableCompression="true" enableCaching="true" />

-->

</scripting>

</system.web.extensions>

<!-- End ASP.NET AJAX Settings-->

</configuration>

You forgot to add triggers. See the other post you sumited on this subject. I gave you an example code for you to use.

put an AutoPostBack=true control inside a updatepanel?

Hi, All:

Just upgrade to AJAX. Everything works greate. Maybe this is a simple question.

I have a gridview which is inside in a updatepanel. then I have an dropdownlist inside a ItemTemplate of my GridView and this the autopostback attribute of this ddl is set to true. I have a onselectedindexchanged event to do something and refresh the gridview (old fashion way). Does this autopostback= true will refresh the whole page ( I have other controls on this page except theis gridview). I tried and It looks like it just refresh the gridview only. Am I right? If I set the autopostback=false, then nothing happened. I can not put this ddl into Triggers since it is an control in the itemtemplate of the gridview

Another question, with this ddl index changed event, I want to change partial of the gridview only, say show or hide a label in another itemtemplate, what should I do? put the updatepanel inside the itemtemplate??

Thanks

-rockdale

Hello rockdale,

Question: *** I tried and It looks like it just refresh the gridview only. Am I right? ***
YES, since it's inside the UpdatePanel. Leave your AutoPostBack=True.

Question: *** I want to change partial of the gridview only, say show or hide a label in another itemtemplate ***
Step1: *** onselectedindexchanged event to do something and refresh the gridview (old fashion way). ***

Sample:
<asp:gridview id="gridview1"... >
<columns>
<asp:templatefield>
<itemtemplate>
<asp:Label id="lblName" Text="John Smith" runat="server" />
</itemtemplate>
...

At Step1, you can hide or show part of your gridview.

dim ctrl as control
ctrl = controlfinder.fincontrol(me.gridview1, "lblName")
if not ctrl is nothing then
ctype(ctrl, label).visible = true or false
end if

WS

question about modalpopupextender inside a gridview not working well?

hey all
can someone answer me why one works and the other doesnt?

this one works
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lb1" runat="server" Text="+Add"></asp:LinkButton>
<asp:Panel runat="server" ID="addPanel" style="display:none">
add this: <asp:TextBox runat="server" ID="toAdd" Text="orig text"></asp:TextBox><br />
<asp:Button ID="addButt" runat="server" OnClick="addNote" Text="addButt" />
</asp:Panel>
</p
<AjaxToolkit:ModalPopupExtender ID="mpe1" runat="server"
TargetControlID="lb1"
PopupControlID="addPanel"
>
</AjaxToolkit:ModalPopupExtender>
</contenttemplate>
</asp:UpdatePanel
but this one does not work
<asp:GridView ID="gv" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>

<asp:LinkButton ID="lb2" runat="server" Text="+Add2"></asp:LinkButton>
<asp:Panel runat="server" ID="addPanel2" style="display:none">
add this: <asp:TextBox runat="server" ID="toAdd2" Text="orig text2"></asp:TextBox><br />
<asp:Button ID="addButt2" runat="server" OnClick="addNote" Text="addButt2" />
</asp:Panel>
</p
<AjaxToolkit:ModalPopupExtender ID="mpe2" runat="server"
TargetControlID="lb2"
PopupControlID="addPanel2"
>
</AjaxToolkit:ModalPopupExtender>

</ItemTemplate></asp:TemplateField>
</Columns></asp:GridView
and this does not work either
<asp:UpdatePanel runat="server" ID="up2">
<ContentTemplate>
<asp:GridView ID="gv2" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>

<asp:LinkButton ID="lb2" runat="server" Text="+Add2"></asp:LinkButton>
<asp:Panel runat="server" ID="addPanel2" style="display:none">
add this: <asp:TextBox runat="server" ID="toAdd2" Text="orig text2"></asp:TextBox><br />
<asp:Button ID="addButt2" runat="server" OnClick="addButt_Click" Text="addButt2" />
</asp:Panel>
</p
<AjaxToolkit:ModalPopupExtender ID="mpe2" runat="server"
TargetControlID="lb2"
PopupControlID="addPanel2"
BackgroundCssClass="modalBackground"
DropShadow="true"
>
</AjaxToolkit:ModalPopupExtender>

</ItemTemplate></asp:TemplateField>
</Columns></asp:GridView>
</ContentTemplate>
</asp:updatepanel>

what happens in the the ones that dont work (ie, with the gridview)
is that the debugger throws an error that the addButt procedure cant find the textbox text

pls help!
i would love the third example to work

toy

welll did you give us the code for that procedure?

If textbox is in gridview you must use: ((TextBox)NameofGridView.FindControl("NameofTexBox")).Text - this is to call the text contained in the text box ...

thanks for the quick response

here is the code- behind

protected void addButt_Click(object sender, EventArgs e)
{
int uid = 1;

string newNote = "note";
newNote = toAdd.Text;

// suggested above but doesnt work
// newNote = ((TextBox)GridView2.FindControl("toAdd")).Text;

if (!string.IsNullOrEmpty(newNote))
{

// setup connx
SqlConnection conn = new SqlConnection(cs);
conn.Open();

string sql = "insertnote";
SqlDataAdapter adapter = new SqlDataAdapter(sql, conn);
SqlCommand cmd = new SqlCommand(sql);
cmd.CommandType = CommandType.StoredProcedure;

cmd.Parameters.Add(new SqlParameter("@.note", newNote));
cmd.Connection = conn;

int numRowsAffected = cmd.ExecuteNonQuery();
conn.Close();

}
}

but correct me if im wrong - i dont think the code-behind really matters
because it works without the gridview
once i put the MPE in the gridview - thats when it breaks

also i tried your suggestion and that didnt work either
i think its cuase the textbox is in the MPE panel and not the gridview

Question about using AJAX to update a GridView

I'm pretty new to AJAX, but so far I have managed to get a web page working that calls a web service, and the web service returns an array of objects. I would like to use those objects to populate a GridView. But so far, I have been unable to find a way to do that from the javascript on the page. Is this possible?

Hi Ian,

The Microsoft GridView does not have that ability currently. If you're interested, there are other 3rd party grids out there that currently provide a client-side model for adding rows.

-Tony

hi Ian,

did you tried to use ObjectDataSource? take a look at it this linkhttp://www.gridviewguy.com/ArticleDetails.aspx?articleID=139 may be helpful to you.

regards,

satish.

OK, since there's no easy way to do this now, and I don't have the budget for a pre-packaged control, I just did it manually with good old HTML tables and javascript. Thanks for the help though.

Question About using a modal popup for each row in a gridview

Hello, I'm trying to have a modalpopup control fire in a gridview, but I dont know how to approach the problem. Basically I have a linkbutton in each row of my gridview. The code for this is:

<asp:ButtonField HeaderText="Primary Subject" SortExpression="subject" ButtonType="Link" commandname="Subject" DataTextField="subject" />

which does not have an ID attribute, but of course modal popup control needs the attribute TargetControlID="something"

How do I make the buttonfield have an id? or be able to use it inside a modal popup?

Thanks

Use a TemplateField with a LinkButton instead.

Question About using a modal popup for each row in a gridview

Do you really need the trigger (the button is inside the panel, so it should trigger without it)?

Does it work if you remove the Popup extender?

Question using the CollapsiblePanelExtender

Hi,

I am using a CollapsiblePanelExtender within a GridView cell and it works ok.

WhatI would like to happen though is that when the panel is expanded itdoes so over the top of its container control (hosting cell) so that itdoes not expand the entire GridView row to the same height as theCollapsiblePanelExtender - I hope that makes sense. Is this possible oris there another/better way to achieve this?

Many thanks in advance.

Steve

Hi SteveJR,

Based on your description, I think you should not use CollapsiblePanelExtender . HoverMenuExtender , PopupControlExtender and DropDownExtender are the better choices. They also can work inside the GridView. You can find the pretty samples inside the AJAX Control Toolkit's source code.

Best regards,

Jonathan

Question: Firing two requests with one user interaction.

I have two DropDownList controls (ddl1 and ddl2) on my webpage and a GridView control. When the user makes a selection in ddl1, I should retrieve values for ddl2 and also update the GridView control using the selected value. My GridView takes about 5 to 6 secs to load, in the mean time the ddl2 shows the old items, it gets updated only when the GridView load is complete (i.e. the server returns the result). Is there a way that I update the ddl2 on the screen first and then fire a request from within the code and update the GridView.

In a nutshell, can I initiate two consecutive requests for one user selection on the UI?, and can I update the page after the 1st request is done and before the second request is fired?

Thanks.

Beware of annoying the user, but...

Yes. Set a commandargument for your button if not is postback. The command argument would be "DDL". When the user clicks, check the command argument. if it is one, do the ddl update, write a javascript to the page using the clientscript getpostbackreference (see the msdn page for more info). Update the commandargument on the button on the way back out. The javascript should essentially call the button using the postbackreference. When the button event is handled, reset the command argument.

Good luck, and let me know if this helps by setting the post as answered.

--JJ

Place ddl2 and the gridview each in their own updatepanel with UpdateMode set to "Conditional". Then set ddl1 as an AsynchPostBackTrigger for both updatepanels. They should then each update at their own pace.

The problem with that is, both the ddl2 and GridView get updated only at the same time. My intention is to update the ddl2 on the browser and then later update the gridview. i.e. the ddl2's change should be immediate and may not wait for the GridView to get updated (which might take longer as the DataBind for the GridView takes a bit longer).

This might involve two separate requests behind the scenes after the user selection in ddl1 changes.

Thanks.

I don't a have button control, I have two dropdowns (ddl1 and ddl2) and one GridView control.

Once the selection in the ddl changes, my intention is to update the ddl2 on the browser (needs values from a SQL Database) and then later update the gridview. i.e. the ddl2's change should be immediate and may not wait for the GridView to get updated (which might take longer as the DataBind for the GridView takes a bit longer).

This might involve two separate requests behind the scenes after the user selection in ddl1 changes. And the question is how?

Thanks.

As before, place ddl2 and the gridview in their own updatepanels with UpdateMode="Conditional". Set ddl1 as an AsynchPostBackTrigger for ddl2's updatepanel. That will cause it to update whenever ddl1 changes (make sure you have autopostback="true" on ddl1).

Now, in the ddl2_DataBound event in the code-behind, call the Update() method of the gridview's updatepanel.

If you are not using AJAX, you can use the DDL on selected index changed event in the same way that I described.

--JJ

But there isn't a command argument you can tie to in on the dropdown list. Create a viewstate field to store the "step" of the process you are working on.

Viewstate("DoWhat") = "DDL"

for the page load when it is not a postback

Viewstate("Dowhat") = "GridView"

for the postback if you just handled the DDL refresh.

Here is some code with labels being the refresh targets.

public partialclass doublepostback : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e) {if (!IsPostBack) { ViewState["DoWhat"] ="first"; }else {if ((string)ViewState["DoWhat"] =="second") { doNext(); } } }private void doNext() { Label2.Text ="Set the Second one"; ViewState["DoWhat"] ="first"; mybody.Attributes.Remove("onload"); }protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) {string script; script = @."<script language=""javascript"" type=""text/javascript""> function doNext(){ " + ClientScript.GetPostBackEventReference(Page,"reposting") + @."} </script> "; ClientScript.RegisterClientScriptBlock(typeof(System.String),"repost", script); Label1.Text ="Set the first one"; ViewState["DoWhat"] ="second"; mybody.Attributes.Add("onLoad","doNext();"); }}