Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadGrid Column/Row click implementation using datatable as datasource

1 Answer 107 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Swarna
Top achievements
Rank 1
Swarna asked on 16 May 2013, 09:43 AM
Hi ,

I have implemented similar feature as in below link
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/editondblclick/defaultcs.aspx

here i am using xml file data in the form of datatable as datasource. My requirement is to retrieve and update xml file. Here Item_Updated event is not triggered . Can you please help me in guiding how to update xml file when grid is edited. Only Quarter values will be updated.

Please check my aspx,  .cs and xml files attached.

code behind Page :
----------------------------------------------------------------------------------------------------------------------------
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;
using System.Data;

namespace EditaGridMay16
{
    public partial class EditGrid : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            String st = Server.MapPath("PrdData.xml");
            DataSet ds = new DataSet();
            DataTable dsCopy = new DataTable();
            ds.ReadXml(st);
            for (int c = 0; c < ds.Tables[0].Columns.Count; c++)
                dsCopy.Columns.Add(ds.Tables[0].Columns[c].ColumnName);
            for (int r = 0; r < ds.Tables[0].Rows.Count; r++)
            {
                DataRow d = dsCopy.NewRow();
                if (ds.Tables[0].Rows[r][0].ToString() == "&nbsp;")
                    d[dsCopy.Columns[0].ColumnName] = "";
                else
                    d[dsCopy.Columns[0].ColumnName] = ds.Tables[0].Rows[r][0].ToString();
                if (ds.Tables[0].Rows[r][0].ToString() == "&nbsp;")
                    d[dsCopy.Columns[1].ColumnName] = "";
                else
                    d[dsCopy.Columns[1].ColumnName] = ds.Tables[0].Rows[r][1].ToString();
                if (ds.Tables[0].Rows[r][0].ToString() == "&nbsp;")
                    d[dsCopy.Columns[2].ColumnName] = "";
                else
                    d[dsCopy.Columns[2].ColumnName] = ds.Tables[0].Rows[r][2].ToString();
                d[dsCopy.Columns[3].ColumnName] = ds.Tables[0].Rows[r][3].ToString();
                d[dsCopy.Columns[4].ColumnName] = ds.Tables[0].Rows[r][4].ToString();
                d[dsCopy.Columns[5].ColumnName] = ds.Tables[0].Rows[r][5].ToString();
                d[dsCopy.Columns[6].ColumnName] = ds.Tables[0].Rows[r][6].ToString();
                d[dsCopy.Columns[7].ColumnName] = ds.Tables[0].Rows[r][7].ToString();
                d[dsCopy.Columns[8].ColumnName] = ds.Tables[0].Rows[r][8].ToString();
                d[dsCopy.Columns[9].ColumnName] = ds.Tables[0].Rows[r][9].ToString();
                d[dsCopy.Columns[10].ColumnName] = ds.Tables[0].Rows[r][10].ToString();
                dsCopy.Rows.Add(d);

            }
            RadGrid1.DataSource = dsCopy;
            RadGrid1.DataBind();
        }
        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem && e.Item.IsInEditMode)
            {
                ((e.Item as GridDataItem)["UnitPrice"].Controls[0] as RadNumericTextBox).Width = Unit.Pixel(50);
            }
        }

        protected void RadGrid1_ItemUpdated(object source, Telerik.Web.UI.GridUpdatedEventArgs e)
        {
            if (e.Exception != null)
            {
                e.KeepInEditMode = true;
                e.ExceptionHandled = true;
                SetMessage(Server.HtmlEncode("Unable to update Products. Reason: " + e.Exception.Message).Replace("'", "&#39;").Replace("\r\n", "<br />"));
            }
            else
            {
                GridDataItem dataItem = (GridDataItem)e.Item;
                SetMessage(" ProductID " + dataItem.GetDataKeyValue("tier1") + " updated");
            }
        }

        private void DisplayMessage(string text)
        {
            Label1.Text = string.Format("<span>{0}</span>", text);
        }

        private void SetMessage(string message)
        {
            gridMessage = message;
        }

        private string gridMessage = null;
        protected void RadGrid1_DataBound(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(gridMessage))
            {
                DisplayMessage(gridMessage);
            }
        }

    }
}

--------------------------------------------------------------------------------------------------------------------------

