I am trying to use the ASP.Net AJAX grid control with AJAX and web services only. I have run into a few problems with the inplace editing. Specifically, if I use the GridEditCommandColumn, clicking the edit button deletes the grid for some reason. If I add in a typical DataSourceID="SqlDataSource1" to the grid and master table, these buttons work as expected, but I don't want to depend on the SQlDataSource control, I would prefer to use AJAX and a web service. The other problem I had was trying to find the value of the edited inplace control after clicking the update button. I was only able to find the original value. I have attached code snippets below:
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div>
<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" GridLines="None" Width="740"
AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True"
ShowStatusBar="True"
Skin="Windows7" EnableEmbeddedSkins="false" AutoGenerateColumns="false" >
<ClientSettings>
<Selecting CellSelectionMode="None" AllowRowSelect="True"></Selecting>
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<Resizing AllowColumnResize="True" AllowRowResize="false" ResizeGridOnColumnResize="false"
ClipCellContentOnResize="true" EnableRealTimeResize="false" AllowResizeToFit="true" />
<ClientEvents OnRowSelected="rowSelected" OnCommand="RaiseCommand" />
</ClientSettings>
<MasterTableView AutoGenerateColumns="False" DataKeyNames="ICID" EditMode="InPlace" Width="530" FilterItemStyle-HorizontalAlign="Center" >
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridEditCommandColumn
ButtonType="ImageButton"
UniqueName="EditCommandColumn"
EditImageUrl="Skins/Windows7/Grid/Edit.gif"
CancelImageUrl="Skins/Windows7/Grid/Cancel.gif"
UpdateImageUrl="Skins/Windows7/Grid/Update.gif" >
<ItemStyle CssClass="Button.Windows7" HorizontalAlign="Center" />
<HeaderStyle Width="60" />
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
UniqueName="DeleteColumn" ImageUrl="Skins/Windows7/Grid/Delete.gif">
<HeaderStyle Width="40" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="ICID" DataType="System.Int32"
FilterControlAltText="Filter ICID column" HeaderText="ICID" ReadOnly="True"
SortExpression="ICID" UniqueName="ICID">
<HeaderStyle Width="120" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Class"
FilterControlAltText="Filter Class column" HeaderText="Class"
SortExpression="Class" UniqueName="Class">
<HeaderStyle Width="140" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Config"
FilterControlAltText="Filter Config column" HeaderText="Config"
SortExpression="Config" UniqueName="Config">
<HeaderStyle Width="140" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
<telerik:GridCheckBoxColumn
DataField="Active" DataType="System.Boolean"
FilterControlAltText="Filter Active column" HeaderText="Active"
UniqueName="Active" >
<HeaderStyle Width="60" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridCheckBoxColumn>
<telerik:GridBoundColumn DataField="TEC"
FilterControlAltText="Filter TEC column" HeaderText="TEC" SortExpression="TEC"
UniqueName="TEC" >
<HeaderStyle Width="200" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
</Columns>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
</MasterTableView>
<FilterMenu EnableImageSprites="False"></FilterMenu>
</telerik:RadGrid>
The Javascript:
function UpdateGrid()
{
var data = 1;
PageMethods.GetData(data, callUpdateGrid, callError);
}
function callUpdateGrid(result)
{
if (null == result)
{
alert('No Data');
return;
}
var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
tableView.set_dataSource(result);
tableView.dataBind();
}
function RaiseCommand(sender, eventArgs)
{
// *******************************'
// How do I get the new value from the edit control here?
// The value variable always returns the previous value.
// *******************************'
//retrieve the current commandName and commandArgument
var cmd = eventArgs.get_commandName();
var arg = eventArgs.get_commandArgument();
var result = String.format("CommandName: {0}, CommandArgument: {1}", cmd, arg);
var value = '';
if ('Page' != cmd)
{
var grid = $find("<%= RadGrid1.ClientID %>");
var mastertable = grid.get_masterTableView();
ICID = getDataItemKeyValue(grid, mastertable.get_dataItems()[arg]);
var row = mastertable.get_dataItems()[arg];
value = mastertable.getCellByColumnUniqueName(row, "TEC").innerHTML;
}
alert(result + ', ' + ICID + ', ' + value);
}
The codebehind:
[WebMethod]
public static IList<Model> GetData(int arg)
{
IList<Model> ilm = new List<Model>();
ilm.Add( new Model() { Active = "true", Class = "ABC", Config = "A1", ICID = 1, TEC = "TEC1" });
ilm.Add(new Model() { Active = "", Class = "DEF", Config = "A2", ICID = 2, TEC = "TEC2" });
ilm.Add(new Model() { Active = "true", Class = "GHI", Config = "A3", ICID = 3, TEC = "TEC3" });
return ilm;
}
Can you tell me how to get inplace editing to work with the code above, and how to get the new values from the edited controls?
Thanks.
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div>
<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" GridLines="None" Width="740"
AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True"
ShowStatusBar="True"
Skin="Windows7" EnableEmbeddedSkins="false" AutoGenerateColumns="false" >
<ClientSettings>
<Selecting CellSelectionMode="None" AllowRowSelect="True"></Selecting>
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<Resizing AllowColumnResize="True" AllowRowResize="false" ResizeGridOnColumnResize="false"
ClipCellContentOnResize="true" EnableRealTimeResize="false" AllowResizeToFit="true" />
<ClientEvents OnRowSelected="rowSelected" OnCommand="RaiseCommand" />
</ClientSettings>
<MasterTableView AutoGenerateColumns="False" DataKeyNames="ICID" EditMode="InPlace" Width="530" FilterItemStyle-HorizontalAlign="Center" >
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridEditCommandColumn
ButtonType="ImageButton"
UniqueName="EditCommandColumn"
EditImageUrl="Skins/Windows7/Grid/Edit.gif"
CancelImageUrl="Skins/Windows7/Grid/Cancel.gif"
UpdateImageUrl="Skins/Windows7/Grid/Update.gif" >
<ItemStyle CssClass="Button.Windows7" HorizontalAlign="Center" />
<HeaderStyle Width="60" />
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
UniqueName="DeleteColumn" ImageUrl="Skins/Windows7/Grid/Delete.gif">
<HeaderStyle Width="40" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="ICID" DataType="System.Int32"
FilterControlAltText="Filter ICID column" HeaderText="ICID" ReadOnly="True"
SortExpression="ICID" UniqueName="ICID">
<HeaderStyle Width="120" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Class"
FilterControlAltText="Filter Class column" HeaderText="Class"
SortExpression="Class" UniqueName="Class">
<HeaderStyle Width="140" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Config"
FilterControlAltText="Filter Config column" HeaderText="Config"
SortExpression="Config" UniqueName="Config">
<HeaderStyle Width="140" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
<telerik:GridCheckBoxColumn
DataField="Active" DataType="System.Boolean"
FilterControlAltText="Filter Active column" HeaderText="Active"
UniqueName="Active" >
<HeaderStyle Width="60" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridCheckBoxColumn>
<telerik:GridBoundColumn DataField="TEC"
FilterControlAltText="Filter TEC column" HeaderText="TEC" SortExpression="TEC"
UniqueName="TEC" >
<HeaderStyle Width="200" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
</Columns>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
</MasterTableView>
<FilterMenu EnableImageSprites="False"></FilterMenu>
</telerik:RadGrid>
The Javascript:
function UpdateGrid()
{
var data = 1;
PageMethods.GetData(data, callUpdateGrid, callError);
}
function callUpdateGrid(result)
{
if (null == result)
{
alert('No Data');
return;
}
var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
tableView.set_dataSource(result);
tableView.dataBind();
}
function RaiseCommand(sender, eventArgs)
{
// *******************************'
// How do I get the new value from the edit control here?
// The value variable always returns the previous value.
// *******************************'
//retrieve the current commandName and commandArgument
var cmd = eventArgs.get_commandName();
var arg = eventArgs.get_commandArgument();
var result = String.format("CommandName: {0}, CommandArgument: {1}", cmd, arg);
var value = '';
if ('Page' != cmd)
{
var grid = $find("<%= RadGrid1.ClientID %>");
var mastertable = grid.get_masterTableView();
ICID = getDataItemKeyValue(grid, mastertable.get_dataItems()[arg]);
var row = mastertable.get_dataItems()[arg];
value = mastertable.getCellByColumnUniqueName(row, "TEC").innerHTML;
}
alert(result + ', ' + ICID + ', ' + value);
}
The codebehind:
[WebMethod]
public static IList<Model> GetData(int arg)
{
IList<Model> ilm = new List<Model>();
ilm.Add( new Model() { Active = "true", Class = "ABC", Config = "A1", ICID = 1, TEC = "TEC1" });
ilm.Add(new Model() { Active = "", Class = "DEF", Config = "A2", ICID = 2, TEC = "TEC2" });
ilm.Add(new Model() { Active = "true", Class = "GHI", Config = "A3", ICID = 3, TEC = "TEC3" });
return ilm;
}
Can you tell me how to get inplace editing to work with the code above, and how to get the new values from the edited controls?
Thanks.