hello i have seen a lot of example to prevent tab refreshing to the initial state,but i have no idea if it is from react bootstrap..can someone tell me how to prevent the tab active even after refreshing for bootstrap
here is the code
<Tab.Container id="left-tabs-example" defaultActiveKey="first">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="first">Tab 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">Tab 2</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="first">
<Sonnet />
</Tab.Pane>
<Tab.Pane eventKey="second">
<Sonnet />
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
What do you mean by "refreshing"? Rerender or page reload?
If latter you have to persist the value somehow and get it on page load. You can do it with localStorage for example.
https://developer.mozilla.org/de/docs/Web/API/Window/localStorage
Related
I have a react component and the columns aren't aligning side to side.
In my return statement I have:
<Row>
<Col md="6">
<CarouselPhotos />
</Col>
<Col>
<Form>
<Form.Group controlId="exampleForm.ControlInput1">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="name#example.com" />
</Form.Group>
</Form>
</Col>
</Row>
In the example image. The label email address appears correct next to the CarouselPhotos component but then the input field pushes all the way to the bottom. It should be right below email address. Any idea what I'm doing wrong?
According to the documentation:
When no column widths are specified the Col component will render equal width columns.
This caused me to assume that Col didn't have to be set in the second Col since i thought it be rendered equally. After adding Col width it now works. It displays equally.
<Row>
<Col md="6">
<CarouselPhotos />
</Col>
<Col md="6">
<Form>
<Form.Group controlId="formGroupEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
</Form>
</Col>
</Row>
I have a react component laying out a grid of other components within a tab pane, all from react-bootstrap and contained within a div that has bootstrap's nice centred, padded container going on. Unfortunately the Grid within the Tab seems to think it should extend all the way to the right-hand edge of the screen. How can I make sure it sticks within the parent div's width?
Here's the essence of the code:
render() {
return (
<div class="container">
<Tabs>
<Tab>
<Grid>
<Row>
<Col md={12}>
<Panel>
Hi
</Panel>
</Col>
</Row>
</Grid>
</Tab>
</Tabs>
</div>
);
}
Try to use Grid's fluid prop to turn the Grid from fixed-width layout into a full-width layout.
See: https://react-bootstrap.github.io/components.html#grid : Props
render() {
return (
<div class="container">
<Tabs>
<Tab>
<Grid fluid={true}>
<Row>
<Col md={12}>
<Panel>
Hi
</Panel>
</Col>
</Row>
</Grid>
</Tab>
</Tabs>
</div>
);
}
I have a GridButtonColumn in my RadGrid and I want to open a ModalPopupExtender on click event of the GridButtonColumn. Now the problem is what do I have to give in TargetControlID in my ModalPopupExtender?
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID=""
RepositionMode="RepositionOnWindowResize" PopupCo## Heading##ntrolID="TargetTemplatePanel"
BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
You can set the ModalPopupExtender's TargetControlID to pretty much any server-side control you want. Here's an example from a project of mine:
<div id="rscmain" runat="server">
<telerik:RadScriptManager ID="SM1" runat="server" EnablePageMethods="true" />
</div>
<asp:ModalPopupExtender ID="MPE1" runat="server" TargetControlID="rscmain" />
I had a nightmare getting this going.
Adding the ModalPopupExtender to a form is easy, you drop it on and tell it the two required controls parameters
PopupControlID="MyModalPanel"
TargetControlID="ButtonToLoadIt"
And it just works fine, but is triggered by a client side click of the Target Control.
If you want to do some server side code behind??? how to do it ?
The example code is shown below:
HTML CODE:
<!-- Hidden Field -->
<asp:HiddenField ID="hidForModel" runat="server" />
<asp:ModalPopupExtender
ID="WarningModal"
TargetControlID="hidForModel"
runat="server"
CancelControlID="btnWarning"
DropShadow="true"
PopupControlID="pnlIssues" >
</asp:ModalPopupExtender>
<!-- Panel -->
<asp:Panel ID="pnlIssues" runat="server"
BorderColor="Black" BorderStyle="Outset"
BorderWidth="2" BackColor="Wheat" Width="400px" Height="106px">
<center>
<h2 class="style2">
Information</h2>
<p>
<h3> <asp:Label ID="lblWarning"
runat="server"> </asp:Label></h3>
</p>
<!-- Label in the Panel to turn off the popup -->
<asp:ImageButton ID="btnWarning" runat="server"
ImageUrl="~/images/buttons/update.png" />
</center>
</asp:Panel>
C# Code
WarningModal.Show();
lblWarning.Text = "This is a popup warning";
for ref s
http://www.codeproject.com/Tips/215040/ModalPopupExtender-from-Server-Side-Code
Trying to update RadDock (open/close it) by putting it in UpdatePanel however no luck....I'm getting the following response.
189|error|500|Invalid JSON primitive: {"Top":179,"Left":583,"DockZoneID":"","Collapsed":false,"Pinned"
:false,"Resizable":false,"Closed":false,"Width":"300px","Height":null,"ExpandedHeight":0,"Index":-1}
.|
Here is the code:
<asp:UpdatePanel ID="upanelDock" runat="server">
<ContentTemplate>
<telerik:RadDock ID="RadDock1" runat="server" Width="300px">
<TitlebarTemplate>
<h2>
this is a dock</h2>
</TitlebarTemplate>
<ContentTemplate>
some content here
<br />
some content here
<br />
some content here
<br />
</ContentTemplate>
</telerik:RadDock>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnUpdate" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="lbtnUpdate" runat="server" OnClick="lbtnUpdate_Click">update</asp:LinkButton>
Code behind:
protected void lbtnUpdate_Click(object sender, EventArgs e)
{
if (this.RadDock1.Closed)
this.RadDock1.Closed = false;
else
this.RadDock1.Closed = true;
}
What am I doing wrong here?
UPDATE: You are not doing anything wrong in your code. I was able to duplicate this problem using both UpdatePanel and RadAjaxManager. According to Telerik support, this is a "limitation" in the RadDock control. More like a bug in my opinion.
Here's what it says in their Support Page Forum: Non-docked Docks cloned plus Invalid JSON primitive
The RadDock control is not a standard
control and there are some limitations
when it is updated via ajax. If you
want to update a RadDock via ajax you
should update all RadDockZones and all
RadDocks should be docked.
The error you experience is due to
that you update a floating RadDock
with AJAX. When dragging the dock you
move it outside the update panel and
this causes AJAX not working properly
as it attempts to recreate the dock at
the place it was previously located.
In this way two docks with the same id
appear on the page and this leads to
an exception. This is a common problem
for all controls which could be moved
in the DOM.
I was able to make your code work by wrapping the RadDock inside a RadDockZone and setting the DockMode property to "Docked". If however, I drag the dock out of the zone, leave it floating and click the "Update" button, the error reappears.
<asp:UpdatePanel ID="upanelDock" runat="server">
<ContentTemplate>
<telerik:RadDockZone runat="server">
<telerik:RadDock ID="RadDock1" runat="server" Width="300px"
DockMode="Docked">
<TitlebarTemplate>
<h2>
this is a dock
</h2>
</TitlebarTemplate>
<ContentTemplate>
some content here
<br />
some content here
<br />
some content here
<br />
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnUpdate" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="lbtnUpdate" runat="server"
OnClick="lbtnUpdate_Click">update</asp:LinkButton>
I have a couple RadDocks floating inside a RadDockLayout. Ajax works if I update the RadDock, the RadDockLayout, or the main panel that wraps the RadDockLayout through the RadAjaxManager object.
Ex:
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="mainPanel" />
</UpdatedControls>
</telerik:AjaxSetting>