Design Page :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditGrid.aspx.cs" Inherits="EditaGridMay16.EditGrid"  %>

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
        <!--
            var hasChanges, inputs, dropdowns, editedRow;

      
            function ColumnClick(sender, eventArgs) {
                alert("Click on column-header: " + eventArgs.get_gridColumn().get_element().cellIndex);
            }

            function RowClick(sender, eventArgs) {                
                if (editedRow && hasChanges) {
                    hasChanges = false;
                    if (confirm("Update changes?")) {                     
                        $find("<%= RadGrid1.ClientID %>").get_masterTableView().updateItem(editedRow);
                    }
                }
            }
 
            function RowDblClick(sender, eventArgs) {
                editedRow = eventArgs.get_itemIndexHierarchical();
                $find("<%= RadGrid1.ClientID %>").get_masterTableView().editItem(editedRow);
            }
 
            function GridCommand(sender, args) {
                if (args.get_commandName() != "Edit") {
                    editedRow = null;
                }
            }
 
            function GridCreated(sender, eventArgs) {
                var gridElement = sender.get_element();
                var elementsToUse = [];
                inputs = gridElement.getElementsByTagName("input");
                for (var i = 0; i < inputs.length; i++) {
                    var lowerType = inputs[i].type.toLowerCase();
                    if (lowerType == "hidden" || lowerType == "button") {
                        continue;
                    }
                    if (inputs[i].id.indexOf("PageSizeComboBox") == -1 && inputs[i].type.toLowerCase() != "checkbox") {
                        Array.add(elementsToUse, inputs[i]);
                    }
                    inputs[i].onchange = TrackChanges;
                }
 
                dropdowns = gridElement.getElementsByTagName("select");
                for (var i = 0; i < dropdowns.length; i++) {
                    dropdowns[i].onchange = TrackChanges;
                }
 
                setTimeout(function () { if (elementsToUse[0]) elementsToUse[0].focus(); }, 100);
            }
 
            function TrackChanges(e) {
                hasChanges = true;
            }
         -->     
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="Label1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadGrid ID="RadGrid1"  Width="97%" ShowStatusBar="True"
        AllowSorting="True" PageSize="7" GridLines="None" runat="server"
        AllowAutomaticUpdates="True"  OnItemUpdated="RadGrid1_ItemUpdated" AutoGenerateColumns="False"
        OnDataBound="RadGrid1_DataBound" >
        <MasterTableView TableLayout="Fixed" DataKeyNames="tier1" EditMode="InPlace">
            <Columns>
                <telerik:GridBoundColumn UniqueName="tier1" DataField="tier1" HeaderText="Tier1"
                    ReadOnly="True" HeaderStyle-Width="10%">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="tier2" DataField="tier2" HeaderText="Tier 2"
                    HeaderStyle-Width="15%" ReadOnly="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="Product" DataField="Product"
                    HeaderText="Product" HeaderStyle-Width="20%" ReadOnly="True">
                </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn UniqueName="Q111" DataField="Q111"
                    HeaderText="Q111" HeaderStyle-Width="5%" ColumnEditorID="GridTextBoxColumnEditor1">
                </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Q211" DataField="Q211"
                    HeaderText="Q211" HeaderStyle-Width="5%" ColumnEditorID="GridTextBoxColumnEditor1">
                </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Q311" DataField="Q311"
                    HeaderText="Q311" HeaderStyle-Width="5%" ColumnEditorID="GridTextBoxColumnEditor1">
                </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Q411" DataField="Q411"
                    HeaderText="Q411" HeaderStyle-Width="5%" ColumnEditorID="GridTextBoxColumnEditor1">
                </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Q112" DataField="Q112"
                    HeaderText="Q112" HeaderStyle-Width="5%" ColumnEditorID="GridTextBoxColumnEditor1">
                </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Q212" DataField="Q212"
                    HeaderText="Q212" HeaderStyle-Width="5%" ColumnEditorID="GridTextBoxColumnEditor1">
                </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Q312" DataField="Q312"
                    HeaderText="Q312" HeaderStyle-Width="5%" ColumnEditorID="GridTextBoxColumnEditor1">
                </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Q412" DataField="Q412"
                    HeaderText="Q412" HeaderStyle-Width="5%" ColumnEditorID="GridTextBoxColumnEditor1">
                </telerik:GridBoundColumn>
             
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents  OnRowDblClick="RowDblClick" OnGridCreated="GridCreated"
                OnCommand="GridCommand" OnRowClick="RowClick"></ClientEvents>
        </ClientSettings>
    </telerik:RadGrid>
    <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="180px">
    </telerik:GridTextBoxColumnEditor>

    <br />
    <asp:Label ID="Label1" runat="server" EnableViewState="false" Text="no message"></asp:Label>
    <br />

    </form>
</body>
</html>

=--------------------------------------------------------------------------------------------------------------------

xml file :


<?xml version="1.0" standalone="yes"?>
<DocumentElement>
  <Products>
    <Tier1>DesignWare IP</Tier1>
    <Tier2>Access IP Agreement</Tier2>
    <Product>1 Month eLicense</Product>
    <Q111>1</Q111>
    <Q211>2</Q211>
    <Q311>3</Q311>
    <Q411>4</Q411>
    <Q112>5</Q112>
    <Q212>6</Q212>
    <Q312>7</Q312>
    <Q412>8</Q412>
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
  <Products>
    <Tier1>&amp;nbsp;</Tier1>
    <Tier2>&amp;nbsp;</Tier2>
    <Product>&amp;nbsp;</Product>
    <Q111 />
    <Q211 />
    <Q311 />
    <Q411 />
    <Q112 />
    <Q212 />
    <Q312 />
    <Q412 />
  </Products>
</DocumentElement>


Thanks
Swarna.


1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 21 May 2013, 11:43 AM
Hi Swarna,

You will need to use the UpdateCommand event of the grid instead. ItemUpdated is fired after the actual updating was processed. You can refer to the following example for a practical implementation:
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/xmldatasource/defaultcs.aspx

Hope this helps.

Kind regards,
Eyup
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Swarna
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or