Questions on UI for ASP.NET AJAX Forum

1 answer

205 views

Programmatic selection of grid rows - performance issues

Hi there,

I'm having performance problems with some client-side code that programmatically selects rows in my grid. The grid has 20 columns of varying type - template columns and bound columns. There's also a checkbox column as my grid is multi-select enabled.

Above my grid I've put a series of span elements with an onclick handler that allow the user to quickly select rows in the grid with a single click:

Select all | Deselect all | Select payables | Select receivables

Here's the code I use to do the selection:

    
            // Pick up the grid's master table  
        
            var masterTable = $find("<%= grdResults.ClientID %>").get_masterTableView();    
        
            // Loop through the grid's items  
        
            for(var i=0;i<masterTable.get_dataItems().length;i++)    
        
            {  
        
                masterTable.selectItem(masterTable.get_dataItems()[i].get_element());    
        
            }

This does work, but if I have over 50 rows in my grid then it starts to run slowly, and if I have 100 rows in the grid I get the Internet Explorer dialog that warns that a script is running slowly.

There is code in the grid row selecting, selected, and deselected client-side events, but I set a flag at runtime indicating that I'm selecting rows programmatically so that the event handlers return without doing anything while the programmatic selection takes place.

So, two questions...

1. Is there a way of speeding up the programmatic selection any more?

2. If not then is there a way of displaying a loading panel using only client-side code, no postbacks?

Many thanks in advance,
Rob

Grid

answered on 14 Nov 2008

12 answers

172 views

I can't see the columns in Master table

When I go to Property Builder --> Master table --> Columns I can't see my database columns neither in Available columns pane nor in Selected columns pane.
Any idea why is this happening?

Grid

answered on 14 Nov 2008

1 answer

439 views

CommandName is empty if the column if created from code

Hi

Im trying to create a Grid entirely from code. But I am experiencing som problems when I add a "GridButtonColumn" and specify a CommandName. In "RadGrid_ItemCommand" when I check the value of e.CommandName I get an empty string.

This I how my column is defined:

    
            Telerik.Web.UI.GridButtonColumn cColumn3 = new Telerik.Web.UI.GridButtonColumn();  
        
            cColumn3.HeaderText = "Header1";  
        
            cColumn3.UniqueName = "column1";  
        
            cColumn3.DataTextField = "name";  
        
            cColumn3.CommandName = "ModifyItem";

If the add the column to my grid the "standard" way like:

    
            <MasterTableView> 
        
                <Columns> 
        
                   <telerik:GridButtonColumn HeaderText="Header1" UniqueName="column1" CommandName="ModifyItem" DataTextField="name"/>
        
                </Columns> 
        
            </MasterTableView>

.. then it works fine (e.CommandName = "ModifyItem").

Does anyone know if the is a bug when setting the "CommandName" in code.

Could anyone please provide me with a working example of creating a GridButtonColumn from code with a CommandName that can be checked in the even "ItemCommand".

Thanks In advance

Grid

answered on 14 Nov 2008

3 answers

204 views

Add OnItemDatabound at runtime?

I programatically generate radgrid through PlaceHolder.
I also created a sub called "RadGrid1_ItemDataBound".
but how do I execute it since there is no property "OnItemDataBound" in runtime.

I need to be able to click on the link from boundLinkColumn and display radwindow.

Please help.
Thanks
Den

Grid

answered on 14 Nov 2008

3 answers

121 views

Preventing Auto-Generated Forms

I have an grid where I am programatically handling the edit command (it displays a panel, etc...). However, I cannot seem to be able to prevent the auto-generated edit form from appearing below the item for which I clicked "Edit". I can make it a pop-up or even a custom form, but not prevent it. Is there a way to do this?

Grid

answered on 14 Nov 2008

3 answers

179 views

dependency between controls in grid

Is there a way dependency can be established between 2 dropdown controls in the grid.

Also if i have a dropdown control outside the grid on the form, can the dropdown control in grid be dependent on dropdown control outside the grid. Can this depenedency be established?

Thanks

Grid

answered on 14 Nov 2008

1 answer

154 views

Customizing with GridTemplateColumn from Code Behind

I need to be able to create something like this
http://www.telerik.com/help/aspnet-ajax/grdcustomizewithgridtemplatecolumn.html

From the code behind but I couldn't find headerTemplate property

RadGrid1.Columns(1).headerTemplate()

Please help
Den

Grid

answered on 14 Nov 2008

1 answer

129 views

ImageButton is not triggering Item_Command Event

Hi,

