Questions on UI for ASP.NET AJAX Forum

1 answer

79 views

Declarative client-side data-binding WCF Data Service

Dear Telerik,
I am using Declarative client-side data-binding for RadGrid with WCF Data Service.
I want to apply an initial filter on data, I know that radgrid filters add "$filter" to the DataService>TableName so if I do TableName="TableName?$filter=ID eq 1" when I apply a grid filter I will have two $filter keyword in the url or i want one $filter and an "and" keyword ..
ex:TableName?$filter=ID eq 1 and name eq 'jhon'

Please don't tell me to use Programmatic Binding because it's time consuming and require a lot of code

Thank you in advance
Tarek

Grid

answered on 29 Oct 2013

1 answer

79 views

Lightweight rendering does not render any styles

I just upgraded to the latest greatest 2013 Q3 build and I noticed that the grid in lightweight rendering mode does not render any styles.

I attached a couple of screen shots comparing default to lightweight.

Grid

answered on 29 Oct 2013

5 answers

137 views

Setting width of tilelist through JavaScript.

The documentation claims that this can be done with the set_width() method on the client side.

However, in order to call this method, you need a reference to the TileList. According to the documentation, this is done via $telerik.findTileList(id, parent) where id is a string representation of the id and parent is the element containg the tilelist.

So, assuming the following document structure...

<body>

<form id="form">

<div id="tiles">

<div id="centering">

<telerirk RadTileList ID="NavTiles"></telerik:RadTileList>

</div>

</form>

</body>

... what is the correct javascript to set the width of the TileList to 900px? I can't make this work, because no matter what I pass to findTileList I always get null back.

TileList

answered on 29 Oct 2013

5 answers

302 views

RADGrid does not re-size on column re-size in chrome browser

Hi,

In Google chrome browser, when user increases grid column size on client side, grid does not re size so it does not show right columns and it does not show horizontal scroll bar as well. I use Telerik.Web.UI.dll released on 02-Apr-2013 version 2013.1.403.35.

HTML page code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ 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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script type="text/javascript">

//$(document).ready(SetObject);

$(window).resize(SetRADGrid);

function SetRADGrid() {

var grid = document.getElementById(rdgrdGenericReportClientID);

var windowHeight = $(window).height();

var windowWidth = $(window).width();

var gridHeight = 0;

var contentPageHeight = 510;

var pageHeaderAndFooter = 125;

var gridHeader = 75;

gridHeight = windowHeight - pageHeaderAndFooter < contentPageHeight ? contentPageHeight - gridHeader : windowHeight - gridHeader - pageHeaderAndFooter;

grid.style.height = gridHeight + "px";

var webSiteWidth = 1024;

var submenuWidth = 231;

var gridWidth = windowWidth < webSiteWidth ? webSiteWidth - submenuWidth : windowWidth - submenuWidth;

grid.style.width = gridWidth+ "px";

//grid.repaint();

}

function GridCreating(sender, eventArgs) {

SetRADGrid();

}

function ColumnResized(sender, eventArgs) {

//alert('hi');

SetRADGrid();

}

</script>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<telerik:RadGrid ID="rdgrdGenericReport" AllowSorting="True" runat="server" GridLines="None"

AllowPaging="True" PageSize="25"

AllowFilteringByColumn="True" OnNeedDataSource="rdgrdGenericReport_NeedDataSource"

OnColumnCreated="rdgrdGenericReport_ColumnCreated" ShowGroupPanel="True"

EnableLinqExpressions="False" EnableTheming="false" Style="overflow: hidden;

position: relative">

<GroupHeaderItemStyle Font-Bold="True" />

<ClientSettings Resizing-AllowColumnResize="true" AllowDragToGroup="True">

<Resizing AllowColumnResize="True" ResizeGridOnColumnResize="true"></Resizing>

<Scrolling AllowScroll="true" />

<ClientEvents OnGridCreating="SetRADGrid" OnColumnResized="SetRADGrid" />

</ClientSettings>

<ExportSettings ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true">

</ExportSettings>

<MasterTableView ShowHeader="true" BorderStyle="None" CommandItemDisplay="Top" TableLayout="Fixed">

<HeaderStyle Font-Bold="true"></HeaderStyle>

<FooterStyle HorizontalAlign="right"></FooterStyle>

<CommandItemTemplate/>

</MasterTableView>

<PagerStyle Mode="NextPrevAndNumeric" />

</telerik:RadGrid>

</div>

</form>

</body>

</html>

Code behind

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

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

