PDA

View Full Version : [CLOSED] Column in GridPanel as hyperlink with javascript function



Kajman
Nov 06, 2014, 2:38 PM
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


<%@ 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.Admin cContentArticles" %>
<%@ 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...

anup
Nov 07, 2014, 10:02 AM
Hi,

I don't know if it helps, but I do this frequently. The way I do it, is for the Column I use a column Renderer and set the Handler of Fn to be the JavaScript code to invoke, which will take the relevant data and return an HTML string representing my anchor link.

I then watch for a click event and in JavaScript create an instance of Ext.window.Window and load my content in there (which might be an AJAX request to dynamically generate a component for example).

On the JavaScript side, the renderer has a function signature something like this:


renderer: function(value,metadata,record,rowIndex,colIndex,s tore,view)

So you should have the data you need to formulate your URL.

If you want to get fancy and avoid too many dom click event handlers on your page (especially if your grid has lots of rows) you can probably implement a live/delegation pattern to attach to a click event higher up the dom hierarchy and respond accordingly. I have done this in Ext.NET 1, and that code I aim to migrate to Ext.NET 2 next week actually so hopefully I will get some time to figure out how to port that delegation code forward.

I hope that makes sense and helps!

Daniil
Nov 07, 2014, 10:12 AM
Hi @Kajman,

Welcome to the Ext.NET forums!

Anup, thank you for your help! Actually, I just wanted to answer, but you were first:)

Here is an example that partially demonstrates your suggestion that I vote up.

Example

<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "id1", "Name 1" },
new object[] { "id2", "Name 2" },
new object[] { "id3", "Name 3" }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var linkRenderer = function (value, metadata, record) {
return Ext.String.format("<a href=\"javascript:showEditWindow('{0}');\">{1}<a/>", record.getId(), value);
};

var showEditWindow = function (id) {
alert("Show the edit window for the record with id - " + id);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Name" DataIndex="name">
<Renderer Fn="linkRenderer" />
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

Kajman
Nov 07, 2014, 4:35 PM
Thank you for your welcome Daniil and thank you both for your help.

If somebody have same problem, here is finaly solution:

JavaScript


var linkRenderer = function (value, metadata, record) {
return Ext.String.format("<a href=\"javascript:addUserTab('{0}','{1}');\">{1}<a/>", record.data.id, record.data.name);
}


function addUserTab(id,title){
var tabPanel = window.parent.App.TabPanel1; //get from iframe tabpanel located in parent window
var tab = tabPanel.getComponent('user_'+id);
var url1 = '/Admin/Content/AdminContentArticlesEdit/AdminContentArticlesEdit.aspx?id='+id;
if (!tab) {
tab = tabPanel.add({
id : 'user_'+id,
title : title,
iconCls : '#TextSignature',
closable : true,
//menuItem : menuItem,
loader : {
url : url1,
renderer : "frame",
loadMask : {
showMask : true,
msg : "Nahr?v?m: " + url1 + "..."
}
}
});
/*
tab.on("activate", function (tab) {

#{MenuPanel1}.setSelection(tab.menuItem);

});*/
}

tabPanel.setActiveTab(tab);
}



Column in grid panel


<ext:Column runat="server" ID="name" DataIndex="name" Text="N?zev" Width="400">
<Renderer Fn="linkRenderer" />
</ext:Column>


Daniil, please, mark this thread as closed
Thanx again.