How can I add styling(htmlattribute) to each item while menu bind to web.sitemap
web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
<siteMapNode title="Home" controller="Home" action="Overview">
<siteMapNode title="Grid">
<siteMapNode controller="grid" action="index" title="First Look (Razor)" area="razor"/>
<siteMapNode controller="grid" action="index" title="First Look (ASPX)" area="aspx"/>
</siteMapNode>
<siteMapNode title="Menu">
<siteMapNode controller="menu" action="index" title="First Look (Razor)" area="razor"/>
<siteMapNode controller="menu" action="index" title="First Look (ASPX)" area="aspx"/>
</siteMapNode>
</siteMapNode>
</siteMap>
Kendo Menu Binding to web.sitemap
Html.Kendo().Menu()
.Name("Menu")
.BindTo("web", (item, value) => {
if(item.Text.Equals("Home"))
{
item.Enabled = false;
// how can i add css style to the item here
}
})
.Render();
Thanks
found the solution to apply css to each menu item with condition
Html.Kendo().Menu()
.Name("Menu")
.BindTo("web", (item, value) => {
if(item.Text.Equals("Home"))
{
item.Enabled = false;
item.HtmlAttributes.Add("style", "background-color:#CCCCCC;");
item.LinkHtmlAttributes.Add("style", "font-weight:bold; color:black;");
}
})
.Render();
Related
I using Master Detail page
The Detail page is an tabbed page
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" ...... >
<views:InboxPage Title="" Icon="tabb_inbox.png" />
<views:AgendaPage Title="" Icon="tabb_agenda.png"/>
<views:AttendancePage Title="" Icon="tabb_attendance.png"/>
<page:CalendarPage Title="" Icon="tabb_calendar.png" ></page:CalendarPage>
<views:MarksPage Title="" Icon="tabb_marks.png"/>
<!--<views:CalendarPage Title="" Icon="tabb_calendar.png" />-->
</TabbedPage>
The Menu(masterpage) is a Content page :
public partial class MasterPageMenu : ContentPage
{
public MasterPageMenu()
{
InitializeComponent();
InitializeDataAsync();
}
}
in the master Page render using the following
public partial class MasterPage : MasterDetailPage
{
public MasterPage()
{
Detail = new NavigationPage(bottomBarPage);
Master = new MasterPageMenu()
{
Title = "The Title ",
Icon = (Device.OS == TargetPlatform.iOS) ? "icon.png" : null
};
}
}
Is There Any way to display page title beside the menu Icon
the result for above code like this
I usually pass the title in program code as follow ( when navigating to the page ).
new tabbedPafe(){ Title = 'Put title here'};
But I think you can also do it in your XAML code if you prefer that (of your tabbed page, give it the Title attribute).
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" ...... Title="Title here">
<views:InboxPage Title="" Icon="tabb_inbox.png" />
<views:AgendaPage Title="" Icon="tabb_agenda.png"/>
<views:AttendancePage Title="" Icon="tabb_attendance.png"/>
<page:CalendarPage Title="" Icon="tabb_calendar.png" ></page:CalendarPage>
<views:MarksPage Title="" Icon="tabb_marks.png"/>
<!--<views:CalendarPage Title="" Icon="tabb_calendar.png" />-->
</TabbedPage>
I have an application that using MVC pattern, ZK 8 version and Tree component as a menu. The application itself using border layout and Tabbox as a dynamic container. The menu tree code is adding tab when it is clicked. I have successfuly do this, but in an inefficient manner. Is there an efficient alternatives or ways to refactor?
The codes are:
<zk>
<style src="css/style.css" />
<borderlayout>
<north>
<div height="120px"
style="background:#3461b2
url('images/banner.jpg')no-repeat;" />
</north>
<west title="Selamat Datang - ${sessionScope.userCredential.name}"
size="22%" autoscroll="true" splittable="true" collapsible="true"
vflex="max">
<tree id="menuTree">
<treechildren>
<treeitem label="Daily">
<treechildren>
<treeitem label="Report 1">
<attribute name="onClick">
<![CDATA[
Tab newTab;
if (mainTabbox.getTabs().hasFellow("Report 1")) {
newTab = (Tab) mainTabbox.getTabs().getFellow("Report 1");
mainTabbox.setSelectedTab(newTab);
} else {
newTab = new Tab("Report 1");
newTab.setId("Report 1");
newTab.setClosable(true);
newTab.setSelected(true);
Tabpanel tb = new Tabpanel();
Executions.createComponents("daily/report1.zul", tb, null);
mainTabbox.getTabs().appendChild(newTab);
mainTabbox.getTabpanels().appendChild(tb);
}
]]>
</attribute>
</treeitem>
<treeitem label="Logs">
<attribute name="onClick">
<![CDATA[
Tab newTab;
if (mainTabbox.getTabs().hasFellow("Logs")) {
newTab = (Tab) mainTabbox.getTabs().getFellow("Logs");
mainTabbox.setSelectedTab(newTab);
} else {
newTab = new Tab("Logs");
newTab.setId("Logs");
newTab.setClosable(true);
newTab.setSelected(true);
Tabpanel tb = new Tabpanel();
Executions.createComponents("Logs.zul", tb, null);
mainTabbox.getTabs().appendChild(newTab);
mainTabbox.getTabpanels().appendChild(tb);
}
]]>
</attribute>
</treeitem>
...
...
<center vflex="min" autoscroll="true">
<div height="100%">
<tabbox id="mainTabbox">
<tabs id="tabs">
<tab id="mainTab" label="Main" />
</tabs>
<tabpanels>
<tabpanel>
<include src="/charts/mainChart.zul" />
</tabpanel>
</tabpanels>
</tabbox>
</div>
</center>
....
I found the solution by using onSelect listener attribute:
<tree id="menuTree">
<attribute name="onSelect">
<![CDATA[
Treeitem item = self.getSelectedItem();
if (item != null) {
Tab newTab;
if (mainTabbox.getTabs().hasFellow(item.getLabel())) {
newTab = (Tab) mainTabbox.getTabs().getFellow(item.getLabel());
mainTabbox.setSelectedTab(newTab);
} else {
newTab = new Tab(item.getLabel());
newTab.setId(item.getLabel());
newTab.setClosable(true);
newTab.setSelected(true);
Tabpanel tb = new Tabpanel();
Executions.createComponents(item.getValue().toString(), tb, null);
mainTabbox.getTabs().appendChild(newTab);
mainTabbox.getTabpanels().appendChild(tb);
}
}
]]>
</attribute>
<treechildren>
<treeitem label="Daily">
<treechildren>
<treeitem label="Tab Label" value="somepage.zul" />
<treeitem label="Other Tab Label" value="otherpage.zul" />
....
reference from: http://forum.zkoss.org/question/3675/tree-onselect-eventlistener/
I have implemented a module where i am using telerik red bar chart.And i want to generate another bar graph on click on bar of existing chart i.e there are two charts one is shown on page load and second is detailed one which is shown after click on any bar of first chart.Have mentioned my code below:-
<asp:Panel ID="Panel1" runat="server">
<telerik:radhtmlchart id="RadHtmlChart2" runat="server" width="600" height="400"
onclientseriesclicked="OnClientSeriesClicked">
<%-- <ClientEvents OnSeriesClick="OnSeriesClick" />--%>
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Series 1">
<SeriesItems>
<telerik:CategorySeriesItem Y="30" />
<telerik:CategorySeriesItem Y="10" />
<telerik:CategorySeriesItem Y="20" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
<XAxis>
<LabelsAppearance RotationAngle="33">
</LabelsAppearance>
<Items>
<telerik:AxisItem LabelText="Item 1" />
<telerik:AxisItem LabelText="Item 2" />
<telerik:AxisItem LabelText="Item 3" />
</Items>
</XAxis>
</PlotArea>
</telerik:radhtmlchart>
<asp:Panel ID="Panel2" runat="server">
//My Second chart Shown Here
</asp:Panel>
</asp:Panel>
Above code i have used for generating my first chart
Second Chart which i am trying to fill in my asp Panel2.
protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
RadHtmlChart chart = new RadHtmlChart();
chart.ID = "chart2";
ColumnSeries cs = new ColumnSeries();
CategorySeriesItem csi = new CategorySeriesItem();
cs.DataFieldY = "TOTALCALLS";
cs.SeriesItems.Add(csi);
chart.PlotArea.Series.Add(cs);
Panel2.Controls.Add(chart);
}
My Ajax Call
<telerik:radcodeblock id="RadCodeBlock1" runat="server">
<script>
function getAjaxManager() {
return $find("<%=RadAjaxManager1.ClientID%>");
}
</script>
</telerik:radcodeblock>
I just want to fill second bar graph i.e i want to use client seriesevent for calling my server side method in red chart
Invoke an AJAX request through the RadAjaxManager client-side API: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/client-side-programming/overview. Something like:
getAjaxManager().ajaxRequest("someOptionalArgument");
You can find similar code in the drilldown chart demo: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/drilldownchart/defaultcs.aspx. It changes the datasource of the current chart but the client-side logic is the same.
On the server, just make sure to recreate the second chart with each subsequent postback, as any other server control.
I have product list and I should to filter products by multiple criterias. In one page I have multiple criterias (name, price, create date etc.) in differenet elements: textbox, Dropdownlist etc.
I want to search products without reload page. When I change any criteria, product list updates automatically, without reloading page. Like this: Filter users.
Here is my view:
#model IEnumerable<Product>
<section id="sidebar left">
<div class="form_info">
<label>Category</label>
#Html.DropDownListFor(model => model.CategoryId, ViewBag.CategoryList as IEnumerable<SelectListItem>, "-", new { id = "ProductCategory" })
</div>
<div class="form_info">
<label>Name</label>
#Html.TextBoxFor(model => model.Name, new{ id = "ProductName"})
</div>
...//other properties
</section>
<section id="content" >
#foreach (var item in Model)
{
<a class="productStyle" href="#Url.Action("Details", "Product", new { id=item.Id})">#item.Name</a>
}
</section>
I have FilterProductByCriteria(int CategoryId, int Name, double priceFrom, double PriceTo..etc) action in controller.
I can do this: in onchange() event of every element to send all criteria values to controller and call back result data - filtered product list, but I cannot use returned data in #foreach (var item in Model). Help me in it or advice better ways, please. (Sorry for bad english)
I can do this: in onchange() event of every element to send all
criteria values to controller and call back result data - filtered
product list, but I cannot use returned data in #foreach (var item in
Model)
Why not? Sure you can. As an alternative you could place the filter criteria inputs inside an HTML form and provide a submit button that will send the values to the controller and this controller will return the same view with filtered products model. And then you could optimize this by introducing AJAX. You would place the <section id="content"> contents into a partial view which will contain the filtered results. And then you could use an Ajax.BeginForm instead of a regular Html.BeginForm to send the filter criteria to the controller action. In turn this controller action will perform the filtering and pass the filtered product list to the same partial view (return PartialView()) which will then be used to refresh only results section of your DOM.
For example:
#model IEnumerable<Product>
#using (Ajax.BeginForm("Search", "SomeController", new AjaxOptions { UpdateTargetId = "content" }))
{
<section id="sidebar left">
<div class="form_info">
#Html.LabelFor(model => model.CategoryId)
#Html.DropDownListFor(
model => model.CategoryId,
ViewBag.CategoryList as IEnumerable<SelectListItem>,
"-",
new { id = "ProductCategory" }
)
</div>
<div class="form_info">
#Html.LabelFor(model => model.Name)
#Html.TextBoxFor(model => model.Name, new { id = "ProductName"})
</div>
...//other properties
</section>
<button type="submit">Filter</button>
}
<section id="content">
#Html.Partial("_Products", Model)
</section>
and then your controller action might look like this:
[HttpPost]
public ActionResult Search(SearchCriteriaViewModel model)
{
IEnumerable<Product> filteredProducts = ... you know what to do here
return PartialView("_Products", filteredProducts);
}
Please refer this link for searching inside ASP.Net GridView without refresh the page.
[ASP.NET GridView Searching without refresh whole Page]
http://www.ashishblog.com/search-sort-in-gridview-using-c-net-ajax-and-jquery/
Here is my aspx page having search text box and gridview inside AJAX update panel.
<asp:ScriptManager ID="ScriptManager" runat="server" />
Search: <asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_TextChanged" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div class="GridviewDiv">
<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="False" AllowPaging="True"
AllowSorting="true" DataSourceID="dsGridview" Width="540px" PageSize="10" CssClass="yui">
<Columns>
<asp:BoundField DataField="id" HeaderText="ID" SortExpression="id" ItemStyle-Width="40px"
ItemStyle-HorizontalAlign="Center" />
<asp:TemplateField HeaderText="First Name" SortExpression="FirstName">
<ItemStyle Width="120px" HorizontalAlign="Left" />
<ItemTemplate>
<asp:Label ID="lblFirstname" Text='<%# HighlightText(Eval("FirstName").ToString()) %>' runat="server"
CssClass="TextField" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name" SortExpression="LastName">
<ItemStyle Width="120px" HorizontalAlign="Left" />
<ItemTemplate>
<asp:Label ID="lblLastname" Text='<%# HighlightText(Eval("LastName").ToString()) %>' runat="server"
CssClass="TextField" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Department" HeaderText="Department" SortExpression="Department"
ItemStyle-Width="130px" />
<asp:BoundField DataField="Location" HeaderText="Location" SortExpression="Location"
ItemStyle-Width="130px" />
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
--> Here is my code behind file add method in page load event.
string SearchString = "";
protected void Page_Load(object sender, EventArgs e)
{
txtSearch.Attributes.Add("onkeyup", "setTimeout('__doPostBack(\\'" + txtSearch.ClientID.Replace("_", "$") + "\\',\\'\\')', 0);");
if (!IsPostBack)
{
Gridview1.DataBind();
}
}
protected void txtSearch_TextChanged(object sender, EventArgs e)
{
SearchString = txtSearch.Text;
}
public string HighlightText(string InputTxt)
{
string Search_Str = txtSearch.Text.ToString();
// Setup the regular expression and add the Or operator.
Regex RegExp = new Regex(Search_Str.Replace(" ", "|").Trim(), RegexOptions.IgnoreCase);
// Highlight keywords by calling the
//delegate each time a keyword is found.
return RegExp.Replace(InputTxt, new MatchEvaluator(ReplaceKeyWords));
// Set the RegExp to null.
RegExp = null;
}
public string ReplaceKeyWords(Match m)
{
return "<span class=highlight>" + m.Value + "</span>";
}
I want to get value of checkbox from the itemrenderer.I have a datagrid with a checkBox as itemrenderer as follows:
<s:DataGrid id="myGrid" dataProvider="{module_DP}" rowHeight="35" fontSize="9"
x="20" y="20" width="184" height="306">
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Access" dataField="access">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:CheckBox label="" click="Check_Click(event)" selected="#{data.access}" horizontalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
The Check_Click() method:
public function Check_Click():void{
trace(I want to get the value of clicked checkbox..in this case "access")
}
I cant figure out the code that I need to put in the trace.
Can someone advise?
You can try:
<s:CheckBox label="" click="Check_Click(event)" selected="#{data.access}" horizontalCenter="0"/>
public function Check_Click(event:MouseEvent):void{
var cb:Checkbox = event.target as CheckBox
trace(cb.selected);
}
The post title was asking a slightly different question "How to get value of Itemrenderer". Access the data property within the renderer, like you do with {data.access}.
To access it from outside:
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.components.gridClasses.IGridItemRenderer;
private function onGridInitialize(event:FlexEvent):void
{
this.addEventListener('moduleItemChange', onModuleItemChange);
}
private function onModuleItemChange(event:Event):void
{
var item:IGridItemRenderer = event.target as IGridItemRenderer;
if(!item || !item.data) { /* deal with this */ }
trace(item.data.access);
}
]]>
</fx:Script>
<s:DataGrid id="myGrid" rowHeight="35" fontSize="9"
x="20" y="20" width="184" height="306"
initialize="onGridInitialize(event)">
<s:dataProvider>
<s:ArrayList>
<fx:Object access="true"/>
<fx:Object access="false"/>
<fx:Object access="false"/>
<fx:Object access="true"/>
<fx:Object access="true"/>
</s:ArrayList>
</s:dataProvider>
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Access" dataField="access">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
private function Check_Click(even:MouseEvent):void
{
dispatchEvent(new Event('moduleItemChange', true));
}
]]>
</fx:Script>
<s:CheckBox label="" click="Check_Click(event)" selected="#{data.access}" horizontalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>