Telerik Radgrid insert/edit ascx controls as popup window

If you want to configure your Telerik radgrid with different .ascx or WebUserControls that appears inside radgrid for inserting and editing records separately for e.g one WebUserControl for Insert Command and another for  Edit Command.

We can use WebUserControl in 2 ways either inside Radgrid or as a Popup window. In Default mode a WebUserControl control appears inside radgrid. But we can use WebUserControl as popup window as well for the purpose of inserting and editing records.

Here is a simple code of RadGrid which has two .ascx controls one for “Insert” and another for “Edit” command. By default these .ascx controls are appearing inside the grid I had spent alot time to show these .ascx controls in popup window and finally I got the solution.

Note the highlighted MasterTableView tag in “Default.aspx” by replacing this tag with the below code these controls are converted to popup window form.

<MasterTableView EditMode="PopUp" EditFormSettings-EditFormType="WebUserControl"  AutoGenerateColumns="False" DataKeyNames="key" CommandItemDisplay="Top">

In my web application it’s a requirement that while showing popup disable background page and for achieving this we need to do Modal="True" in EditFormSettings this tag is also highlighted in the below Default.aspx code

I have also attached the project solution file you can find “ MyInsertControl.ascx” and "MyEditControl.ascx” in it to run this demo application .. enjoy J

Default.aspx

dada

<telerik:RadGrid ID="RadGrid1" runat="server" ShowStatusBar="true" OnItemCommand="RadGrid1_ItemCommand"

AutoGenerateColumns="true" PageSize="15" AllowPaging="true" Width="600px" Height="600px"

Skin="Vista" BorderStyle="Solid" BackColor="White" AllowMultiRowEdit="false"

Style="margin-right: 0px">

<ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">

<Selecting AllowRowSelect="True" />

<Scrolling AllowScroll="True"></Scrolling>

</ClientSettings>

<MasterTableView AutoGenerateColumns="False" DataKeyNames="key" CommandItemDisplay="Top">

<CommandItemSettings AddNewRecordText="Add Programs" />

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

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

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn UniqueName="name" DataField="name" HeaderText="name">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="age" DataField="age" Visible="true" HeaderText="age">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="height" DataField="height" HeaderText="height"

Visible="true">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings EditFormType="WebUserControl">

<EditColumn UniqueName="EditCommandColumn1">

</EditColumn>

<PopUpSettings Modal="True" Width="350px"></PopUpSettings>

</EditFormSettings>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="True">

<Scrolling AllowScroll="True" SaveScrollPosition="True"></Scrolling>

</ClientSettings>

<FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid>

Default.aspx.cs

protected void RadGrid1_ItemCommand(object source, Telerik.Web.UI.GridCommandEventArgs e)

{

if (e.CommandName == RadGrid.InitInsertCommandName)

{

e.Canceled = true;

RadGrid1.EditIndexes.Clear();

e.Item.OwnerTableView.EditFormSettings.UserControlName =

"MyInsertControl.ascx";

e.Item.OwnerTableView.InsertItem();

}

else if (e.CommandName == RadGrid.EditCommandName)

{

e.Item.OwnerTableView.IsItemInserted = false;

e.Item.OwnerTableView.EditFormSettings.UserControlName = "MyEditControl.ascx";

}

}

Solution Download link :

http://www.4shared.com/rar/0rds9ak7/Telerik_Radgrid_ascx_controls_.html

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>