Sunday, September 20, 2009

RadWindow with RadGrid and tabstrip

This example demonstrate how can you use radwindow with radgrid edit functionality.

If you want see live example go to following link

http://www.seeds-lanka.com/minute/document.aspx



Summery of example

Main grid show Document data. When you expand it you can see more drill data inside tabstrip. Each tabstrip you have update functionality, when you update popup window comming. After your updation you can submit your changes. Your changes show inside tabstrip without manual refresh

Technology use

  • Rad Ajax manager
  • Rad grid
  • Rad window
Steps1

Create Page for popup window

div>
telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
/telerik:RadAjaxManager>
telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Sunset" />
br />
SCRIPT LANGUAGE="JavaScript">
function closeWindow() {

var oWindow = GetRadWindow();
oWindow.OnClientClose = CloseAndRebind;
}

function GetRadWindow()
{
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;//IE (and Moz as well)

return oWindow;
}



function CloseWnd(args)
{

GetRadWindow().close();
GetRadWindow().BrowserWindow.refreshGrid(args);
}

/SCRIPT>

table>
tr>
td>
b>Document Number/b>
/td>
td>
asp:Literal ID="ltrDocNo" runat="server">/asp:Literal>

/td>

/tr>

tr>
td>
b>Document Title/b>
/td>
td>
asp:TextBox ID="txtDocTitle" runat="server">/asp:TextBox>

/td>

/tr>

tr>
td>
b>Client Doc No/b>
/td>
td>
asp:TextBox ID="txtClientDocNo" runat="server">/asp:TextBox>

/td>

/tr>

/table>

/div>

Red mark code is important

Code behind of submit button

ScriptManager.RegisterStartupScript(this, GetType(), "closeWnd", "CloseWnd('RebindAndNavigate');", true);

Step2

Update ajaxmanager of main parent form

telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
onajaxrequest="RadAjaxManager1_AjaxRequest"
DefaultLoadingPanelID="RadAjaxLoadingPanel1">
AjaxSettings>
telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
UpdatedControls>
telerik:AjaxUpdatedControl ControlID="RadGrid4" />
/UpdatedControls>
/telerik:AjaxSetting>
telerik:AjaxSetting AjaxControlID="RadGrid4">
UpdatedControls>
telerik:AjaxUpdatedControl ControlID="RadGrid4" />
/UpdatedControls>
/telerik:AjaxSetting>
/AjaxSettings>
/telerik:RadAjaxManager>

Step3

Update ItemCommand event in main grid

Path = "DocumentInfo.aspx?DocNo=" + lbId.Text;
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "str", "", false);



Session["PageIndex"] = RadGrid4.CurrentPageIndex;
if (e.CommandName == RadGrid.ExpandCollapseCommandName)
{
Session["ExpanIndex"] = e.Item.ItemIndex;
}


Step4

Create Ajaxmanager Request event

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
RadGrid4.MasterTableView.SortExpressions.Clear();
RadGrid4.MasterTableView.GroupByExpressions.Clear();

if(Session["PageIndex"]!=null)
RadGrid4.MasterTableView.CurrentPageIndex = int.Parse( Session["PageIndex"].ToString());

RadGrid4.MasterTableView.Rebind();
RadGrid4.Rebind();

if (Session["ExpanIndex"] != null)
RadGrid4.MasterTableView.Items[int.Parse(Session["ExpanIndex"].ToString())].Expanded = true;

RadGrid4.MasterTableView.Items[int.Parse(Session["ExpanIndex"].ToString())].ChildItem.FindControl("InnerContainer").Visible = true;


}









1 comment:

  1. red text is very difficult to red on computer displays especially on a blue background.

    ReplyDelete