Questions on UI for ASP.NET AJAX Forum

1 answer

70 views

RadGrid, OData Web Service and client templates

We are using a WCF service to databind our grid client-side. Certain rows need to be a different color based on the data returned from the service.

At first, I attempted using a GridTemplateColumn to bind with a <div class='<%# Eval("ClassName") %>'><%# Eval("Title") %></div> to swap colors, but quickly realized that the DataBinder is a server-side capability.

Is there a way to either a) do a client-side template column with databinding or b) handle the javascript OnDataItemBound?

Christopher

Grid

answered on 07 Dec 2012

4 answers

603 views

Client-Side Databinding - ItemDatabound Firing Before Grid is Bound

I am enhancing a search feature on our site and am using jQuery in conjunction with the client-side api for the RadGrid. My problem is that itemdatabound, as well as any methods that are invoked from gridtemplatecolumns in the grid are all fired BEFORE the grid is databound, which obviously causes problems. I could almost live with it if when i finally invoke databind() the methods are called again, but they are not.

I put together a quick example of what I am talking about... please make sure if you try and recreate this problem that you reference the newest version of jquery in the head of the doc.
ASPX Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxExample.aspx.cs" Inherits="WolperWeb.company.AjaxExample" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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>

<script type="text/javascript" language="javascript" src="../scripts/jquery-1.4.1.js"></script>

<telerik:RadCodeBlock ID="rcbJavaScript" runat="server">

<script type="text/javascript">

