Questions on UI for ASP.NET AJAX Forum

5 answers

181 views

Hi,

I'm trying to create a grid of variable size based on the datatable that feeds it.

Currently the datatable consists of a first static column, and then any number of dynamically generated columns. I would like to be able to set different properties for the static and dynamic columns (size, headings, alignment etc).

What's more, I'd like to be able to add some code triggered by clicking on the column headers (only the dynamic ones).

As it stands I'm just using autogeneratecolumns="true" to create a grid that matches the data, but I fear that this will not give me the power I need to add this more complex functionality. Am I right? How would be best to go about this?

Is there a way to set the properties of autogenerated columns to the extent I require? If so I did think to maybe split the datatable and populate the static column with its specific properties separately from the dynamic ones (at least they would share the same properties) - although this would then involve mixing autogenerate/static generation and multiple data sources which might be messy in itself. I'm on something of a deadline hence why I can't just try all possibilities in the hope that one works :)

Apologies for this somewhat rambling post, but any insight into this matter would be greatly appreciated.

Cheers.

Grid

answered on 07 Dec 2011

1 answer

138 views

Ajaxified RadContextMenu

HI,
I am trying to use Rad context menu to show update/insert or delete window in dynamic hierarchical Rad Grid. Right clicking an item in hierarchical grid displays a context menu with (Delete, Add and update options). How can I display edit/insert template for the selected item in a grid?

<asp:PlaceHolder ID="NGridPlaceHolder" runat="server">

</asp:PlaceHolder>

<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />

<telerik:RadContextMenu ID="RadMenu1" runat="server" OnClientItemClicked="RadContextMenuClicked"

EnableRoundedCorners="true" EnableShadows="true">

<Items>

<telerik:RadMenuItem Text="Add" Value="Add" />

<telerik:RadMenuItem Text="Edit" Value="Edit" />

<telerik:RadMenuItem Text="Delete" Value="Delete" />

</Items>

</telerik:RadContextMenu>

function RadContextMenuClicked(sender, eventArgs) {

var menuItemValue = eventArgs.get_item().get_text();

switch (menuItemValue) {

case "Delete":

......................................... HOW TO SHOW DELETE WINDOW AND DELETE SELECTED RECORD AND REFRESH GRID

break;..

case "Edit":

........................... HOW TO SHOW EDIT WINDOW AND DELETE SELECTED RECORD AND REFRESH GRID

break;

case "Add":

........................... HOW TO SHOW INSERT WINDOW AND REFRESH SELECTED GRID

break

;

//Show insert/edit/delete
function RowContextMenu(sender, eventArgs) {
    senderGrid = sender;
    editEventArgs = eventArgs;
     
    var menu = $find("<%=RadMenu1.ClientID%>");
    var evt = eventArgs.get_domEvent();
 
    if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
        return;
    }
 
    var index = eventArgs.get_itemIndexHierarchical();
    document.getElementById("radGridClickedRowIndex").value = index;
 
    sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
 
    menu.show(evt);
 
    evt.cancelBubble = true;
    evt.returnValue = false;
 
    if (evt.stopPropagation) {
        evt.stopPropagation();
        evt.preventDefault();
    }
}

}

C# code attaches context menu by
RadGrid radGrid = new RadGrid();
radGrid.ClientSettings.ClientEvents.OnRowContextMenu = "RowContextMenu";
I am using a programmatic hierarchical grid and a static Context Menu.

Any Ideas?
Prava

Grid

answered on 07 Dec 2011

1 answer

217 views

How to show a loading panel while uploading a file

Hi there,

I need to show a loading panel while it is still uploading, and stop showing as soon as the upload is done. The upload time may take 1-2 minutes to finish (a bunch of functions need to be executed in the back end). I have tried to search and learn some loading demos in this forum, but still cannot get what I really want. Any suggestions on how can I do this? Thanks a lot.

Upload (Obsolete)

answered on 07 Dec 2011

1 answer

112 views

RadToolBarDropDown Text

I'm writing to ask how best to apply text to the RadToolBarDropDown programmatically, in C#;

Thanks in advance for any insight; Best regards - Rob

<telerik:RadToolBar ID="RadToolBar3" runat="server" Skin="Black"

