I have some problems with nested repeaters. I have the following markup
<asp:UpdatePanel ID="upSupportDownloads" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="five-col">
<asp:Repeater ID="rep1" runat="server">
<ItemTemplate>
<asp:Repeater ID="rep2" runat="server">
<ItemTemplate></ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
...
It's not a working code, it's an example to understand my structure.
I can't access rep2 from my code behind. I can call rep1. But rep2 is invisible for me.
You need to find the nested repeater in the OnItemDataBound event of your main repeater. like this:
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
DataRowView row = (DataRowView)e.Item.DataItem;
Repeater nestedRepeater = e.Item.FindControl("NestedRepeater") as Repeater;
nestedRepeater.DataSource = getMyData();
nestedRepeater.DataBind();
}
Related
When I implement my ember web using material design lite. The following problems exist.
1.The header displays incorrect (the title is disappeared).
2.The drawer cant display in full-screen too.
Here is my code
application.hbs
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="demo-drawer-header">
<div class="demo-avatar-dropdown">
<span>hello#example.com</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
{{#link-to "mytask" class="mdl-navigation__link"}}<i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">home</i>My Task{{/link-to}}
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Inbox</a>
</nav>
</div>
{{outlet}}
</div>
mytask.hbs
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">My Task</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>
<main class="mdl-layout__content mdl-color--grey-100">
<div class="mdl-grid demo-content">
</div>
</main>
ember-cli-builds.js
/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
});
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
app.import('bower_components/mdl/material.min.css');
app.import('bower_components/mdl/material.min.js');
app.import('vendor/styles.css');
return app.toTree();
};
Is it possible to have an if / else statement which does not render any html in a view similar to knockout:
<!-- ko if: someExpressionGoesHere -->
but it needs to be on an element
Yes, but if v-if conditional is false, it's not added to DOM tree.
HTML
<div id="main"></div>
JavaScript
new Vue({
el: "#main",
template: '<div v-if="name"><span v-text="name"></span></div>',
data: {
// name: "bob"
}
});
console.log(document.body.innerHTML);
// <div id="main"><!--vue-if--></div>
Still not good for you?
I know the question was already answered, but thought I would pass along something I use, now that I am writing sites with Vue (which I love.) I am a fan of Knockout and have many sites written in it using the:
<!-- ko if: someExpressionGoesHere -->
You could do a similar thing in Vue like this:
<template v-if="someExpressionGoesHere">
<p>Expression is True</p>
</template>
<template v-else>
<p>Expression is False</p>
</template>
The templates will not render anything to the page. The resulting html will be a single p of the 'Expression is xxx'.
I think it is a bit more clear of what the intent of the code is here than the actual answer to this post IMHO.
you can also use this way to write if else condition in vue.js
<template>
<div id="app">
<p v-if="someConditionHere">Condition True</p>
<p v-else>Condition False</p>
</div>
</template>
Is there a simple way to accomplish this using dojo (jQuery would be easier for me but I have to use dojo): I have a simple unordered list. I don't want dojo to style the list (as it might if I used some widget). When I click a link on the list I want to show a div associated with the link. Then if I click another link in the list the first div hides and that one shows.
<div id="content">
<h2>Header</h2>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<div id="sub_content1" style="display:none;">
<h3>Sub Content Header 1</h3>
<p>Lorem ipsum veritas britas conflictum civa</p>
</div>
<div id="sub_content2" style="display:none;">
<h3>Sub Content Header 2</h3>
<p>Lorem ipsum mobius ceti</p>
</div>
<div id="sub_content3" style="display:none;">
<h3>Sub Content Header 3</h3>
<p>Lorem ipsum citrus pecto</p>
<ul>
<li>Lemons</li>
<li>Limes</li>
</ul>
</div>
</div><!-- end of #content -->
So in fact you're creating your own tabcontainer? If you really want to do it yourself you should probably need something like this:
require(["dojo/ready", "dojo/on", "dojo/dom-attr", "dojo/dom-style", "dojo/query", "dojo/NodeList-dom"], function(ready, on, domAttr, domStyle, query) {
ready(function() {
query("ul li a").forEach(function(node) {
query(domAttr.get(node, "href")).forEach(function(node) {
domStyle.set(node, "display", "none");
});
on(node, "click", function(e) {
query("ul li a").forEach(function(node) {
if (node == e.target) {
query(domAttr.get(node, "href")).forEach(function(node) {
domStyle.set(node, "display", "block");
});
} else {
query(domAttr.get(node, "href")).forEach(function(node) {
domStyle.set(node, "display", "none");
});
}
});
});
});
});
});
I'm not sure how familiar you are with Dojo, but it uses a query that will loop all links in lists (with the dojo/query and dojo/NodeList-dom modules) (you should provide a classname or something like that to make it easier). Then it will, for each link, retrieve the div corresponding to it and hide it, it will also connect a click event handler to it (with the dojo/on module).
When someone clicks the link, it will (again) loop all the links, but this time it's doing that to determine which node is the target one and which isn't (so it can hide/show the corresponding div).
I made a JSFiddle to show you this. If something is still not clear you should first try to look at the reference guide of Dojo since it really demonstrates the most common uses of most modules.
But since this behavior is quite similar to a TabContainer, I would recommend you to look at the TabContainer reference guide.
ItemCommand contains RepeaterCommandEventArgs which has two important fields:
CommandName
CommandArgument
how to get Button event,get asp:DropDownList select values
<asp:FormView runat="server" id="fwHotelDetails" DataKeyNames="id" OnDataBound="fwHotelDetails_DataBound" OnModeChanging="fwHotelDetails_ModeChanging" >
<ItemTemplate>
<asp:Repeater runat="server" id="repScore">
<ItemTemplate>
<asp:DropDownList ID="ddlnumber" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
<asp:LinkButton ID="saveButton" runat="server" CausesValidation="False" CommandName="Edit" CommandArgument='<%# Eval("id")%>' Text="Edit" />
</ItemTemplate>
</asp:Repeater>
<EditItemTemplate>
Test test, anything??
</EditItemTemplate>
</ItemTemplate>
</asp:FormView>
The RepeaterCommandEventArgs argument contains a property called Item. From this property you can access the method FindControl().
So your code would look like this:
void repScore_ItemCommand(Object sender, RepeaterCommandEventArgs e) {
DropDownList ddl = (DropDownList)e.Item.FindControl("ddlNumber");
string selectedValue = ddl.SelectedValue;
}
Also, don't forget to wire up your repeater to handle the event:
<asp:Repeater ... OnItemCommand="repScore_ItemCommand" .... >
I have a task to convert the following ASP.Net slide show to SharePoint 2007 and I was wondering if any of you can offer some pointers how to do it most efficiently. My SP environment is a small farm SQL + Web/SP server. I've built a small handful of custom data driven web parts so I know how to develop and publish. What I'm having difficulties with, is the web service that this sample app uses and how to make it work in SP, specifically, how to access my custom list that contains the images that will vary in members.
Here is what the aspx file looks like:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebApplication3._Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
Slide Show Example
<div style="text-align: center;" >
<asp:Image ImageUrl="images/Slide1.JPG" ID="Image1" runat="server" alt="image" height="300" Width="450"/>
<br />
<asp:Button ID="prevButton" runat="server" Text="Prev" />
<asp:Button ID="playButton" runat="server" Text="Play" />
<asp:Button ID="nextButton" runat="server" Text="Next" />
<asp:SlideShowExtender
ID="SlideShowExtender1" runat="server"
TargetControlID="Image1"
SlideShowServiceMethod="GetSlides"
SlideShowServicePath="SlideShowService.asmx"
AutoPlay="true"
PlayInterval="4000"
NextButtonID="nextButton"
PlayButtonID="PlayButton"
PlayButtonText="Play"
StopButtonText="Stop"
PreviousButtonID="prevButton"
Loop="true" />
</div>
</p>
... and the webservice:
namespace WebApplication3
{
[WebService(Namespace = "http://microsoft.com/webservices/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService()]
public class SlideShowService : System.Web.Services.WebService
{
[WebMethod]
public AjaxControlToolkit.Slide[] GetSlides()
{
AjaxControlToolkit.Slide[] MySlides = new AjaxControlToolkit.Slide[10];
MySlides[0] = new AjaxControlToolkit.Slide("images/Slide1.JPG", "Slide1", "Slide1");
MySlides[1] = new AjaxControlToolkit.Slide("images/Slide2.JPG", "Slide2", "Slide2");
MySlides[2] = new AjaxControlToolkit.Slide("images/Slide3.JPG", "Slide3", "Slide3");
MySlides[3] = new AjaxControlToolkit.Slide("images/Slide4.JPG", "Slide4", "Slide4");
MySlides[4] = new AjaxControlToolkit.Slide("images/Slide5.JPG", "Slide5", "Slide5");
MySlides[5] = new AjaxControlToolkit.Slide("images/Slide6.JPG", "Slide6", "Slide6");
MySlides[6] = new AjaxControlToolkit.Slide("images/Slide7.JPG", "Slide7", "Slide7");
MySlides[7] = new AjaxControlToolkit.Slide("images/Slide8.JPG", "Slide8", "Slide8");
MySlides[8] = new AjaxControlToolkit.Slide("images/Slide9.JPG", "Slide9", "Slide9");
MySlides[9] = new AjaxControlToolkit.Slide("images/Slide10.JPG", "Slide10", "Slide10");
return MySlides;
}
}
}
Thanks in advance! Have nice day.
Risho