$(function () {

////////////////////////////////////////////////////////////////////////////////////////////////////////

/// TEST CODE /////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////////////////////////

/// REQURIED PARAMETERS : int WebID, int AccountID, string SearchTerm, int CurrentPage, int PageSize

/////////////////////////////////////////////////////////////////////////////////////////////////////

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

dataType: "json",

url: "ajaxexample.aspx/GetData",

data: "{ }",

success: function (result) {

var publications = (typeof result.d) == 'string' ? eval('(' + result.d + ')') : result.d;

for (var key in publications) {

if (key == "book") {

tableView.set_dataSource(publications[key]);

tableView.dataBind();

}

},

error: function (xhr, ajaxOptions) {

alert("error: " + xhr.responseText);

}

});

var tableView;

function pageLoad(sender, args) {

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

}

function rgPublicationResults_Command(sender, args) { }

</script>

</telerik:RadCodeBlock>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadGrid ID="rgPublicationResults" runat="server" Skin="Simple" OnItemDataBound="rgPublicationResults_ItemDataBound">

<ClientSettings AllowColumnsReorder="true">

<ClientEvents OnCommand="rgPublicationResults_Command" />

</ClientSettings>

<MasterTableView GridLines="None" AutoGenerateColumns="false">

<Columns>

<telerik:GridBoundColumn DataField="BookName" HeaderText="Title" UniqueName="BookName" />

<telerik:GridBoundColumn DataField="Term" HeaderText="Term" UniqueName="Author" />

<telerik:GridBoundColumn DataField="BookID" HeaderText="ID" UniqueName="BookID" />

<telerik:GridTemplateColumn HeaderText="Price" UniqueName="Price">

<ItemTemplate>

<%# GetPrice(Eval("Price")) %>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="TestField" UniqueName="TestField">

<ItemTemplate>

<asp:Label ID="lblTest" runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<AlternatingItemStyle VerticalAlign="Top" />

<ItemStyle VerticalAlign="Top" />

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

Codebehind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.Services;

using Telerik.Web.UI;

namespace WolperWeb.company

{

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected string GetPrice(object Price)

{

try

{

return String.Format("Order Total: {0:C}", Price);

}

catch { return "failed"; }

}

protected void rgPublicationResults_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item.ItemType == GridItemType.AlternatingItem || e.Item.ItemType == GridItemType.Item)

{

Label lblTest = (Label)e.Item.FindControl("lblTest");

lblTest.Text = "test";

}

[WebMethod]

public static Dictionary<string, object> GetData()

{

Dictionary<string, object> result = new Dictionary<string, object>();

List<BookData> lBooks = new List<BookData>();

BookData oBook = new BookData();

oBook.Author = "John Smith";

oBook.BookID = "bk101";

oBook.BookName = "Book Number 1";

oBook.Price = 10;

lBooks.Add(oBook);

oBook = new BookData();

oBook.Author = "Bill Smith";

oBook.BookID = "bk102";

oBook.BookName = "Book Number 2";

oBook.Price = 15;

lBooks.Add(oBook);

oBook = new BookData();

oBook.Author = "Rob Smith";

oBook.BookID = "bk103";

oBook.BookName = "Book Number 3";

oBook.Price = 20;

lBooks.Add(oBook);

oBook = new BookData();

oBook.Author = "Jane Smith";

oBook.BookID = "bk104";

oBook.BookName = "Book Number 4";

oBook.Price = 25;

lBooks.Add(oBook);

result.Add("book", lBooks);

return result;

}

public struct BookData

{

public string BookName { get; set; }

public string BookID { get; set; }

public string Author { get; set; }

public decimal Price { get; set; }

}

Also, I think it's worth mentioning that this line of code kept returning null until i defined an empty client side oncommand event, as you will see in the code. If that is a known issue, it should be better documented as I also spent a good amount of time trying to figure out why I couldn't grab a reference to the grid:

var tableView;

function pageLoad(sender, args) {

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

}

Grid

answered on 07 Dec 2012

1 answer

63 views

Using Datatable in insertcommand to store the items

Hi,
I am trying to do a soft save of the grid items to a datatable, when add new item is clicked.

Currently i am using the hashtable to store the data. However, i would like to add those items to datatable.

GridEditableItem item = e.Item as GridEditableItem;

Hashtable values = new Hashtable();

DataTable dt = new DataTable();

item.ExtractValues(values);

How to add the values to the datatable?
Thanks

Grid

answered on 07 Dec 2012

3 answers

99 views

Multiple CommandItemTemplate

Hi, I'm using the RadToolBar in the CommandItemTemplate of the RadGrid.
I've adjusted the width of the grid to 100%.
I need to display to the user 12+ independent RadToolBarButton and in some of them I have big text to explain to the user what the action is. The result is that the last buttons are not totally or partially visible. Is there any property in the toolbar or an adjustment possible to be made? maybe a scroll or a '...' or ' >>>' button to view the mentioned buttons?
Thanks, Ariel.

ToolBar

answered on 07 Dec 2012

1 answer

108 views

TreeList for Non Self referencing data

Hi people,
in the demo of TreeList it is written that "Its hybrid structure empowers you with the ability to visualize self-referencing data in a hierarchical view defining primary/foreign key relations and using identical objects for source."
I want to know if this control support non-self referencing data? Like

Code Chapter Subchapter
----------------------------------------------------------
123456 12 1234
456789 45 4567
345678 34 3456
124389 12 1243

Here Chapter is the parent of subchapter.

12
-1234
-1243
45
- 4567
34
- 3456

Tell me can this control work for me?

TreeList

answered on 07 Dec 2012

1 answer

156 views

SharePoint Online / ASP.Net & Telerik?

Hi,

I have successfully deployed a test Silverlight application to SharePoint Online, which includes my trial Telerik controls. Specifically ChartView.

We do not however wish to develop future apps in Silverlight, for cross-browser/device compatibility reasons.

Am I able to use the ASP.Net versions of the same controls to develop ASP.Net applications or Webparts in SharePoint Online?

Note: SharePoint Online, not On-Premises.

Thanks,

Jason.

Sharepoint Integration

answered on 07 Dec 2012

2 answers

106 views

reference to parent grid

Hi,
I have a grid in an editform of another grid. The datasource of the second grid is dependant on a datakeyvalue of the first grid. How do i do this in the NeedDataSource event of the second grid?
If I try and use the SelectedIndex I get nothing as first gris is in edit mode.
I am looking for something like below but unfortunately the row is not selected, just inedit mode:

Protected Sub UserNeedDatasource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs)