BorderWidth="0px" onbuttonclick="RadToolBar3_ButtonClick">

<Items>

<telerik:RadToolBarDropDown runat="server" Font-Size="Medium">

<Buttons>

<telerik:RadToolBarButton runat="server" Text="Sign Out" Font-Size="Medium" CheckOnClick="true" CommandName="SignOut">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" Text="Contact Us" Font-Size="Medium" CheckOnClick="true" CommandName="ContactUs">

</telerik:RadToolBarButton>

</Buttons>

</telerik:RadToolBarDropDown>

</Items>

</telerik:RadToolBar>

ToolBar

answered on 07 Dec 2011

1 answer

86 views

Need to postback without updated control

Hello, all.

I am dynamically adding a checkbox to a page. I am dynamically setting autopostback to True and wiring up an event handler that runs a Procedure in the code-behind.
The procedure doesn't update any controls on the page. It just runs code that sets a cookie. I don't want the postback 'flash' to happen, so I need to dynamically set the AddAjaxSetting. But I don't have anything to put into the "updatedControl" arguement.

How can I run

Me.RadAjaxManager1.AjaxSettings.AddAjaxSetting(myCheckBox, [nothing to put here])

?
It throws an "Object reference not set to an instance of an object" error.

Thanks in advance,
Dana

Ajax

answered on 07 Dec 2011

2 answers

170 views

Performance Issue with Grid Page Load

I am having a performance problem at page load with the Grid.
I have a particular grid (design code below, screen image attached) that loads 1000 records in about 2 seconds. There is no paging, but scrolling is utilized. That seems pretty good to me.

However, when I merge the pages from this particular project into an existing web site, the load time for this very same page, with the very same database connection, and the very same data records, goes to 10 to 12 seconds.

The only difference I can find is that the larger web site has master pages that utilize a standard script manager, not a Telerik script manager.

The display code (.aspx) for the grid is:

<asp:Panel ID="Panel1" runat="server">

<asp:Panel ID="Panel2" Visible="false" runat="server">

<telerik:RadGrid AutoGenerateColumns="false" ID="SignersGrid" OnItemCommand="SignersGrid_ItemCommand" runat="server" Width="765px"

Height="410px"

OnItemDataBound="SignersGrid_ItemDataBound" AllowSorting="true" AllowFilteringByColumn="true"

AllowPaging="true" PageSize="8" CommandItemDisplay="Bottom"

BorderWidth="1px" BorderColor="#999999" EnableEmbeddedSkins="true" Skin="Default"

DataSourceID="SQLDataSource1"

ShowStatusBar="true"

ShowFooter="false" GridLines="None" >

<PagerStyle Mode="NextPrevAndNumeric" />

<GroupingSettings CaseSensitive="false" />

<StatusBarSettings ReadyText="Ready" LoadingText="Loading..." />

<MasterTableView AutoGenerateColumns="false" EditMode="InPlace" AllowFilteringByColumn="True"

ShowFooter="True" TableLayout="Auto" DataKeyNames="VoterSignatureId" >

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn HeaderStyle-Width="125px" HeaderText="First Name" UniqueName="FirstName" DataField="FirstName" SortExpression="FirstName" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderStyle-Width="125px" UniqueName="LastName" HeaderText="Last Name" DataField="LastName" SortExpression="LastName" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderStyle-Width="350px" UniqueName="VoterAddress" HeaderText="Address" DataField="Address" SortExpression="Address" >

</telerik:GridBoundColumn >

<telerik:GridButtonColumn HeaderStyle-Width="135px" DataTextFormatString="Remove" ButtonType="PushButton" UniqueName="RemoveSigner"

ConfirmText="Are you certain that you want to remove this signature?" Text="Remove"

HeaderText="Remove" CommandName="RemoveSigner" CommandArgument="VoterSignatureId" DataTextField="VoterSignatureId" >

</telerik:GridButtonColumn>

<telerik:GridBoundColumn UniqueName="VoterSignatureId" HeaderText="Id" DataField="VoterSignatureId" Visible="false" >

</telerik:GridBoundColumn >

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

</ClientSettings>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

</HeaderContextMenu>

