Passing item-related data from the server to the client and vice versa.

2 posts, 0 answers
  1. Hristo Deshev
    Hristo Deshev avatar
    16 posts
    Member since:
    May 2004

    Posted 09 Mar 2007 Link to this post

    Requirements

    RadGrid for ASP .NET version

    Q4 2006
    RadControls for ASP .NET AJAX version 2008.1.415 and later
    .NET version

    2.0 and later
    Visual Studio version

    2005 and later
    Programming language

    C#, JavaScript
    Browser support

    all supported by RadGrid for ASP .NET


    all browsers supported by RadControls for ASP .NET AJAX



    PROJECT DESCRIPTION

    Some complicated application scenarios may require that you render some item-specific data to the client-side, access that data with JavaScript to provide rich user experience, modify the data and send the modifications back to the server.

    The easiest way to do that is to render hidden TextBox controls in your items. Those controls' value can be modified with JavaScript and the new values will be available in their Text property when the form is posted back to the server.

    The example adds text boxes in each group header item and hides them using the display: none CSS rule:

        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) 
        { 
            if (e.Item is GridGroupHeaderItem) 
            { 
                GridGroupHeaderItem header = (GridGroupHeaderItem)e.Item; 
                AddValuePlaceholder(header); 
            } 
        } 
     
        protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) 
        { 
            if (e.Item is GridGroupHeaderItem) 
            { 
                GridGroupHeaderItem header = (GridGroupHeaderItem)e.Item; 
                AddValuePlaceholder(header); 
            } 
        } 
     
        private void AddValuePlaceholder(GridGroupHeaderItem item) 
        { 
            if (item.FindControl("GroupValuePlaceholder") != null
                return
     
            TextBox placeholder = new TextBox(); 
            placeholder.ID = "GroupValuePlaceholder"
            placeholder.Style[HtmlTextWriterStyle.Display] = "none"
            item.Cells[0].Controls.Add(placeholder); 
     
            placeholder.PreRender += delegate(object sender, EventArgs args) 
            { 
                GridItem[] children = item.GetChildItems(); 
                if (children.Length > 0) 
                { 
                    GridDataItem dataItem = children[0] as GridDataItem; 
     
                    string customerID = item.OwnerTableView.DataKeyValues[dataItem.ItemIndex]["CustomerID"].ToString(); 
                    placeholder.Text = customerID; 
                } 
            }; 
        } 
     


    We can access the text boxes on the client by searching through all HTML input elements in the grid table row and finding the right one:

        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) 
        { 
            if (e.Item is GridGroupHeaderItem) 
            { 
                GridGroupHeaderItem header = (GridGroupHeaderItem)e.Item; 
                AddValuePlaceholder(header); 
            } 
        } 
     
        protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) 
        { 
            if (e.Item is GridGroupHeaderItem) 
            { 
                GridGroupHeaderItem header = (GridGroupHeaderItem)e.Item; 
                AddValuePlaceholder(header); 
            } 
        } 
     
        private void AddValuePlaceholder(GridGroupHeaderItem item) 
        { 
            if (item.FindControl("GroupValuePlaceholder") != null
                return
     
            TextBox placeholder = new TextBox(); 
            placeholder.ID = "GroupValuePlaceholder"
            placeholder.Style[HtmlTextWriterStyle.Display] = "none"
            item.Cells[0].Controls.Add(placeholder); 
     
            placeholder.PreRender += delegate(object sender, EventArgs args) 
            { 
                GridItem[] children = item.GetChildItems(); 
                if (children.Length > 0) 
                { 
                    GridDataItem dataItem = children[0] as GridDataItem; 
     
                    string customerID = item.OwnerTableView.DataKeyValues[dataItem.ItemIndex]["CustomerID"].ToString(); 
                    placeholder.Text = customerID; 
                } 
            }; 
        } 
     


    The sample sets a dummy string -- the current date and time when the user hovers a row. That value is available on the server. We access it in the ItemCommand event by locating the TextBox control:

        protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e) 
        { 
            if (e.Item.ItemType == GridItemType.GroupHeader) 
            { 
                TextBox placeHolder = e.Item.FindControl("GroupValuePlaceholder"as TextBox; 
                RadGrid1.ResponseScripts.Add(string.Format("alert('{0}');", placeHolder.Text)); 
            } 
        } 

    Click the group expand/collapse (+/-) image button to trigger an ItemCommand postback.
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 10 Mar 2008 Link to this post

    Hi,

    Attached to this message, is a modification of the code, which utilizes the latest, Prometheus version of the grid. Additionally, below is the code, used in the sample:

    .Js
     <script type="text/javascript">  
          
        function headerMouseOver(id)  
        {        
            var row = $get(id);           
            //debugger;  
            var placeHolder = FindTextPlaceHolder(row.parentNode);  
            placeHolder.value = (new Date()).toString()  
        }  
          
        function FindTextPlaceHolder(tableRow)  
        {     
          
            var inputs = tableRow.getElementsByTagName("INPUT");  
            for (var i = 0; i < inputs.length; i++)  
            {  
                var input = inputs[i];  
                if (input.type == "text" && input.id.indexOf("GroupValuePlaceholder") >= 0)  
                {  
                    return input;     
                }  
            }  
            return null;  
        }  
          
        </script> 

    .aspx
     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
            &nbsp;<br /> 
            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1" GridLines="None" 
            OnItemCreated="RadGrid1_ItemCreated"   
                    OnItemDataBound="RadGrid1_ItemDataBound" Font-Bold="True"   
                    OnItemCommand="RadGrid1_ItemCommand" ShowGroupPanel="True" 
            > 
                <ExportSettings> 
                    <Pdf FontType="Subset" PaperSize="Letter" /> 
                    <Excel Format="Html" /> 
                    <Csv ColumnDelimiter="Comma" RowDelimiter="NewLine" /> 
                </ExportSettings> 
                <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst" 
                    DataKeyNames="CustomerID" DataSourceID="AccessDataSource1" Dir="LTR" Frame="Border" 
                    TableLayout="Auto">  
                    <GroupByExpressions> 
                        <telerik:GridGroupByExpression> 
                            <SelectFields> 
                                <telerik:GridGroupByField FieldAlias="Country" FieldName="Country" HeaderText="" HeaderValueSeparator=""   
                                FormatString="">  
                                </telerik:GridGroupByField> 
                            </SelectFields> 
                            <GroupByFields> 
                                <telerik:GridGroupByField FieldAlias="Country" FieldName="Country" FormatString="">  
                                </telerik:GridGroupByField> 
                            </GroupByFields> 
                        </telerik:GridGroupByExpression> 
                        </GroupByExpressions> 
                    <RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" 
                        Visible="False">  
                        <HeaderStyle Width="20px" /> 
                    </RowIndicatorColumn> 
                    <ExpandCollapseColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" 
                        Resizable="False" Visible="False">  
                        <HeaderStyle Width="20px" /> 
                    </ExpandCollapseColumn> 
                    <Columns> 
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="CustomerID" 
                            FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="CustomerID" 
                            ReadOnly="True" SortExpression="CustomerID" UniqueName="CustomerID">  
                        </telerik:GridBoundColumn> 
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="Country" FilterListOptions="VaryByDataType" 
                            ForceExtractValue="None" HeaderText="Country" SortExpression="Country" UniqueName="Country">  
                        </telerik:GridBoundColumn> 
                    </Columns> 
                    <EditFormSettings> 
                        <EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType">  
                        </EditColumn> 
                    </EditFormSettings> 
                </MasterTableView> 
                  <ClientSettings AllowDragToGroup="True">  
                      
                </ClientSettings> 
            </telerik:RadGrid><asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb" 
                SelectCommand="SELECT [CustomerID], [Country] FROM [Customers]"></asp:AccessDataSource> 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">  
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
         

    .cs
      protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)  
        {  
            if (e.Item is GridGroupHeaderItem)  
            {  
                GridGroupHeaderItem header = (GridGroupHeaderItem)e.Item;  
                header.Attributes.Add("onmouseover", "headerMouseOver('" + header.DataCell.ClientID + "');");  
                AddValuePlaceholder(header);              
            }  
        }  
     
        protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
        {  
             
        }  
     
        private void AddValuePlaceholder(GridGroupHeaderItem item)  
        {  
            if (item.FindControl("GroupValuePlaceholder") != null)  
                return;  
     
            TextBox placeholder = new TextBox();  
            placeholder.ID = "GroupValuePlaceholder";  
            placeholder.Style[HtmlTextWriterStyle.Display] = "none";  
            item.Cells[0].Controls.Add(placeholder);  
     
            placeholder.PreRender += delegate(object sender, EventArgs args)  
            {  
                GridItem[] children = item.GetChildItems();  
                if (children.Length > 0)  
                {  
                    GridDataItem dataItem = children[0] as GridDataItem;  
     
                    string customerID = item.OwnerTableView.DataKeyValues[dataItem.ItemIndex]["CustomerID"].ToString();  
                    placeholder.Text = customerID;  
                }  
            };  
        }  
     
        private void SetupHeaders()  
        {  
            GridItem[] headers = RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader);  
            foreach (GridGroupHeaderItem header in headers)  
            {  
                AddValuePlaceholder(header);  
            }  
        }  
     
        protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)  
        {  
            if (e.Item.ItemType == GridItemType.GroupHeader)  
            {  
                TextBox placeHolder = e.Item.FindControl("GroupValuePlaceholder") as TextBox;  
                RadAjaxManager1.ResponseScripts.Add(string.Format("alert('{0}');", placeHolder.Text));  
            }  
        } 


    Kind regards,
    Yavor
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top