I am generating the RadGrid (ASPNET AJAX Q1 2008) dynamically (Creating entire grid programmatically). Since the grid has child controls (as part of GridTemplateColumn & PagerTemplate) I had set EnableViewState = False for Grid as well as page (according to this article: http://www.telerik.com/help/aspnet-ajax/grdprogrammaticcreation.html). But the problem is I have “ImageButton” inside GridTemplateColumn. It has CommandName property set. When I click on the ImageButton, it does not trigger “ItemCommand” event handler. But the LinkButton works perfect. So, in order to make sure I am doing right; I had created a sample project which does the similar functionality. Here is the code:

<%@ Page Language="C#" AutoEventWireup="True" EnableEventValidation="false" CodeBehind="RadGridTest.aspx.cs" Inherits="Adc.Web.AdBid.Views.CampaignView.RadGridTest" %>

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

</head>

<body>

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

<telerik:RadGrid ID="rad" runat="server" runat="server" EnableViewState="False" OnNeedDataSource="RadGrid_NeedDataSource"

OnItemCommand="RadGrid_ItemCommand" OnItemDataBound="RadGrid_ItemDataBound" AllowPaging="true" AutoGenerateColumns="false"

HeaderStyle-Wrap="true" PagerStyle-AlwaysVisible="true">

<telerik:GridTemplateColumn UniqueName="CampaignName" DataField="CampaignName" HeaderText="Campaign Name">

<asp:LinkButton ID="testCampaignBtn" runat="server" CommandName="Campaign" Text='<%# DataBinder.Eval(Container.DataItem,"CampaignName") %>'></asp:LinkButton>

<asp:ImageButton ID="testCBtn" runat="server" CommandName="EditCampaign" ImageUrl="~/Images/edit_icon.gif" EnableViewState="true" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="Status" DataField="Status" HeaderText="Status"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="EditCampaignImage">

<asp:ImageButton ID="testImageBtn" runat="server" CommandName="EditCampaign" ImageUrl="~/Images/edit_icon.gif" EnableViewState="true" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</RowIndicatorColumn>

</ExpandCollapseColumn>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</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 System.Web.UI.HtmlControls;

using System.Globalization;

using Telerik.Web.UI;

using Adc.SelfService.Patterns;

using Adc.SelfService.Configuration;

using Adc.SelfService.AdBid;

using Adc.Data.AdBid;

using Adc.Web.AdBid.Common;

using Adc.Web.UI.Controls;

using Adc.Services.Adbid;

using Adc.SelfService;

namespace Adc.Web.AdBid.Views.CampaignView

{

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

{

Guid OrderId = new Guid("3bfd9791-daba-4e62-bb42-c02ba465992f");

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

LoadCampaignData();

}

protected void RadGrid_ItemCommand(object sender, GridCommandEventArgs e)

{

switch(e.CommandName)

{

case "EditCampaign":

string str = "Do Something";

str = str + "...";

break;

case "Campaign":

string str1 = "Do Campaign";

str1 = str1 + "...";

break;

}

protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e)

{

}

private void LoadCampaignData()

{

if (OrderId != null && OrderId != Guid.Empty)

{

object[] param = new object[4];

param[0] = OrderId;

param[1] = null;// (string.IsNullOrEmpty(campaignSummaryView.SortFieldName)) ? "" : campaignSummaryView.SortFieldName;

param[2] = null;// campaignSummaryView.SortOder;

param[3] = Adc.Data.AdBid.CampaignStatus.All;

CampaignPresenter p = new CampaignPresenter();

CampaignDataMiner miner = new CampaignDataMiner();

ISelfServiceViewData data = miner.GetData(param);

CampaignCollection cc = ((Adc.Data.AdBid.Campaign)data).CampaignSummaryCollection; ;

rad.DataSource = cc;

rad.VirtualItemCount = miner.GetVirtualItemCount(param);

}

Note that it’s a sample project for your reference. In actual project I am generating the grid programatically. Please provide the solution to this at the earliest. Some one can please help me with a better solution.

Grid

answered on 14 Nov 2008

1 answer

103 views

ASP Panel Not Render Correctly in IE7

I have been playing around with the RadFormDecorator and find that if I place an ASP Panel on the page and then set the RadFormDecorator DecoratedControls to All that it renders the panel and the items in the panel wrong in IE7 but all looks good in FF3. First of all the panel will not heed to any width calls, for some reason it will shrink the panel to fit the controls in it. The next item is I have a table inside the panel and I set the TR to valign=TOP and once again in IE7 it does not move to the top but stays in the center of the row. Both of these issues work fine in FF3. I have traced it down to the Fieldset in the DecoratedControls that changes the panel display.

Thanks,
Walter Burditt

FormDecorator

answered on 14 Nov 2008

1 answer

93 views

Assign all data to grid from client

How can I use the grid to assign data from the client side only?

I want to use if for a shopping cart: I'll add items via javascript to the grid when the user clicks on 'add to cart' for an item. But I'd rather not go back to the server with a postback for cart adds.

so, for example (roughly):

    
            //...page init...  
        
            var items = new Array()   
        
            //...elsewhere when add item clicked...  
        
            var item = {"PartNumber", partNumber, "Name":partName};
        
            addToCart(item);  
        
            function addToCart(item) {  
        
              var cartGrid = $find("cartGridId");  
        
              if(cartGrid) {  
        
                items.push(item);  
        
                cartGrid.DataSource = items;  
        
              }  
        
            }

I already know this isn't working, but it gives the sense of what I'd like to do.

Any guidance?

Thanks!
Scott

Grid

answered on 14 Nov 2008

	//...page init...
	var items = new Array()

	//...elsewhere when add item clicked...
	var item = {"PartNumber", partNumber, "Name":partName};
	addToCart(item);

	function addToCart(item) {
	var cartGrid = $find("cartGridId");
	if(cartGrid) {
	items.push(item);
	cartGrid.DataSource = items;
	}
	}