This is a migrated thread and some comments may be shown as answers.

CommandItemDisplay deleted when last row is getting deleted through javascript

3 Answers 86 Views

Grid

This is a migrated thread and some comments may be shown as answers.

R asked on 27 May 2011, 04:38 PM

I am trying to add/delete rows using on client(webmethods), but when the last row is deleted the


CommandItemDisplay is also getting deleted.

2. Also the grid layout is changing when a row is deleted/added.



3. The Databinder expression for the years attended column does not work after rebind.



can you please point out the problems from the code below





Class:

public class Education

{

#region Private fields

private int? _ID;

private string _Degree;

private string _Program;

private string _School;

private DateTime _From;

private DateTime _To;

#endregion

#region Constructors

public Education()

{

}

public Education(int ID, string Degree, string Program, string School, DateTime From, DateTime To)

{

this._ID = ID;

this._Program = Program;

this._Degree = Degree;

this._School = School;

this._From = From;

this._To = To;

}

#endregion

#region Public properties

public int? ID

{

get

{

return this._ID.Value;

}

set

{

if ((this._ID != value))

{

this._ID = value;

}

public string Degree

{

get

{

return this._Degree;

}

set

{

if ((this._Degree != value))

{

this._Degree = value;

}

public string Program

{

get

{

return this._Program;

}

set

{

if ((this._Program != value))

{

this._Program = value;

}

public string School

{

get

{

return this._School;

}

set

{

if ((this._School != value))

{

this._School = value;

}

public DateTime From

{

get

{

return this._From;

}

set

{

if ((this._From != value))

{

this._From = value;

}

public DateTime To

{

get

{

return this._To;

}

set

{

if ((this._To != value))

{

this._To = value;

}

#endregion

}

ASPX:

<telerik:RadGrid ID="RadGrid1" Width="489px" runat="server" Skin="Windows7"

OnDataBound="RadGrid1_DataBound" OnItemCreated="RadGrid1_ItemCreated"

OnPreRender="RadGrid1_PreRender">

<MasterTableView CommandItemDisplay="Bottom" AutoGenerateColumns="False" CommandItemSettings-ShowRefreshButton="False"

HeaderStyle-CssClass="gridHeader" CommandItemSettings-AddNewRecordText="Add"

DataKeyNames="ID" ClientDataKeyNames="ID" ShowHeadersWhenNoRecords="true">

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditColumn">

<ItemStyle />

<HeaderStyle Width="1%" HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridEditCommandColumn>

<telerik:GridTemplateColumn UniqueName="ID" HeaderText="ID" ItemStyle-Width="1px">

<ItemTemplate>

<asp:Label ID="LblID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ID") %>'> ></asp:Label>

</ItemTemplate>

<HeaderStyle Width="0%" HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Degree" HeaderText="Degree" ItemStyle-Width="80px">

<ItemTemplate>

<asp:Label ID="lblDegree" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Degree") %>'> ></asp:Label>

</ItemTemplate>

<HeaderStyle Width="12%" HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Program" HeaderText="Program" ItemStyle-Width="80px">

<ItemTemplate>

<asp:Label ID="lblProgram" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Program") %>'>></asp:Label>

</ItemTemplate>

<HeaderStyle Width="30%" HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="School" HeaderText="School" ItemStyle-Width="80px">

<ItemTemplate>

<asp:Label ID="lblSchool" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "School") %>'>></asp:Label>

</ItemTemplate>

<HeaderStyle Width="37%" HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="YearsAttended" HeaderText="Years" ItemStyle-Width="80px">

<ItemTemplate>

<asp:Label ID="lblFrom" runat="server"

Text='<%# DataBinder.Eval(Container.DataItem, "From","{0:yyyy}") + " - " + DataBinder.Eval(Container.DataItem, "To","{0:yyyy}") %>'></

asp:Label>

</ItemTemplate>

<HeaderStyle Width="23%" HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn CommandName="Delete" ButtonType="ImageButton" UniqueName="DeleteColumn">

<HeaderStyle Width="1%" HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridButtonColumn>

</Columns>

<CommandItemTemplate>

<div style="padding-top: 3px; margin-top: 3px;">

<asp:LinkButton Style="vertical-align: bottom" ID="btnAddEducation" runat="server"

OnClientClick="return showEditEducation('Add');">

<img alt ="" src="Images/AddRecord.gif" style="border:0px;padding-left:2px;padding-right:5px;margin-top:0px;margin-top:-5px;"/>Add</asp:LinkButton>

</div>

</CommandItemTemplate>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="true" />

<ClientEvents OnRowSelected="rowSelected" />

<Scrolling UseStaticHeaders="true" />

</ClientSettings>

</telerik:RadGrid>

Code Behind:

protected void Page_Load(object sender, EventArgs e)

{

educationList = new List<Education>();

educationList.Add(new Education(0, "X", "General", "stanford", Convert.ToDateTime("1/1/1988"), Convert.ToDateTime("1/1/2000")));

educationList.Add(new Education(0, "X", "General", "stanford", Convert.ToDateTime("1/1/1988"), Convert.ToDateTime("1/1/2000")));

educationList.Add(new Education(0, "X", "General", "stanford", Convert.ToDateTime("1/1/1988"), Convert.ToDateTime("1/1/2000")));

educationList.Add(new Education(0, "X", "General", "stanford", Convert.ToDateTime("1/1/1988"), Convert.ToDateTime("1/1/2000")));

RadGrid1.DataSource = educationList;

RadGrid1.DataBind();

}

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

GridDataItem item = (GridDataItem)e.Item;

((ImageButton)item["DeleteColumn"].Controls[0]).Attributes.Add("onclick", "deleteCurrent('" + item.ItemIndex + "');return false;");

}

JavaScript:

function deleteCurrent(index) {

var grid = $find("<%= RadGrid1.ClientID %>");

var MasterTable = grid.get_masterTableView();

var row = MasterTable.get_dataItems()[index];

id = row.getDataKeyValue("ID") //access DataKeyValue

if (id != null) {

PageMethods.DeleteEducationByID(id, updateGrid);

}

return false;

}

function updateGrid(result) {

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

if (result != null) {

tableView.set_dataSource(result);

tableView.dataBind();

var grid = $find("<%= RadGrid1.ClientID %>");

grid.repaint();

}

3 Answers, 1 is accepted

answered on 28 May 2011, 02:19 PM

Hello,

The data binding expression for YearsAttended is not populated, because DataBinder.Eval is executed only server-side. You should not mix the server and client binding. And if you use client binding, make sure to set handler for OnCommand client event of the grid. You will find more information here:
http://www.telerik.com/help/aspnet-ajax/grid-client-side-binding-specifics.html

Greetings,
Vasil
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 03 Jun 2011, 12:07 PM

Hi,

NoRecordsTemplate is rendered by the server when the DataSource is empty. You could use empty data source on the server and then show/hide the template manually as suggested in this forum thread:
http://www.telerik.com/community/forums/aspnet/grid/norecordstemplate-using-client-side-data-binding.aspx

Hiding the CommandItem when deletion of the last record was a bug in a previous release of the controls and is already fixed. Thus I would suggest you to upgrade to the latest version.

Regards,
Vasil
the Telerik team