Nov 06, 2014, 2:38 PM
[CLOSED] Column in GridPanel as hyperlink with javascript function
Hello,
it is possible to create a column with a hyperlink that will have record.data.name as text and will call the javascript function that adds a new panel? Typical use is when you open a new window for editing the row record.
Default.aspx - Here is tabPanel with id TabPanel1
AdmincContentArticles.aspx - Here is grid where i need hyperlink in column
AdmincContentArticles.aspx.cs - Only for full code example
it is possible to create a column with a hyperlink that will have record.data.name as text and will call the javascript function that adds a new panel? Typical use is when you open a new window for editing the row record.
Default.aspx - Here is tabPanel with id TabPanel1
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebSystem.Admin.Default" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>WebSystem</title>
<link href="/Admin/Skins/Skin01/Css/Skin01_main.css" rel="stylesheet" />
<ext:XScript runat="server">
<script>
var addTab = function (tabPanel, id, url, menuItem, title, iconCls) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id : id,
title : title,
iconCls : iconCls,
closable : true,
menuItem : menuItem,
loader : {
url : url,
renderer : "frame",
loadMask : {
showMask : true,
msg : "Nahr?v?m: " + url + "..."
}
}
});
tab.on("activate", function (tab) {
#{MenuPanel1}.setSelection(tab.menuItem);
});
}
tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel
runat="server"
Title="North"
Region="North"
Split="true"
Height="50"
BodyPadding="6"
Html="Hlavička"
Collapsible="false"
Border="false"
Header="false"
AutoLoadingState="true"
/>
<ext:Panel
runat="server"
Title="Menu"
Width="250"
Collapsible="true"
Split="true"
Header="false"
PaddingSpec="23 0 0 0"
Border="false"
Region="West">
<Content>
<ext:Panel
runat="server"
Layout="Accordion"
Split="true"
Collapsible="true"
Header="false"
Border="false"
>
<Items>
<ext:MenuPanel
runat="server"
Title="Obsah webu"
ID="MenuPanel1"
Icon="Sitemap">
<Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Spr?va menu" Icon="SitemapColor">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idGgl', '/Admin/Content/AdminContentMenu/AdminContentMenu.aspx', this, 'Spr?va menu', '#SitemapColor');" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem runat="server" Text="Spr?va obsahu" Icon="TextSignature" >
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idGg2', '/Admin/Content/AdminContentArticles/AdmincContentArticles.aspx', this, 'Spr?va obsahu', '#TextSignature');" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem runat="server" Text="Spr?va obr?zků" Icon="Pictures">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idGg3', '/Admin/Content/InProgress/InProgress.html', this, 'Spr?va obr?zků', '#Pictures');" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem runat="server" Text="Spr?va souborů" Icon="FolderExplore">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idGg4', '/Admin/Content/InProgress/InProgress.html', this, 'Spr?va souborů', '#FolderExplore');" />
</Listeners>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
<ext:MenuPanel
runat="server"
Title="U?ivatel"
Icon="ArrowSwitch">
<Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Item 1" Icon="ArrowRight" />
<ext:MenuItem runat="server" Text="Item 2" Icon="ArrowRight" />
<ext:MenuItem runat="server" Text="Item 3" Icon="ArrowRight" />
</Items>
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
</Content>
</ext:Panel>
<ext:Panel
runat="server"
Title="Obsah"
Header="False"
Layout="FitLayout"
Border="false"
Region="Center">
<Content>
<ext:TabPanel runat="server" Region="Center" ID="TabPanel1" Border="false">
<Items>
<ext:Panel
runat="server"
Title="Home"
Border="false"
BodyPadding="6"
ID="PnlCenter"
Html="<h1>V?choz? str?nka administrace</h1>"
Closable="false"
Margins="0 0 0 0"
Icon="House"
/>
</Items>
</ext:TabPanel>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
AdmincContentArticles.aspx - Here is grid where i need hyperlink in column
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AdmincContentArticles.aspx.cs" Inherits="WebSystem.Admin.Content.AdminContentArticles.AdmincContentArticles" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Seznam čl?nků</title>
<style>
.x-grid-cell-name .x-grid-cell-inner {
font-family : tahoma, verdana;
display : block;
font-weight : normal;
font-style : normal;
color : #385F95;
white-space : normal;
}
.x-grid-rowbody div {
margin : 2px 5px 20px 5px !important;
width : 99%;
color : Scott;
}
.x-grid-row-expanded td.x-grid-cell{
border-bottom-width:0px;
}
</style>
<ext:XScript runat="server">
<script>
var AddNewTab = function (tabPanel, id, url, menuItem, title, iconCls) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id : id,
title : record.data.name,
iconCls : iconCls,
closable : true,
menuItem : menuItem,
loader : {
url : '/Admin/Content/AdminContentArticlesEdit/AdminContentArticlesEdit.aspx?id='+record.data.id,
renderer : "frame",
loadMask : {
showMask : true,
msg : "Nahr?v?m: " + url + "..."
}
}
});
tab.on("activate", function (tab) {
#{MenuPanel1}.setSelection(tab.menuItem);
});
}
tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>
<script>
var ActiveImage = function (value, metadata, record, rowIndex, colIndex, store) {
img = "<img src=/icons/cross-png/ext.axd />";
if (value) {
img = "<img src=/icons/accept-png/ext.axd />";
}
return img;
};
var refreshGrid = function (grid) {
grid.getStore().reload();
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" ID="ResourceManager1" />
<asp:SqlDataSource
ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:RSEntities %>"
SelectCommand="SELECT * FROM [articles]"
/>
<ext:GridPanel
runat="server"
Title="Articles"
Border="false"
AutoScroll="true"
Animate="true"
Mode="Remote"
ContainerScroll="false"
id="GridArticles"
>
<Store>
<ext:Store runat="server" DataSourceID="SqlDataSource1" ID="Store1" OnReadData="RefreshDataSet">
<Model>
<ext:Model runat="server" IDProperty="EmployeeID">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="name" />
<ext:ModelField Name="autor" />
<ext:ModelField Name="date_update" Type="Date" />
<ext:ModelField Name="visible" Type="Boolean" />
<ext:ModelField Name="content_preview" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="id" Text="ID" Width="40" />
<ext:Column runat="server" ID="name" DataIndex="name" Text="N?zev" Width="400">
<%-- This column i need as hyperlink, which open new tab--%>
</ext:Column>
<ext:Column runat="server" DataIndex="autor" Text="Autor" Width="40" />
<ext:DateColumn runat="server" DataIndex="date_update" Text="Datum ?pravy" Width="80" Format="dd-MM-yyyy" />
<ext:Column runat="server" DataIndex="visible" Text="Aktivn?" Width="46">
<Renderer Fn="ActiveImage" />
</ext:Column>
<ext:CommandColumn runat="server" Width="50">
<Commands>
<ext:GridCommand Icon="NoteEdit" CommandName="EditArticle">
<ToolTip Text="Editovat čl?nek" />
</ext:GridCommand>
</Commands>
<Listeners>
<Command Handler="#{DirectMethods}.DirectMethod(command, record.data.id)" />
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<GetRowClass Handler="return 'x-grid-row-expanded';" />
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Multi" />
</SelectionModel>
<Tools>
<ext:Tool Type="Plus">
<Listeners>
<Click Handler="App.direct.AddArticleItem();" />
</Listeners>
<ToolTips>
<ext:ToolTip runat="server" Html="Přidat nov? čl?nek" />
</ToolTips>
</ext:Tool>
<ext:Tool Type="Refresh" Handler="refreshGrid(#{GridArticles});" >
<ToolTips>
<ext:ToolTip runat="server" Html="Znovu nač?st menu" />
</ToolTips>
</ext:Tool>
</Tools>
</ext:GridPanel>
</form>
</body>
</html>
AdmincContentArticles.aspx.cs - Only for full code example
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using Ext.Net.Utilities;
using System.Web.Configuration;
using System.Data.SqlClient;
using System.Data;
namespace WebSystem.Admin.Content.AdminContentArticles
{
public partial class AdmincContentArticles : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
public void RefreshDataSet(object sender, StoreReadDataEventArgs e)
{
Store store = this.GridArticles.GetStore();
store.DataBind();
}
[DirectMethod]
public void DirectMethod(string command, string record)
{
if (command == "EditArticle")
{
Window win = new Window()
{
ID = "Window2",
Title = "Editace čl?nku",
Width = Unit.Pixel(1000),
Height = Unit.Pixel(600),
Modal = true,
AutoRender = false,
Collapsible = true,
Maximizable = true,
Hidden = false,
Loader = new ComponentLoader
{
Url = "/Admin/Content/AdminContentArticlesEdit/AdminContentArticlesEdit.aspx?id=" + record,
Mode = LoadMode.Frame,
LoadMask =
{
ShowMask = true
}
}
};
this.Form.Controls.Add(win);
win.Render();
win.Show();
}
}
[DirectMethod]
public void AddArticleItem()
{
Window win = new Window()
{
ID = "Window3",
Title = "Přid?n? čl?nku",
Width = Unit.Pixel(1000),
Height = Unit.Pixel(600),
Modal = true,
AutoRender = false,
Collapsible = true,
Maximizable = true,
Hidden = false,
Loader = new ComponentLoader
{
Url = "/Admin/Content/AdminContentArticlesEdit/AdminContentArticlesEdit.aspx?id=0",
Mode = LoadMode.Frame,
LoadMask =
{
ShowMask = true
}
}
};
this.Form.Controls.Add(win);
win.Render();
win.Show();
}
}
}
Any ideas? Thanx for help...
Last edited by Daniil; Nov 08, 2014 at 11:55 AM.
Reason: [CLOSED]