{

protected void Page_Load(object sender, EventArgs e)

{

Page.ClientScript.RegisterStartupScript(this.GetType(), "RADGrid", string.Format("rdgrdGenericReportClientID='{0}';", rdgrdGenericReport.ClientID), true);

}

protected void rdgrdGenericReport_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

BO bo = new BO();

rdgrdGenericReport.DataSource = bo.GetStudent();

}

protected void rdgrdGenericReport_ColumnCreated(object sender, GridColumnCreatedEventArgs e)

{

e.Column.HeaderStyle.Width = Unit.Pixel(100);

}

public class BO

{

public List<Student> GetStudent()

{

List<Student> students = new List<Student>();

for (int counter = 1; counter <= 45; counter++)

{

students.Add(new Student(counter.ToString(),

string.Format("Student({0})", counter),

string.Format("Class Name A{0}", counter),

string.Format("Marks 10{0}", counter),

string.Format("Student Rank is {0}", counter)

));

}

return students;

}

public class Student

{

public Student(string id, string name, string className, string marks, string rank)

{

ID = id;

Name = name;

ClassName = className;

Marks = marks;

Rank = rank;

}

public string ID { get; set; }

public string Name { get; set; }

public string ClassName { get; set; }

public string Marks { get; set; }

public string Rank { get; set; }

}

Please find attached same sample code without telerik dll.

Grid

answered on 29 Oct 2013

8 answers

188 views

Telerik Grid Not Returning Correct ID When Paging Enabled

Hello Support,



I am experiencing an issue with the Telerik Grid where I'm trying to delete a customer using 

gvCustomers_DeleteCommand(object sender, GridCommandEventArgs e)and the incorrect Customer ID 

is being passed. I believe this is happening because of paging is enabled.



What am I doing wrong?  Thanks for your help in advance.



See code below:



<

telerik:RadGrid ID="gvCustomers" runat="server"

AllowPaging="true"

AllowSorting="true"

AllowAutomaticDeletes="true"

AutoGenerateColumns="false"

PageSize="10"

DataKeyNames="CustomerId"

OnItemCreated="gvCustomers_ItemCreated"

OnItemCommand="gvCustomers_ItemCommand"

OnItemDeleted="gvCustomers_ItemDeleted"

OnDeleteCommand="gvCustomers_DeleteCommand"

OnNeedDataSource="gvCustomers_NeedDataSource">

<ClientSettings EnableRowHoverStyle="true" EnableAlternatingItems="true">

<Selecting AllowRowSelect="true" />

<ClientEvents OnRowDblClick="RowDblClick" />

</ClientSettings>

<ExportSettings HideStructureColumns="true" ExportOnlyData="true" />

<MasterTableView AutoGenerateColumns="false" DataKeyNames="CustomerId"

ClientDataKeyNames="CustomerId" CommandItemDisplay="Top">

<CommandItemSettings

ShowAddNewRecordButton="false"

ShowExportToCsvButton="true"

ShowRefreshButton="false" />

<Columns>

<telerik:GridTemplateColumn HeaderText="Edit" UniqueName="EditCustomer">

<ItemTemplate>

<asp:HyperLink ID="hlEditCustomer" runat="server" ToolTip="Update Customer Record" Text="Edit" ImageUrl="images/glyphicons_halflings_060_pencil.png" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Transactions" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" UniqueName="CustomerTransactions">

<ItemTemplate>

<asp:HyperLink ID="hlTransactions" runat="server" ToolTip="Customer Transactions" ImageUrl="~/images/glyphicons_halflings_031_list-alt.png" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="New Sale" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" UniqueName="CustomerSales">

<ItemTemplate>

<asp:HyperLink ID="hlNewSale" runat="server" ToolTip="New Customer Sale" ImageUrl="~/images/glyphicons_halflings_147_usd.png" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="CustomerId" HeaderText="Customer ID" SortExpression="CustomerId" />

<telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />

<telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />

<telerik:GridBoundColumn DataField="Organization" HeaderText="Organization" SortExpression="Organization" />

<telerik:GridBoundColumn DataField="Address1" HeaderText="Address" SortExpression="Address1" />

<telerik:GridBoundColumn DataField="Address2" HeaderText="Address 2" SortExpression="Address2" Visible="false" />

<telerik:GridBoundColumn DataField="City" HeaderText="City" SortExpression="City" />

<telerik:GridBoundColumn DataField="State" HeaderText="State" SortExpression="State" />

<telerik:GridBoundColumn DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />

<telerik:GridButtonColumn

UniqueName="DeleteCustomer"

ConfirmText="Are you sure you want to delete this customer?"

ConfirmDialogType="Classic"

ConfirmTitle="Delete"

ButtonType="ImageButton"

CommandName="Delete"

CommandArgument="CustomerId"

HeaderText="Delete"

HeaderStyle-Width="20"

HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Center"

ImageUrl="~/images/glyphicons_halflings_019_trash.png" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

protected void gvCustomers_DeleteCommand(object sender, GridCommandEventArgs e)

{

var item = (GridDataItem)e.Item;



           // This is return the incorrect CustomerId because of paging.

var id = item.GetDataKeyValue("CustomerId").ToString();

var customer = new Customer(id);

customer.Delete();

ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind();", true);

// Click the Search button

btnSearch_Click(sender, e);

//e.Item.OwnerTableView.ParentItem.OwnerTableView.Rebind();

}

Grid

answered on 29 Oct 2013

1 answer

95 views

Control opening a website

Hello,

I have a problem with shortcut to open a URL (It's not mainly related to Telerik web UI, but it could help)

The scenario is
I have a website developed by Telerik AJAX web control, On the client side (User PC) I create a shortcut (contains URL) on desktop to facilitate opining the site.
Suppose I'm using CHROME browser, I need to control opening the website (Single instance of the web site opened) means that, First time when user click on desktop shortcut it fires the browser (for example chrome) then open the website, second time or others time when user click on desktop shortcut (same shortcut) to open the website, It should retrieve the opened one if it opened before, If not then open a new instance (new browser tab)

Is there any argument can pass it to chrome or any way to satisfy this issue ?!

General Discussions

answered on 29 Oct 2013

4 answers

148 views

File doesn't upload using RadAsyncUpload in a RadWindow

I have a RadAsyncUpload control in a RadWindow, but can't get it to save the file. I previously had the same upload control dynamically added on the page (outside the window) and it was working fine. Can someone help me with this?

First of all, I have a RadWindow defined:

<telerik:RadWindow ID="winUploadImage" runat="server" VisibleOnPageLoad="false" OnClientShow="windowLoad"

VisibleStatusbar="false" AutoSize="false" Width="451" Height="275">

<ContentTemplate>

</ContentTemplate>

</telerik:RadWindow>

Next, I have a dynamically created RadAsyncUpload Control that is created and added to the window:

protected void BtnUpload_Click(object sender, EventArgs e)

{

winUploadImage.ContentContainer.Controls.Add(new LiteralControl("<div class=\"quotebox\"><table class=\"quotetext\"><tr><td colspan=\"2\" class=\"quotetext\">"

+ "</td></tr><tr><td class=\"quotetext\">Do you want to use a previously uploaded image?" + "</td>"

+ "</tr>"

+ "</table></div>"

));

RadButton clickedButton = new RadButton();

clickedButton = (RadButton)sender;

RadAsyncUpload upload = new RadAsyncUpload();

upload.ID = "rauChoice";

upload.Attributes.Add("runat", "server");

upload.Attributes.Add("type", clickedButton.Attributes["type"]);

upload.Attributes.Add("subtype", clickedButton.Attributes["subtype"]);

//upload.Height = Unit.Parse("86px");

//upload.Width = Unit.Parse("1px");

upload.TargetFolder = "~/App_Images/uploads";

upload.TemporaryFolder = "~/App_Data/RadUploadTemp";

upload.FileUploaded += new FileUploadedEventHandler(ChangeFilename);

upload.OnClientFileUploading = "uploading_file";

upload.MaxFileInputsCount = 1;

upload.MaxFileSize = 5000000; // 5 MB

winUploadImage.ContentContainer.Controls.Add(imgAdd);

winUploadImage.ContentContainer.Controls.Add(upload);

winUploadImage.Modal = false;

winUploadImage.Behaviors = Telerik.Web.UI.WindowBehaviors.Close;

//winUploadImage.Top = 650;

//winUploadImage.Left = 825;

winUploadImage.OffsetElementID = divOptions.ClientID;

winUploadImage.Top = 40;

winUploadImage.Left = -25;

winUploadImage.VisibleOnPageLoad = true;

}

When the files is uploaded, it should call this function

protected void ChangeFilename(object sender, FileUploadedEventArgs e)

{

try

{

RadAsyncUpload uploadMod = new RadAsyncUpload();

uploadMod = (RadAsyncUpload)sender;

string targetFolder = uploadMod.TargetFolder;

string newName =

uploadMod.Attributes["type"] + "!"

+ uploadMod.Attributes["subtype"] + "!"

+ DateTime.Now.ToString("yyyyMMddHHmmssfff")

;

Session[uploadMod.ID] = newName + e.File.GetExtension();

e.File.SaveAs(Path.Combine(Server.MapPath(targetFolder), newName + e.File.GetExtension()));

}

catch (Exception ex)

{

throw ex;

}

When a button inside the window is pressed, the page posts back, but the file is not uploaded (it is not saved in the target folder and the ChangeFilename funtion is not called).

How can I get the file to upload correctly?

General Discussions

answered on 29 Oct 2013

1 answer

90 views

DataBind Performance Issue

Hi,
we have a RadGrid control which has custom paging enabled. The maximum page size is equal to 50 records.
When the selected page size is equal to 30 records, the DataBind takes about 3 seconds to complete and the time is increased when page size increases.

Each GridTemplateColumn consists of a literal control which value is set in the DataBind event (see the code below).

<custom:RequestUrgency DataField="SolverUrgencyId" Groupable="false" FilterControlWidth="180px" HeaderText="Αμεσότητα" UniqueName="RequestSolverUrgency">

<asp:Literal ID="litSolverUrgencyId" runat="server" Text='<%# Eval("SolverUrgencyId") %>'>

</asp:Literal>

</ItemTemplate>

</custom:RequestUrgency>

The value of the literal changes to the DataBind event as below

protected void gridRequests_ItemDataBound(object sender, GridItemEventArgs e)

{

try

{

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

{
#region Urgency

Literal litSolverUrgencyId = (Literal)e.Item.FindControl("litSolverUrgencyId");

dt = DAL.GetServiceRequestUrgency(request.SolverUrgencyId);

litSolverUrgencyId.Text = dt.Rows[0]["Title"].ToString();

#endregion

}

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

}

    catch
    {
    }
}

The RadGrid consists of 24 columns.
How can we reduce the DataBind time??

Thank you very much,
Angie

Grid

answered on 29 Oct 2013

0 answers

82 views

Refresh Parent form and maintain the Tab Selection

Dear Telerik Team,

I have requirement to call popup from a form that has "Telerik:RadTabStrip".
Each Tab has Add/Edit HTML button and One Telerik Rad Grid that display list of record, on Add/Edit click, It open one popup using window.open(). On save button click of Popup window, it should refresh and maintain the Tab which was in selection before opening the popup.
Here I could not refresh the parent form. we used the following code to refresh when the parent form has no "Telerik:RadTabStrip".

window.opener.location.href = window.opener.location;
window.opener.document.forms[0].submit();

window.opener.location return "null" when parent form has "Telerik:RadTabStrip".

we tried alternate to refresh and display the parent form by response.redirect but it always keep the first Tab selected instead of previously selected Tab. is there work around to select the Tab through program/code either client side or server side.

Kindly Guide us to resolve this issue.

Thanks and Regards
Palanivelrajan

TabStrip

asked on 29 Oct 2013

12 answers

355 views

RadGrid Column width issues after upgrade to Telerik 2013.2.611 version

Hi,

Yesterday I upgraded the telerik version to the latest 611 release and found that the RadGrid is not working fine as it was previously doing.
I have my RadGrid with some 10 columns and I have the ItemStyle-Width and the HeaderStyle-width set for each of the columns.
The grid renders fine for the first time when there is a postback performed the column settings are messed up for the headings.

I went in to check with the firebug tool and found that the colGroup settings are messed up when there is a postback.

<telerik:GridTemplateColumn HeaderText="One" SortExpression="One" DataField="One"

UniqueName="One" ItemStyle-Width="10%" HeaderStyle-Width="10%">

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "One").ToString%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Two" SortExpression="Two"

UniqueName="Two" DataField="Two" ItemStyle-Width="15%" HeaderStyle-Width="15%">

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "Two").ToString().Split(" ")(0)%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Three" SortExpression="Three" DataField="Three"

UniqueName="Three" ItemStyle-Width="20%" HeaderStyle-Width="20%">

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "Three").ToString%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Four" SortExpression="Four" DataField="Four"

UniqueName="Four" ItemStyle-Width="20%" HeaderStyle-Width="20%">

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "Four").ToString.Replace(Chr(13),"</br>")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Five" SortExpression="Five"

UniqueName="Five" DataField="Five" ItemStyle-Width="20%" HeaderStyle-Width="20%">

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "Five").ToString%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Six" SortExpression="Six"

UniqueName="Six" DataField="Six" ItemStyle-Width="8%" HeaderStyle-Width="8%">

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "Six").ToString().Split(" ")(0)%>

</ItemTemplate>

</telerik:GridTemplateColumn>

Column settings for the colGroup changes during a postback. I found an extra set of col width setting inserted after postback which has the width set in pixels. Where as the width settings for the tbody contents are fine. I have attached an image showing the width settings rendered before and after postback below.

Please do let me know how this issue can be fixed.

Thanks,
Karthik

Grid

answered on 29 Oct 2013