Questions on UI for ASP.NET AJAX Forum

9 answers

554 views

Server side and Client side binding problem on GridTemplateColumn with IMG and Eval()

hi guys
i have a problem with GridTemplateColumn
my program do this steps:
1- on the server side and on the page load i load some of data and binding the Grid to show personels image and info
        DAL.Personels ObjPersonels = new DAL.Personels();
        DataTable PersonelsDT = new DataTable();
        PersonelsDT = ObjPersonels.Personels_SELECT_BY_DepartmentID(1,true);
        RadGrid1.DataSource = PersonelsDT;
        RadGrid1.DataBind();

on this step every thing is OK and the IMG in the GridTemplateColumn shows currectly
2-After Page Load the user can click on a Organization chart and show personels work on that node. this step must be client side
my GridTemplateColumn:

<telerik:GridTemplateColumn>

<ItemTemplate>

<img src='pics/personels/<%# Eval("Pic") %>' width="60px" height="70px"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

codes for binding client side Grid:

function OrganizationChartNode_Chicked(sender, args) {

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

PageMethods.GetData(args.get_node().get_value(), false

, 1, tableView.get_pageSize(), tableView.get_sortExpressions().toString(), tableView.get_filterExpressions(), updateGrid);

}

function updateGrid(result) {

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

tableView.set_dataSource(result);

tableView.dataBind();

}

on this step all columns show correctly, but the IMG tag in the templateColumn shows the Old data,and dont refresh, like catching !!!

here is my full server side code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Web.Services;

using Telerik.Web.UI;

public partial class MonthlyOutputState : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

//Initializing WorkPeriodsComboBox: Start

DAL.WorkPeriods objWorkPeriods = new DAL.WorkPeriods();

DataTable WorkPeriodsDT = new DataTable();

WorkPeriodsDT = objWorkPeriods.WorkPeriods_Select_All();

for (int i = 0; i < WorkPeriodsDT.Rows.Count; i++)

{

Telerik.Web.UI.RadComboBoxItem ComboBoxItem=new Telerik.Web.UI.RadComboBoxItem(WorkPeriodsDT.Rows[i][1].ToString(),WorkPeriodsDT.Rows[i][0].ToString());

ComboBoxItem.Attributes.Add("Sdate", WorkPeriodsDT.Rows[i][2].ToString());

ComboBoxItem.Attributes.Add("Edate", WorkPeriodsDT.Rows[i][3].ToString());

RadComboBoxWorkPeriods.Items.Add(ComboBoxItem);

}

RadComboBoxWorkPeriods.FindItemByValue(objWorkPeriods.WorkPeriods_Get_Current().Rows[0][0].ToString()).Selected=true;

//Initializing WorkPeriodsComboBox: End

//Initializing Menu: Start

Telerik.Web.UI.RadTreeNode Node = new Telerik.Web.UI.RadTreeNode();

Node.Text = "چارت سازماني";

Node.Value = "0";

RadTreeView1.Nodes.Add(Node);

DAL.departments objdepartments = new DAL.departments();

DataTable departmentsDT = new DataTable();

departmentsDT = objdepartments.departments_Select_All();

AddSubTree(departmentsDT, Node);

RadTreeView1.ExpandAllNodes();

//Initializing Menu: End

//Initializing Grid: Start

DAL.Personels ObjPersonels = new DAL.Personels();

DataTable PersonelsDT = new DataTable();

PersonelsDT = ObjPersonels.Personels_SELECT_BY_DepartmentID(1,true);

RadGrid1.DataSource = PersonelsDT;

RadGrid1.DataBind();

//Initializing Grid: End

}

public void AddSubTree(DataTable dt, Telerik.Web.UI.RadTreeNode Node)

