I want to hide the detail table when page loaded
but when click on the triangle on master row, it displays
http://demos.kendoui.com/web/grid/detailtemplate.html
that's from the element I detect on firebug.
I suspect you could add a style="display: none;" to the main container for the detailTemplate, but that will probably throw the behavior of the Master Row triangle.
<div class="tabstrip" style="display: none;">
<ul>
<li class="k-state-active">
Orders
</li>
<li>
Contact Information
</li>
</ul>
<div>
<div class="orders"></div>
</div>
<div>
<div class='employee-details'>
<ul>
<li><label>Country:</label>#= Country #</li>
<li><label>City:</label>#= City #</li>
<li><label>Address:</label>#= Address #</li>
<li><label>Home Phone:</label>#= HomePhone #</li>
</ul>
</div>
</div>
</div>
You could instead, just hide it on page load with:
$('tr.k-master-row + tr.k-detail-row').hide();
or, just initialize the grid with the detail rows hidden when databinding occurs (probably the best solution):
//...
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function() {
this.collapseRow(this.tbody.find(">tr.k-master-row"));
},
//...
dataBound: function (e) {
var grid = e.sender;
items.each(function (e) {
var dataItem = grid.dataItem(this);
if (dataItem.SubGroups.length == 0)
grid.tbody.find("tr[data-uid=" + dataItem.uid + "].k-master-row>.k-hierarchy-cell>a").hide();
});
Related
I want to create two tab switching independent to each other in one page. This code here only allows tab switching one at a time and the content of the other tab that is not active is hidden.
HTML:
//FIRST TAB
<ul id="tab">
<li>OPTION 1</li>
<li class="select">OPTION 2</li>
</ul>
<div class="content_wrap disnon">
<p>●●●●●111</p>
<p>●●●●●222</p>
</div>
<div class="content_wrap">
<p>●●●●●111</p>
<p>●●●●●222</p>
<p>●●●●●333</p>
</div>
//SECOND
<ul id="tab">
<li class="select">OPTION A</li>
<li>OPTION B</li>
</ul>
<div class="content_wrap">
<p>●●●●●AAA</p>
<p>●●●●●BBB</p>
<p>●●●●●CCC</p>
<p>●●●●●DDD</p>
</div>
<div class="content_wrap disnon">
<p>●●●●●AAA</p>
<p>●●●●●BBB</p>
</div>
JScript:
$(function() {
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
There are a few things to check here first.
Both of these tabs have the same id. ID's are supposed to be unique, say tab1 and tab2.
It would be better if you could show us the css of this file.
However if my assumption is correct that
tab1 -> click -> show tab1 content AND
tab2 -> click -> show tab2 content.
The code is as follows.
// USING EITHER HTML5 DATA TAGS OR INDIVIDUAL ID'S
<ul class="tab" data-tab="1"> ... </ul>
<ul class="tab" data-tab="2"> ... </ul>
<div id="tabContent1" class="tabContent"></div>
<div id="tabContent2" class="tabContent" style="display:none"></div>
// SET NOT TO DISPLAY WHEN FIRST ACTIVE
<script>
$('.tab').on('click',function() {
// SELECT CLICKED TAB'S DATA (ie 1 / 2) IN THIS CASE
var tab = $(this).data('tab');
// HIDE ALL OTHER tabContent
$('.tabContent').hide();
// SHOW ONE TAB
$('#tabContent' + tab).show();
});
This has been simplified to easily be expandable for more than one tab. Simply adding more uls & divs will easily create a tab switching layout.
I made a dropdown system with razor script in Umbraco. I finally got all the children working but how do I hide the sub items that should be a dropdown list? I tried something with javascript but that seemed to open all dropdowns instead of each one individually.
Here's my code:
<div class="col-sm-3">
<div class="well well-lg span-padding extra-padding top background-light">
<ul class="nav nav-list tree">
# {
var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
}
#foreach(var item in Model.Content.Ancestor(1).Descendants("menu")) {
foreach(var ItemChild in #item.Children("hoofdstuk")) {
<li> #ItemChild.Name </li>
foreach(var Subitem in #ItemChild.Children) {
<li> #Subitem.Name </li>
if (Subitem.Children.Any()) {
foreach(var Finalitem in #Subitem.Children) {
<ul>
<li> < a href = "#Finalitem.Url" > #Finalitem.Name </a></li>
</ul>
}
}
}
}
}
}
</ul>
</div>
</div>
Javascript:
function myFunction(a) {
var itemcount = a.parentNode.getElementsByClassName("sub").length;
for (i = 0; i < itemcount; i++) {
a.parentNode.getElementsByClassName("sub")[i].classList.toggle("show");
}
}
This is what it displays:
Sub-Subtest1 and 2 needs to be hidden till we click it's ancestor which is SubTest1. Same goes for sub-subtest9.
I can't seem to get it working dynamically. If I create something with javascript it opens all the dropdown's at once and not individually.
First, I would recommend you to use Visual Studio, that will help you to fix issues with your code. You should fix your html structure and nest the elements of your list properly. You have li as direct children of li which is invalid.
<div class="col-sm-3">
<div class="well well-lg span-padding extra-padding top background-light">
<ul class="nav nav-list tree">
#{
var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
}
#foreach (var item in Model.Content.Ancestor(1).Descendants("menu"))
{
foreach (var ItemChild in item.Children("hoofdstuk"))
{
<li class="item">
#if (ItemChild.Children.Any())
{
<ul class="submenu">
#foreach (var Subitem in ItemChild.Children)
{
<li class="item">
#Subitem.Name
#if (Subitem.Children.Any())
{
foreach (var Finalitem in Subitem.Children)
{
<ul class="submenu">
<li> #Finalitem.Name </li>
</ul>
}
}
</li>
}
</ul>
}
</li>
}
}
</ul>
</div>
</div>
Then you can use jQuery to easily show the submenus. Use [children][1] to retrieve only the first level of submenus:
$(".item").click(function(){
$(this).children(".submenu").toggle(); //it will display or hide your submenu when clicking the item.
});
And your submenu should be hidden by default, you can do that with css:
.submenu{
display: none;
}
Note: to make the code more clear I would recommend you to use Razor helpers to create a recursive function for your sublists.
I'm working on a custom solution, so I thought I would ask the community if anyone has use jQuery Tabs for this purpose before.
The idea is this: I have one main panel, a form with inputs. There are multiple tabs which basically identify different records. All the records will use this form, thats why I just want to load it once, instead of for each tab.
I put a basic example of the direction I want to go. As you can see there are 3 tabs but only one panel. I want to dynamically load content into the_input depending on which tab I click. SO i don't even want to switch the panel, just the selected tab on each click.
I was thinking I need to catch the beforeActivate (http://api.jqueryui.com/tabs/#event-beforeActivate) event, identify which tab was selected, and dynamically alter the 1 visual panel accordingly.
The code isn't really working
jQuery(function($){
$("#tabs").tabs({
beforeActivate(event, ui) {
$('#msg').append('<p>'+ui.newPanel+'</p>');
//I figure what I want to do here is catch the ID of the selected tab, and use that to dynamically load content to the tab.
}
});
function fill_input(selector){
if ( selector == 1 ) {
$('#the_input').val(1);
}else if ( selector == 2 ) {
$('#the_input').val(2);
}else{
$('#the_input').val();
}
}
})
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
<div id="bol_new">
<form>
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
You could set the href for each hyperlink to bol_new as under
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
This will set the panel for each tab to the same div with id="bol_new"
Test: https://plnkr.co/edit/EGtCnmNr0c28AaT647SP?p=preview
I would advise just mocking up the tabs with CSS. You can then manipulate the form as needed.
Working example: https://jsfiddle.net/Twisty/j63uvk4q/
HTML
<div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content">
<ul class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active">
New
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 1
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 2
</li>
</ul>
<div id="bol_new" class="ui-tabs-panel ui-corner-bottom ui-widget-content">
<form>
Record:
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
JavaScript
var myData = {
records: {
bol_1: "Homer Simpson",
bol_2: "Marge Simpson"
}
}
$(function() {
$("#tabs .ui-tabs-nav li").click(function(e) {
e.preventDefault();
$("#tabs li.ui-state-active").toggleClass("ui-tabs-active ui-state-active");
$(e.target).parent().addClass("ui-tabs-active ui-state-active");
var id = $(e.target).attr("href").substring(1);
$("#the_input").val(myData.records[id]);
});
$("#tabs .ui-tabs-nav .ui-tabs-tab").hover(function(e) {
$(this).toggleClass("ui-state-hover");
}, function(e) {
$(this).toggleClass("ui-state-hover");
});
});
I am using Zurb Foundation 6 Tabs. I have a javascript question. Here is my html for a 3 tab layout.
<ul class="tabs" data-tabs id="myTabs">
<li class="tabs-title is-active">Tab 1 Info</li>
<li class="tabs-title" >Tab 2 Info</li>
<li class="tabs-title" >Tab 3 Info</li>
</ul>
<div class="tabs-content" data-tabs-content="myTabs">
<div class="tabs-panel is-active" id="panel1">
....
</div>
<div class="tabs-panel" id="panel2">
....
</div>
<div class="tabs-panel" id="panel3">
....
</div>
</div>
The tabs work great! However, I want to load content into Tab 3 only when clicked. I will be using ajax to load the content. Foundation 6 docs provide a javascript event that fires when ANY tab is clicked on. See below:
$('#myTabs').on('change.zf.tabs', function() {
console.log('Those tabs sure did change!');
});
I need an event to fire ONLY when panel3 is selected. How to do?
You can use condition inside 'change.zf.tabs' event, like this:
$('#myTabs').on('change.zf.tabs', function() {
if($('#panel3:visible').length){
console.log('Tab 3 is now visible!');
}
});
For Foundation 6 (current version is 6.2.1) you should use the following code to get the ID of the changed tab.
$('#myTabs').on('change.zf.tabs', function()
{
var tabId = $('div[data-tabs-content="'+$(this).attr('id')+'"]').find('.tabs-panel.is-active').attr('id');
alert(tabId);
});
Try to add condition on tab id you want to load content when it's selected, e.g :
$('#myTabs').on('change.zf.tabs', function() {
if ($(this).attr('id') == 'panel3')
{
//Load content here
}
});
Hope this helps.
I just came to this problem.
Ended using:
$(this).find('.is-active a').attr('id')
I'm having some luck with this in Foundation 6:
$('.tabs').on('change.zf.tabs', function(event, tab){
console.log(tab.children('a').attr('id'));
console.log(tab.children('a').attr('href'));
});
For Foundation 6 I used:
$("#section-tabs").on('change.zf.tabs', function (event, tab) {
var tabId = tab.attr("id");
})
I am using a bootstrap tabpanel like this:
<div class="row spiff_tabs_body">
<!-- Nav tabs -->
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
Using javascript I need to figure out which tab the user is on. I'm not really sure how to do this. I've read a lot about selecting the active tab, but I can't really find out how to check which tab the user has selected.
Updated:
I forgot to mention I need to be able to check in a conditional if statement which tab is selected and then do something based on which tab is active.
I need to do something like this:
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
});
var id = $('.tab-content .active').attr('id');
if (id == "instantspiff") {
alert("instantspiff");
}
else {
alert("delayedspiff");
}
</script>
check this
var id = $('.tab-content .active').attr('id');
if(id == "delayedspiff") {
alert("delayedspiff");
}
else {
alert("instantspiff");
}
when they click on a tab add this
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
});