I've got some strange problems with the kendo Grid.
I recorded a very short video to show you what is exactly happening:
gif
Grid code:
<div class="demo-section k-content wide">
#(Html.Kendo().Grid(Model.Usage)
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Country);
columns.Bound(c => c.Users);
})
.Scrollable()
.Pageable(pageable => pageable
.PageSizes(true)
.ButtonCount(5)
)
)
</div>
This grid is placed in a Partial View, and the funniest thing is that if I will paste this code to normal View, the toolbar is displaying good
#Edit
My goal is 3 Partial Views -> 1 with kendo Chart, 2 with another kendo Chart and 3 with this kendo Grid.
I pasted all to first partial and the same to second partial. In first everything is displaying fine:
screen
But when I will switch to the second partial, my charts are narrower and problem this grid appears:
screen
To display these Partial I'm using Bootstrap nav:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="columnChart-tab" data-toggle="tab" href="#columnChart" role="tab" aria-controls="columnn" aria-selected="true">Partial 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="lineChart-tab" data-toggle="tab" href="#lineChart" role="tab" aria-controls="line" aria-selected="false">Partial 2</a>
</li>
</ul>
<br />
<div class="tab-content">
<div class="tab-pane fade show active" id="columnChart" role="tabpanel" aria-labelledby="columnChart-tab">
<partial name="~/Pages/Shared/_ColumnChart.cshtml" model="Model" />
</div>
<div class="tab-pane fade" id="lineChart" role="tabpanel" aria-labelledby="lineChart-tab">
<partial name="~/Pages/Shared/_LineChart.cshtml" model="Model" />
</div>
</div>
When I will set second tab default as active, I have problem with the first one then
Related
I create a nested layout in blazer.
blazor route to one of the navigation menus, and there is another menu in it.
When I click the navigation menu, it is routed to a specific page,
There is another menu on the routed page.
Clicking that menu loads the newly routed page in the nested layout.
However, clicking the topmost menu again loads the top route into the innermost layout.
Here is my code.
MainLayout.razor:
#inherits LayoutComponentBase
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
About
</div>
<div class="content px-4">
#Body
</div>
</div>
NavMenu.razor:
<li class="nav-item px-3">
<NavLink class="nav-link" href="sub">
<span class="oi oi-list-rich" aria-hidden="true"></span> Sub
</NavLink>
</li>
SubMenu.razor:
#page "/sub"
#layout MainLayout
#inherits LayoutComponentBase
<h3>SubLayout</h3>
<div style="width:20%">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="/sub/mypage" Match="NavLinkMatch.All">
<span class="oi oi-account-login" aria-hidden="true"></span> go to sub of sub
</NavLink>
</li>
</ul>
</div>
<div style="width: 40%; height:40%; border:solid red">
#Body
</div>
Mypage.razor:
#page "/sub/mypage"
#layout SubLayout
<div >
<h3>This is Mypage</h3>
</div>
This is the execution result:
Why is the page in the top navigation menu loaded into the sublayout?
Is there any way to prevent this?
Without seeing your SubLayout you are specifying in Mypage.razor I think the issue is that your trying to use a routable component as a layout. I basically just separated these.
SubMenu.razor
#page "/sub"
<SubLayout />
SubLayout.razor
Note the nesting by specifying #layout MainLayout
#layout MainLayout
#inherits LayoutComponentBase
<h3>SubLayout</h3>
<div style="width:20%">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="/sub/mypage" Match="NavLinkMatch.All">
<span class="oi oi-account-login" aria-hidden="true"></span> go to sub of sub
</NavLink>
</li>
</ul>
</div>
<div style="width: 40%; height:40%; border:solid red">
#Body
</div>
Docs are here
I have a menu on my layoutpage (MVC) that is on the left side of the page. To the right I have a container that holds the bodypage.
When the sidemenu expands the body expands too. I want the menu to expand but not the body.
How can I rectify this?
<div id="divLeftMenu">
<ul class="nav nav-pills nav-stacked" id="stacked-menu">
<li>
<a class="nav-container" data-toggle="collapse" data-parent="#stacked-menu" href="#education"><i class="fa fa-graduation-cap"></i>Utbildning<div class="caret-container"><i class="fa fa-caret-down"></i></div></a>
<ul class="nav nav-pills nav-stacked collapse" id="education">
<li data-toggle="collapse" data-parent="#education" href="#education1">
<a class="nav-sub-container">Participants</a>
</li>
</ul>
</div>
<div class="container body-content" id=divBodyContent>
</div>
I want #divLeftMenu to expand but #divBodyContent should not expand.
I want to build a Bootstrap styled dropdown and #HTML.Helper. I know there is a Bootstrap.MVC package, but we don´t wanna go into non standard packages.
We first tried the following:
#Html.DropDownListFor(model => model.idSelectedEnterprise, Model.Enterprises, new { #class = "dropdown" })
But this didn´t gave us a real bootstrap style. On the other hand, if we use a normal bootstrap code like from the bootstrap documentation:
<div class="dropdown">
<button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
We don´t know how to plug in the #Model helper that will return the current selected item from dropdown.
This may sound basic, but we need help.
Not sure why the insistence on "non-standard packages" - Bootstrap is built (and intended) to be extended as the community requires.
What you are looking for has a few different options; I prefer Bootstrap Select: http://silviomoreto.github.io/bootstrap-select/.
It also has a NuGet package: https://www.nuget.org/packages/bootstrap-select
It's simple to setup:
Create your <select> with the .selectpicker class.
#Html.DropDownListFor(m => m.Foo, Model.Foos, htmlAttributes: new { #class="selectpicker" })
Then call:
$('.selectpicker').selectpicker();
I have a .net c# webform using the JQueryUI tabs Example as per the code below:
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div id="divTab1">
Showing Tab 1
</div>
<div id="divTab2">
Showing Tab 2
</div>
<div id="divTab3">
Showing Tab 3
</div>
<div id="divTab4">
Showing Tab 4
</div>
</div>
What I would like to achieve, is based on a condition in my code behind, is to hide specific tabs.
How would I go about doing this?
You can call the JQuery hide() method:
http://api.jquery.com/hide/
In code-behind, evaluate your conditions and register the hide() method invocation with ClientScriptManager.RegisterStartupScript method:
http://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerstartupscript.aspx
I have 3 tabs in my Page and I used JQuery UI for tabs.
<div id="tabs" style="text-align:right;">
<ul>
<li class="myTab">
Main Information</li>
<li class="myTab"><a href=<%= Url.Action("GetPartialView","Contractors") %> >Contractors</a></li>
<li class="myTab"> Consultants </li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
There is a "Save" button in each tab.The problem is that when for example button "Save" of contractors tab was clicked the page redirect to http://localhost:1347/xxxxx/GetPartialView and didn't fire any method.I want to save data and show user a message that shows data was saved completely.How can I do it?
Do you have the [HttpPost] attribute on top of whatever action is being called to load that page?