</telerik:RadGrid>

</asp:Panel>

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

Height="100px" Width="100px" Transparency="50"

>

<img alt="Loading..." src="ajax-loader.gif" style="border: 0; height: 40px; width: 40px;" />

</telerik:RadAjaxLoadingPanel>

There is some code in the code-behind file. That code is:

protected void Page_Init(object sender, EventArgs e)

{

string griddatasource = "SELECT VoterSignatureId, PetitionId, LastName, FirstName, [Address] FROM VoterSignatures ";

string gridWHERE = "WHERE VoterSignatureStatusId = 1 AND PetitionId = " + Request.QueryString["PID"];

SqlDataSource1.SelectCommand = griddatasource + gridWHERE;

}

protected void SignersGrid_ItemCommand(Object source, Telerik.Web.UI.GridCommandEventArgs e)

{

if (e.CommandName == "RemoveSigner")

{

// First we need to get the key value of the record the user wants to remove from the lsit

Object index = e.CommandArgument;

Int16 iSignerRecKey = Convert.ToInt16(index);

// Now we can get the record, change it (remove it from the list), and update it

ElectronicPetitionSystemDataContext efdc = new ElectronicPetitionSystemDataContext();

VoterSignature vs = efdc.VoterSignatures.Single(vrec => vrec.VoterSignatureId == iSignerRecKey);

vs.VoterSignatureStatusId = 2;

efdc.SubmitChanges();

this.SignersGrid.Rebind();

}

protected void SignersGrid_ItemDataBound(Object sender, Telerik.Web.UI.GridItemEventArgs e)

//

{

if (e.Item is GridDataItem)

{

//GridDataItem dataItem = e.Item as GridDataItem;

//Button button_Renamed = (Button)dataItem["RemoveSigner"].Controls[0];

//button_Renamed.CommandArgument = Convert.ToString(DataBinder.Eval(e.Item.DataItem, "VoterSignatureId"));

//String sMsg = "";

//sMsg = "Are you certain that you want to remove " + Convert.ToString(DataBinder.Eval(e.Item.DataItem, "FirstName")) + "?";

// Telerik example for this is located at:

// http://www.telerik.com/community/forums/aspnet/grid/commandargument-using-a-button-column.aspx

}

protected void SignersGrid_AjaxRequest(Object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

{

if (e.Argument == "InitialPageLoad")

{

//System.Threading.Thread.Sleep(1000);

this.Panel2.Visible = true;

}

The screen capture of the grid is attached.

Do you have any suggestions of what I could look at to run down this severe performance change from site to site?

Thanks in advance!

Lynn

Grid

answered on 07 Dec 2011

1 answer

121 views

Update Group AND Grid Totals on Client Side

Hello,

I'm using a RadGrid with a number of GridNumericColumnEditor controls. When in Edit Mode, I need to update Group AND Grid totals as the user updates the values in the NumericTextBoxes (via JavaScript?), not after an Update. Is this possible? If so, how can I do it. I've found a number of examples that will update the Grid totals via JavaScript but, I haven't been able to find something that would update the Group totals as well.

Thanks for your help.

Jeremy

Grid

answered on 07 Dec 2011

2 answers

135 views

Ajax and User Controls

I've recently noticed the this causes the loading panel to not work properly, which is not a big deal, but now I have run into a problem with getting a radcombobox to work, so I need to figure out how to fix this.

The code in this user control works fine if I hardcode the control onto the page. It quits working properly (especially the radComboBox), once I change the user control to being dynamically added.

I tried adding the ajaxsettings from the code behind on page_load, according to this example: http://www.telerik.com/help/aspnet-ajax/ajax-user-controls.html, but this also stops working when placed on a user control that is added at runtime.

The code below is simplified to have a workable example. Thank you for your help.

USER CONTROL ASCX CODE

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ctrlTest.ascx.cs" Inherits="ctrlTest" %>

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

<telerik:RadAjaxManager EnableAJAX="true" ID="RadAjaxManagerlvReviews" runat="server" >

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="pGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pGrid" LoadingPanelID="RadAjaxLoadingPanelCESearch" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnViewAllCECourses">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pGrid" LoadingPanelID="RadAjaxLoadingPanelCESearch" />

<telerik:AjaxUpdatedControl ControlID="pSearch" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnSearchCECourses">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pGrid" LoadingPanelID="RadAjaxLoadingPanelCESearch" />

<telerik:AjaxUpdatedControl ControlID="pSearch" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelCESearch" runat="server" Height="75px" Width="75px" Transparency="50" InitialDelayTime="0" >

<img alt="Loading..."

src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'  style="border: 0px;" />

</telerik:RadAjaxLoadingPanel>

<asp:Panel ID="pSearch" runat="server">

<telerik:radcombobox runat="server" id="radCategories" ShowToggleImage=true Width="195px" />

<asp:Button ID="btnSearchCECourses" runat="server" Text="Search Courses" OnClick="btnSearchCECourses_Click" CausesValidation="False" BWidth="MedLarge" Height="27px" style="font-size:12px;" />

<asp:Button ID="btnViewAllCECourses" runat="server" Text="ViewAllCourses" OnClick="btnViewAllCECourses_Click" CausesValidation="False" BWidth="MedLarge" Height="27px" style="font-size:12px;" />

</asp:Panel>

<asp:Panel ID="pGrid" runat="server">

<telerik:RadListView ID="lvCEResults" runat="server"

OnNeedDataSource="lvCEResults_NeedDataSource"

AllowCustomPaging="true" AllowPaging="true" ItemPlaceholderID="phRadListView"

Width="760px"

>

<LayoutTemplate>

<telerik:RadDataPager ID="RadDataPagerTop" runat="server" IsTotalItemCountFixed="True" Skin="Windows7" CssClass="Custom">

<Fields>

<telerik:RadDataPagerButtonField FieldType="FirstPrev" />

<telerik:RadDataPagerButtonField FieldType="Numeric" />

<telerik:RadDataPagerButtonField FieldType="NextLast" />

</Fields>

</telerik:RadDataPager>

<div style="height:10px"></div>

<asp:PlaceHolder ID="phRadListView" runat="server"></asp:PlaceHolder>

<telerik:RadDataPager ID="RadDataPagerBottom" runat="server" IsTotalItemCountFixed="True" Skin="Windows7" CssClass="Custom">

<Fields>

<telerik:RadDataPagerButtonField FieldType="FirstPrev" />

<telerik:RadDataPagerButtonField FieldType="Numeric" />

<telerik:RadDataPagerButtonField FieldType="NextLast" />

</Fields>

</telerik:RadDataPager>

</LayoutTemplate>

<ItemTemplate>

<table>

<tr>

<td><%#Eval("course_id") %></td>

<td><%#Eval("description") %></td>

</tr>

</table>

</ItemTemplate>

</telerik:RadListView>

</asp:Panel>

USER CONTROL CODE BEHIND

public partial class ctrlTest : System.Web.UI.UserControl

{

DataTable dt = new DataTable();

protected void Page_Load(object sender, EventArgs e)

{

CreateCategoryData();

}

protected void lvCEResults_NeedDataSource(object source, RadListViewNeedDataSourceEventArgs e)

{

CreateCEData();

lvCEResults.VirtualItemCount = 30;

lvCEResults.DataSource = dt;

}

private void CreateCEData()

{

dt.Columns.Add("course_id");

dt.Columns.Add("description");

for (int i = 0;i <=30;i++)

{

dt.Rows.Add(i,"desc" + i);

}

private void CreateCategoryData()

{

DataTable dtCategories = new DataTable();

dtCategories.Columns.Add("category_id");

dtCategories.Columns.Add("description");

for (int i = 1; i <= 30; i++)

{

dtCategories.Rows.Add(i, "category_" + i);

}

radCategories.Items.Add(new RadComboBoxItem("AllCategories", "0"));

foreach (DataRow dr in dtCategories.Rows)

{

radCategories.Items.Add(new RadComboBoxItem(dr["description"].ToString(), dr["category_id"].ToString()));

}

protected void btnSearchCECourses_Click(object sender, System.EventArgs e)

{

lvCEResults.CurrentPageIndex = 0;

lvCEResults.Rebind();

}

protected void btnViewAllCECourses_Click(object sender, EventArgs e)

{

radCategories.SelectedValue = "0";

lvCEResults.CurrentPageIndex = 0;

lvCEResults.Rebind();

}

Page code:

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

<%@ Register TagPrefix="UC" src="ctrlTest.ascx" TagName="TEST" %>

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

</head>

<body>

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

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

<div>

<asp:Panel ID="ph" runat="server" EnableViewState=true />

</div>

</form>

</body>

</html>

Page code behind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

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

{

protected void Page_Load(object sender, EventArgs e)

{

ctrlTest ucSearchResults = (ctrlTest)LoadControl("ctrlTest.ascx");

ph.Controls.Add(ucSearchResults);

}

Ajax

answered on 06 Dec 2011

3 answers

132 views

Hierarchical RadGrid Databinding Issue

Hello,

I have a 3-tier radgrid and I am using the DetailTableDataBind to set the SelectParameters of my ObjectDataSources. I am having trouble on the third tier accessing the information correctly. The data keys on the third tier contain all of the IDs I need for the datasource, but I could also get the keys from the first and second tier as they are the same. But I cannot seem to get the syntax correct to do this. My aspx and vb code are below.

ASPX:

<telerik:RadGrid ID="gvSites" DataSourceID="odsSiteList" runat="server" AutoGenerateColumns="False" GridLines="None">

<MasterTableView DataSourceID="odsSiteList" DataKeyNames="ID" Name="Sites" EditMode="EditForms">

<DetailTables>

<telerik:GridTableView CssClass="detail_table" DataSourceID="odsCategoryList" AutoGenerateColumns="false" DataKeyNames="ID" Name="Categories" AllowAutomaticInserts="true" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true" CommandItemDisplay="Top" CommandItemSettings-AddNewRecordText="Add Category">

<DetailTables>

<telerik:GridTableView CssClass="detail_table" DataSourceID="odsItemList" AutoGenerateColumns="false" DataKeyNames="Site_ID,Item_ID,Category_ID" Name="Items" AllowAutomaticInserts="true" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true" CommandItemDisplay="Top" CommandItemSettings-AddNewRecordText="Add Item">

VB:

Private Sub gvSites_DetailTableDataBind(ByVal source As Object, ByVal e As GridDetailTableDataBindEventArgs) Handles gvSites.DetailTableDataBind

Dim dataItem As GridDataItem = CType(e.DetailTableView.ParentItem, GridDataItem)

If "Categories".Equals(e.DetailTableView.Name) Then

odsCategoryList.SelectParameters("SiteID").DefaultValue = dataItem.GetDataKeyValue("ID").ToString()

End If

If "Items".Equals(e.DetailTableView.Name) Then

odsItemList.SelectParameters("CategoryID").DefaultValue = dataItem.GetDataKeyValue("ID").ToString()

odsItemList.SelectParameters("SiteID").DefaultValue = ???

End If

End Sub

So my issue here is getting the SiteID. It is the DataKey on the first-tier and it is also one of the DataKeys on the third-tier but I am not sure how to access it. I either need to get the SiteID from the current levels ("Items") DataKeys or get the parent of the parent.

Thank you,

Steve

Grid

answered on 06 Dec 2011

2 answers

133 views

Speeding up my TreeList...

I build a rather large multi-tier tree list that represents a large checklist. The original intent was to render the whole checklist and let the user scroll through as they complete. Each item in the tree list contains text, and one or more input's ( textbox, checkbox, radio). When a user completes the checklist item, they press the "Confirm" button within that tree list row.

My problem is, any post-back seems to rebuild the whole tree. What are my options, to rebuild just the items within the tree list row? I'm not against using a DetailTemplate and ditching the 'columns' of the list all together. For that matter, i'm open to Treeview.

If I wrap my item level controls in an UpdatePanel will that allow me a finer resolution during postback? Can I have an update panel within a Cell or DetailTemplate with a postback button that doesn't force the whole tree to postback?

One option is to not postback at all, and keep track of the state client-side until they click some master 'I'm done" button, but the worse case scenario there is every response is lost to an exception, power loss, or closing the browser window.

Any suggestions?

TreeList

answered on 06 Dec 2011