{

for (int i = 0; i < dt.Rows.Count; i++)

{

if (dt.Rows[i][1].ToString() == Node.Value)

{

Telerik.Web.UI.RadTreeNode Node22 = new Telerik.Web.UI.RadTreeNode();

Node22.Value = dt.Rows[i][0].ToString();

Node22.Text = dt.Rows[i][2].ToString();

// Node22.NavigateUrl = ;

//Node22.ToolTip = dt.Rows[i][3].ToString();

//if (dt.Rows[i][7].ToString() != "")

// // Node22.Attributes.Add("URL", dt.Rows[i][7].ToString());

//else

// Node22.Attributes.Add("URL", "NULL");

Node.Nodes.Add(Node22);

AddSubTree(dt, Node22);

}

[WebMethod]

public static int GetCount(List<GridFilterExpression> filterExpressions)

{

return 0;

}

[WebMethod]

public static List<object> GetData(int departmentID, bool SelectSubNodesPersonels, int startIndex, int maximumRows, string sortExpressions, List<GridFilterExpression> filterExpressions)

{

DAL.Personels ObjPersonels = new DAL.Personels();

DataTable DT = ObjPersonels.Personels_SELECT_BY_DepartmentID(departmentID, SelectSubNodesPersonels);

return ObjPersonels.Convert_DataTable_To_List_Object(DT);

}

}

here is my Full Client side Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="OutputState_Sum.aspx.cs"

Inherits="MonthlyOutputState" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="css/MainStylesheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

<script language="javascript" type="text/javascript">

function OrganizationChartNode_Chicked(sender, args) {

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

PageMethods.GetData(args.get_node().get_value(), false, 1, tableView.get_pageSize(), tableView.get_sortExpressions().toString(), tableView.get_filterExpressions(), updateGrid);

}

function updateGrid(result) {

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

tableView.set_dataSource(result);

tableView.dataBind();

}

function OnClientContextMenuItemClicked(sender, args) {

var menuItem = args.get_menuItem();

var treeNode = args.get_node();

menuItem.get_menu().hide();

treeNode.select();

switch (menuItem.get_value()) {

case "OpenNodeWithSubs":

{

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

PageMethods.GetData(args.get_node().get_value(), true, 1, tableView.get_pageSize(), tableView.get_sortExpressions().toString(), tableView.get_filterExpressions(), updateGrid);

// args.get_node().get_value

}

break;

//////////////////////////////////////////// Adding tab and page views: End

case "Rename":

treeNode.startEdit();

break;

}

</script>

<form id="form1" runat="server" dir="rtl" style="width: 100%; height: 100%">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">

</telerik:RadAjaxLoadingPanel>

<div class="parent">

<div class="FixedTop" style="height: 60px">

<table style="width: 100%; height: 100%; vertical-align: top;" cellpadding="0px"

cellspacing="0px">

<tr>

<td>

<table>

<tr>

<td>

دوره

</td>

<td>

<telerik:RadComboBox ID="RadComboBoxWorkPeriods" runat="server" Style="z-index: 7001">

</telerik:RadComboBox>

</td>

<td>

گروه

</td>

<td>

<telerik:RadComboBox ID="RadComboBox2" runat="server">

</telerik:RadComboBox>

</td>

<td>

شماره پرسنلي

</td>

<td>

<input type="text" />

</td>

</tr>

</table>

</td>

</tr>

<tr style="background-image: url('../UI/Pics/Icons/bar1.png');">

<td dir="rtl">

<telerik:RadMenu ID="RadMenu1" runat="server" dir="rtl" Skin="Telerik" Flow="Horizontal"

Style="top: 0px; right: 0px">

<Items>

<telerik:RadMenuItem runat="server" Text="محاسبه" ImageUrl="~/Pics/Icons/Calculate.gif">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" IsSeparator="true">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="فيلتر" ImageUrl="~/Pics/Icons/Filter.gif">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" IsSeparator="true">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="ايجاد کار" ImageUrl="~/Pics/Icons/Task.png">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" IsSeparator="true">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="نمايش ريز کارها" ImageUrl="~/Pics/Icons/Filter.gif">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</td>

</tr>

</table>

</div>

<div class="FullOfRemainingBody" style="top: 60px">

<table style="width: 100%; height: 100%;">

<tr>

<td id="Chart" style="width: 200px; vertical-align: top">

<telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Default" dir="rtl" Font-Names="KasraB Traffic"

Font-Bold="True" OnClientNodeClicking="OrganizationChartNode_Chicked" OnClientContextMenuItemClicked="OnClientContextMenuItemClicked">

<ContextMenus>

<telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenu1" runat="server">

<Items>

<telerik:RadMenuItem runat="server" Text="کليه زير مجموعه ها" Value="OpenNodeWithSubs">

</telerik:RadMenuItem>

</Items>

<Items>

<telerik:RadMenuItem runat="server" Text="سرجمع براي واحدهاي يک سطح پايين تر" Value="OpenNodeWithSubs">

</telerik:RadMenuItem>

</Items>

</telerik:RadTreeViewContextMenu>

</ContextMenus>

</telerik:RadTreeView>

</td>

<td style="vertical-align: top">

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Vista">

<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">

<Selecting AllowRowSelect="True" />

</ClientSettings>

<MasterTableView Font-Names="KasraB Traffic" Font-Bold="true" AllowSorting="true">

<Columns>

<telerik:GridTemplateColumn>

<ItemTemplate>

<img src='pics/personels/<%# Eval("Pic") %>' width="60px" height="70px"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

I tested some methods like set DataFiels="Pic" and UniqueName="Pic" but not work, i think we cannot use this method:

<ItemTemplate>

<img src='pics/personels/<%# Eval("Pic") %>' width="60px" height="70px"/>

</ItemTemplate>

but it works when we Bind server side,but maybe catched when binding client side
how can i program my idea?

i attached the a screen shot of my main page program.
i can attach the full project if need

thank my friends

Grid

answered on 25 Jul 2011

1 answer

141 views

RadNumericTextBox OnBlur Not Firing

All,

I am using Q3 2010 ASP.NET AJAX controls, and am having a problem with the OnBlur event. I am trying to do a calculation similar to the Grid Header/Footer Calc example in the demo. What I have is as follows:

Main page grid launches a tooltip per record. The tooltip content is a user control. Inside the user control is a grid and some labels. The grid is immediately put into edit mode when the tooltip is opened, and when the user exits the editable field in a given record, I want to update the label.

I have followed the example, and had no luck. Right now I have a RadNumericTextBox with ClientEvents set OnBlur="OnBlur" and a javascript method named OnBlur() with just a alert. Nothing happens.

I have added an AjaxPanel around the entire control. No change. I have instead used OnBlur="javascript:OnBlur()". No change. I have put the script in the parent of the tooltip. No change...

Any suggestions?

All help greatly appreciated.

Thanks,
B

Input

answered on 25 Jul 2011

2 answers

105 views

Purely client-side load on demand (no DB or web service) and autocomplete?

Is it possible to populate a combo box purely on the client, without any SqlDataSource or web service call?

For example, I have a list box with two RadCombBox objects in the ItemTemplate. The first combo box is called "Type" and contains two hard-coded values ("Fruit" and "Color"). The second combo box is called "Values" and it needs to both support autocomplete and load on demand of only values appropriate for the selected value in the first box. The possible values for the second box is a small, well-defined list that won't change often, so I don't want to incur a call to the database.

So, if the user selects "Fruit" from the first box, and then starts to type into the second box, I only want to show the user the fruit values (apple, banana, orange, and so on) that match their filter. (E.g., if they type "or" then I should only show "orange.")

On the other hand, if the user selects "Color" from the first combobox, and then starts typing into the second box, I only want to show the user the color values (red, green, blue, etc.) that match their filter. (E.g., if they type "re" then I should only show "red".)

I see from the docs how to do this with a DB or web service call; the question is could I do this against a fixed list in the client page, or by binding to the results of some JavaScript method, or by using some kind of prefix in the items list of the second box, so I don't have to call out over the wire to a data server?

Thanks

ComboBox

answered on 25 Jul 2011

2 answers

140 views

Double click date, redirect to new url

Is is possible to double click on a given date, and rather than opening the day, direct the user to a new page and include the date clicked as part of the querystring?

I have a simple calendar that I would like a user to double click a date, then the user is directed to a form that will be submitted to a database. I would like to populate a lable on the form with the date the user double clicked.

Thank you in advance.

Calendar

answered on 25 Jul 2011

0 answers

91 views

newbie ComboBox Help

I'm using a RadListview that is bound to a sql database in my application. When I edit items in that listview, I want several field to appear as radComboBoxes rather than text fields. I want the combo box to be selected on the data that is in the field, but allow the user to select any other option. When the user clicks save on the listview edit, I want to update the database with the selected value of the combo box.

I'm sure there are several code examples out there, but I just can't seem to be able to locate one.

Any help would be greatly appreciated!!!

Dave

ComboBox

asked on 25 Jul 2011

1 answer

154 views

RadTimePicker input box border color issue

I have an issue about raddatetime picker box border color.For some info; we use Webblue theme and version 2010, 3, 1109, 40 telerik dlls in our project.
When we refresh page,first of all,box border colors become black.(look attach : raddatepicker1).But after the refresh finished they looks like with normal colors (like attach : raddatepicker2)

Can you help me about this issue?
Thanks.

Calendar

answered on 25 Jul 2011

1 answer

65 views

Radgrid Paging problem

hi...
Paging is not working without onneeddatasource. how can solve this problem ??

Grid

answered on 25 Jul 2011

2 answers

104 views

[Solved] Can I disable descending sort only?

Right now, I have a column with the standard three sort options: ascending -> descending -> natural.

My client wants either an ascending sort or natural, because in this context a descending sort would potentially confuse the issue.

Is there a "simple" configuration option for this?

I would prefer not to get into custom sorts or client-side programming.

Grid

answered on 25 Jul 2011

1 answer

479 views

How to get Details table parent?

I have a RadGrid with a DetailsTable... Inside the details table, I have a template column with a button.. I need to know which row in the original Grid does the details table of the clicked button belong too.... any ideas???

(When I click Button2, I need to know which row in the original RadGrid that button belongs to)

<telerik:RadGrid ID="RadGrid1" AutoGenerateColumns="False" runat="server" AllowPaging="True" PageSize="10"

Width="60%" GridLines="None" Skin="WebBlue"

OnNeedDataSource="RadGrid1_NeedDataSource"

OnItemCommand="RadGrid1_ItemCommand"

OnDetailTableDataBind="RadGrid1_DetailTableDataBind"

OnPrerender="RadGrid1_PreRender" >

<MasterTableView ShowHeader="false" Width="100%">

<DetailTables>

<telerik:GridTableView Name="DetailsTable1" Width="100%"

ShowHeader="false" AutoGenerateColumns="false">

<Columns>

<telerik:GridTemplateColumn UniqueName="Column2">

<ItemTemplate>

<telerik:RadButton ID="Button2"

runat="server"

Text="Button2"

OnClick="Button2_Click" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridTemplateColumn UniqueName="TemplateColumn">

<ItemTemplate>

<telerik:RadButton ID="Button1"

runat="server"

Text="Button1"

OnClick="Button1_Click" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

Thnx! Gavin

Grid

answered on 25 Jul 2011

7 answers

165 views

server side event for cell changed

I'm trying to reproduce the behavior of a pre-existing grid which opens up only 2 columns for updating: a date and a quantity
if either of them is changed the back end database is updated
I used a template with a label in the ItemTemplate and a RadNumericTextBox in the EditItemTemplate and triggered the update on the quantity changed event for the quantity
but... then the automatic aggregate didn't work - and there is a lot of filtering possible
my kluge is to have 2 quantity columns - one read only for the total and the other a template with only the EditItemTemplate

is there a way to update the quantity with only one column and still aggregate without a lot of extra code?

Grid

answered on 25 Jul 2011