Dim DataKey As String = Me.Grid1.MasterTableView.DataKeyValues(Me.Grid1SelectedIndexes(0))("DataKeyName").ToString

Me.Grid2.DataSource = MyDataSource.GetData(DataKey)

end Sub

Any ideas?

Grid

answered on 06 Dec 2012

6 answers

1.1K+ views

Reloading RadGrid Initial Data from DataSource

I want to know a way I can reload the RadGrid with the DataSource that it is originally loading from. Case Scenario would involve the user click on a button to refresh the RadGrid to return the original data from the database, because they don't want the updated changes on the RadGrid anymore. I've tried DataBind, but it does not do anything for me. Is there an event that I need to use to do what I need it to do?
I am using .ASPX and C#. Thanks in advanced.

protected void RadGrid1_Load(object source, GridNeedDataSourceEventArgs e)

{

String ConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

SqlConnection conn = new SqlConnection(ConnString);

SqlDataAdapter adapter = new SqlDataAdapter();

adapter.SelectCommand = new SqlCommand(@"SELECT columns FROM tables)", conn);

DataSet myDataTable = new DataSet();

conn.Open();

try

{

adapter.Fill(myDataTable, "tables");

}

finally

{

conn.Close();

}

DataView myDataView = myDataTable.Tables["tabels"].DefaultView;

RadGrid1.MasterTableView.DataSource = myDataView;

RadGrid1.MasterTableView.DataBind();

}

Grid

answered on 06 Dec 2012

16 answers

201 views

inconsistent rendering

Hi, I have a very annoying problem with my comboboxes that occurs not everytime but i would say ~5% of the time, testing on IE8 and FF 14.0.1. My scenario (using Q2 2012):

Im having 2 related comboboxes in a RadAjaxPanel which are filled once from a database. Each combobox filters each other since the first one contains the parents of the second. Im using server-side coding to do the filtering (by using item visibility, based on Parent (Attribute) property).

95%, everthing works like it should but i noticed that sometimes the filtering does not occur (selecting an element in the first combobox doesnt filter the second one at all...it visible items stays like there were). I though first that the postback was not occuring on those times but after investigation, it is (OnSelectedIndexChanged gets called and item visibility is set correctly for all items). It's just the displaying that dont get refreshed somehow. The only way I can do something is selecting something else in the first combobox and reselecting the one i really wanted (to force an index change)...then it filters.

I initially had AutoPostBack=True on both comboboxes and tried to put them to false and handle it on client-side (OnClientSelectedIndexChanged), like someone did on a forums. Problem still occuring ...but seems like less often so i kept it like that.

Here's a trimmed down version of my code:

aspx

<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">

<div class="EnterpriseNodes1">

<telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="WebBlue" MarkFirstMatch="true" Visible="false" AllowCustomText="true" Filter="StartsWith" CssClass="combo1" NoWrap="True" OnItemDataBound="RadComboBox1_ItemDataBound" AutoPostBack="false" OnSelectedIndexChanged="RadComboBox1_OnSelectedIndexChanged" OnClientSelectedIndexChanged="RadComboBox1_OnClientSelectedIndexChanged">

</telerik:RadComboBox>

<br />

<telerik:RadComboBox ID="RadComboBox2" runat="server" Skin="WebBlue" MarkFirstMatch="true" Visible="false" AllowCustomText="true" Filter="StartsWith" CssClass="combo2" NoWrap="True" OnItemDataBound="RadComboBox2_ItemDataBound" AutoPostBack="false" OnSelectedIndexChanged="RadComboBox2_OnSelectedIndexChanged" OnClientSelectedIndexChanged="RadComboBox2_OnClientSelectedIndexChanged">

</telerik:RadComboBox>

<br />

</div>

</telerik:RadAjaxPanel>

js

function RadComboBox1_OnClientSelectedIndexChanged(sender, args) {

__doPostBack('RadComboBox1', '');

}

function RadComboBox2_OnClientSelectedIndexChanged(sender, args) {

__doPostBack('RadComboBox2', '');

}

cs

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

RadComboBoxItem item = null;