[Solved] Issue with Preview(ReadOnly) Mode

[NATALIE PURPURA]

I am trying to create fuctionality which will allow the user to see the preview/ReadOnly mode by clicking on a row in the Grid.  The user will be able to expand/collapse the row to show/hide the preview mode.  In the javascript function
I am using the fireCommand() function passing in the "Preview" commandName and the selected Index:

function RowSelected(sender, eventArgs)
{
    var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
    masterTable.fireCommand("Preview",eventArgs.get_itemIndexHierarchical());
}

Although this will raise the correct event, the itemIndex is getting lost.  The result is that only the first row expands to display the Preview mode no matter which row is clicked. Instead, I need the selected row to display it's preview mode.

I am using webcontrols for edit and insert (EditFormType="WebUserControl").  In the server side code I am checking for the "preview" command.  

protected void RadGrid1_ItemCommand1(object source, GridCommandEventArgs e)
{
     if (e.CommandName == RadGrid.InitInsertCommandName)
        {
            e.Canceled = true;
            RadGrid1.EditIndexes.Clear();
            e.Item.OwnerTableView.EditFormSettings.UserControlName = "InsertContactForm.ascx";
            e.Item.OwnerTableView.InsertItem();
        }
        else if (e.CommandName == RadGrid.EditCommandName)
        {

            e.Item.OwnerTableView.IsItemInserted = false;
            e.Item.OwnerTableView.EditFormSettings.UserControlName = "EditContactForm.ascx";

        }
        else if (e.CommandName == "Preview")
        {
           
            e.Item.Edit = true;
            e.Item.OwnerTableView.Rebind();
           
            GridDataItem editItem = e.Item.OwnerTableView.Items[e.Item.ItemIndex];      
           
            e.Item.OwnerTableView.EditFormSettings.UserControlName = "EditContactForm.ascx";           

            string sUcID = GridEditFormItem.EditFormUserControlID;
            UserControl MyUserControl = (UserControl)editItem.EditFormItem.FindControl(sUcID);

            ASP.contacts_editcontactform_ascx eForm = (ASP.contacts_editcontactform_ascx)MyUserControl;
            eForm.SetPreviewMode();
        }
}

Any ideas of how I can get the correct row to expand?

Also, Since I will need to cancel out of the preview mode once the user clicks the same row again, can you tell me how to check (on the client side) if the selected row is in "Preview" mode?

Thanks!

[Sebastian]

Hi Natalie,

I think that the solution for Preview mode for WebUserControl custom edit form presented in this section of the documentation might be more convenient for your case:

http://www.telerik.com/help/aspnet-ajax/grdpreviewoptionforwebusercontroleditform.html

Note that there will be Close button in the Preview form which can be clicked to close it. You can couple the logic with ajax by ajaxifying the grid via RadAjaxManager or RadAjaxPanel (to simulate client-side performance).

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Natalie]

Thanks.  However, I need to invoke the preview command on the client side when a row is clicked.  I am calling this javascript function on RowSelected:

function RowSelected(sender, eventArgs)
{
    var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
    masterTable.fireCommand("Preview",eventArgs.get_itemIndexHierarchical());
}


The code above invokes the Preview mode, however, it shows the preview mode for the wrong row - it only shows the first row in the radgrid no matter which row is clicked.

Also, I cannot use a button to close the preview mode - it needs to be closed on another click on that row.

Can you please advise?
Thanks.

[Sebastian]

Hi Natalie,

For your convenience I am attaching a sample web site which illustrates the functionality you are searching for. I intercepted the OnRowClick client event of RadGrid to show/hide the preview form. Review the implementation from the example for further details.

Note that if you mouse over the disabled controls from the Preview form you will receive the error: "Value must be a DOM element. Parameter name: element". This seems that this is a problem of the ASP.NET AJAX framework in general:

http://forums.asp.net/p/1151199/1918939.aspx

Until the issue is addressed by the MS ASP.NET team I suggest you consider the workaround mentioned in the last post from the thread.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Natalie]

Great, that worked.
Thanks for your help!