Ajax onclick

[chris]

Using tables and javascript this would not be a problem but i am afraid that doing it my way will mess up the sorting so I figured i would ask the correct way to do it in radgrid.

I have a table that looks like this
ID         Name                Active Date       Active    
1          Chris                 12/11/2007          Y

What i want to do is make Y (which is a graphic) a link. Where you click on it you get the ajax working symbol > the ajax fires which goes to the database and updates the active value to N and then the Y in the table changes to an N and next time you click it would change from N to Y.

I had this working great in another project using tables and mootools for the ajax but since i have moved to radgrid i was wondering if someone could point me in the direction of the correct Rad way to do this.

Thanks for your help

[Princy]

Hi Chris,

Here i am using a GridTemplateColumn and in its ItemTemplate i have placed an ImageButton. The CommandName for the button is set and on clicking the ImageButton the ItemCommand event will be fired. In the ItemCommand event the ImageUrl of the button is toggled.

ASPX:

<telerik:GridTemplateColumn UniqueName="TemplateColumn" DataField="Mariage_Status">
        <ItemTemplate>
        <asp:Literal ID="Literal" runat="server" Text='<%#Eval("Mariage_Status") %>'> </asp:Literal>
        <asp:ImageButton ID="ImageButton1" CommandName="Toggle"  runat="server" />
        </ItemTemplate>
        </telerik:GridTemplateColumn>

CS:

 protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = e.Item as GridDataItem;
            Literal lit = (Literal)item["TemplateColumn"].FindControl("Literal");
            string strtxt = lit.Text.ToString();
            ImageButton imagebutton1 = e.Item.FindControl("ImageButton1") as ImageButton;
            if (strtxt == "True")
            {
                imagebutton1.ImageUrl = "~/Images/Y.gif";
            }
            else if (strtxt == "False")
                imagebutton1.ImageUrl = "~/Images/N.gif";
        }
    }
    protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
    {
        if (e.CommandName == "Toggle")
        {
            ImageButton imgbtn = (ImageButton)e.CommandSource;
            if (imgbtn.ImageUrl == "~/Images/Y.gif")
            {

                imgbtn.ImageUrl = "~/Images/N.gif";
                //change the value in the database here
            }
            else if (imgbtn.ImageUrl == "~/Images/N.gif")
            {
                imgbtn.ImageUrl = "~/Images/Y.gif";
                //change the value in the database here
            }


        }
    }

Thanks
Princy

[Princy]

 

[chris]

Thanks Princy,
 Wont that post and have to reload the whole page?
Its an option but what i am looking to do is just update that graphic and the database and not have to reload the whole page.

Thanks

[chris]

Anyone?

[Iana Tsolova]

Hello chris,

You can ajaxify your RadGrid and thus only the grid will be refreshed after the update.

Give it a try and let us know if this works for you. 
  
Greetings,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[chris]

Thanks. I have it set up and the first part is firing correct (it adds the image) but on click it shows the ajax loader then just goes back to the way it was. I put a sql statement that would have changed all my users to inactive it the function ran and they stayed active so its not even running the ItemCommand function. Below is my code.  Thanks for your help

<telerik:RadGrid ID="RadGrid1" OnSortCommand="RadGrid1_SortCommand" OnPageIndexChanged="RadGrid1_PageIndexChanged" OnItemDataBound="RadGrid1_ItemDataBound" OnItemCommand="RadGrid1_ItemCommand"
        AllowSorting="True" PageSize="15" AllowPaging="True" AllowMultiRowSelection="True"
        runat="server" EnableEmbeddedSkins="false" Skin="EasyEcomm" AutoGenerateColumns="false">
        <MasterTableView Width="100%" CellSpacing="2" DataKeyNames="AdminUserId">
            <Columns>
                <telerik:GridBoundColumn DataField="AdminUserId" HeaderText="ID" SortExpression="AdminUserId"
                    UniqueName="AdminUserId">
                    <ItemStyle Wrap="False" />
                    <HeaderStyle CssClass=" GridHeader_EasyEcomm width50" />
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn DataField="AdminUserUserName" HeaderText="Name" SortExpression="AdminUserUserName"
                    UniqueName="AdminUserUserName">
                    <HeaderStyle Wrap="False" CssClass="GridHeader_EasyEcomm width150" />
                    <ItemTemplate>
                        <%# String.Format("<a href=\"SystemUsersEdit.aspx?action=edit&recid={0}\">{1} {2}</a>", Eval("AdminUserId"), Eval("AdminUserFirstName"), Eval("AdminUserLastName"))%>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn DataField="AdminUserExpireDate" HeaderText="Expire Date"
                    SortExpression="AdminUserExpireDate" UniqueName="AdminUserExpireDate">
                    <HeaderStyle Wrap="False" CssClass="GridHeader_EasyEcomm width150" />
                    <ItemTemplate>
                        <%# EasyEcomm.String_formater.Formater.EmptyString(Eval("AdminUserExpireDate").ToString(),"None")%>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn DataField="AdminUserExpireDate" HeaderText="Expire Date"
                    SortExpression="AdminUserExpireDate" UniqueName="AdminUserExpireDate">
                    <HeaderStyle Wrap="False" CssClass="GridHeader_EasyEcomm width150" />
                    <ItemTemplate>
                        <%# EasyEcomm.String_formater.Formater.EmptyString(Eval("AdminUserExpireDate").ToString(), "Never")%>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="AdminUserActive" DataField="AdminUserActive" SortExpression="AdminUserActive"  HeaderText="Active">
                  <HeaderStyle Wrap="False" CssClass="GridHeader_EasyEcomm width100" />
                    <ItemTemplate>
                    <asp:Literal ID="Literal" runat="server" Text='<%#Eval("AdminUserActive") %>'> </asp:Literal>
                    <asp:ImageButton ID="ImageButton1" CommandName="Toggle"  runat="server" />
                        <asp:Label ID="test" runat="server" Text="Label"></asp:Label>
                    </ItemTemplate>
                 </telerik:GridTemplateColumn>
                <telerik:GridClientSelectColumn UniqueName="AdminUserIdCheckBox" HeaderStyle-CssClass="GridHeader_EasyEcomm width50" />
            </Columns>
        </MasterTableView>
        <PagerStyle Mode="Slider" />
        <ClientSettings EnableRowHoverStyle="true">
            <Selecting AllowRowSelect="TRUE" />
        </ClientSettings>
    </telerik:RadGrid>

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

GridDataItem item = e.Item as GridDataItem;

Literal lit = (Literal)item["AdminUserActive"].FindControl("Literal");

string strtxt = lit.Text.ToString();

ImageButton imagebutton1 = e.Item.FindControl("ImageButton1") as ImageButton;

if (strtxt == "Y")

{

imagebutton1.ImageUrl = "Common/Y.png";

}

else if (strtxt == "N")

imagebutton1.ImageUrl = "Commons/N.png";

}

}

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)

{

if (e.CommandName == "Toggle")

{

ImageButton imgbtn = (ImageButton)e.CommandSource;

if (imgbtn.ImageUrl == "Common/Y.png")

{

imgbtn.ImageUrl = "Commons/N.png";

//change the value in the database here

}

else

{

imgbtn.ImageUrl = "Common/N.png";

//change the value in the database here

}

}

}

[Shinu]

Hi chris,

How are you ajaxifying the grid? I have used the same code and ajaxified the telerik grid using the AjaxManager/AjaxPanel and the  RadGrid1_ItemCommand is firing correclty and I'm able to change the image accordingly,

Here is my ajax manager settings.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Instead of using the Ajax Manager you can  place the Radgrid inside the Ajax Panel for ajaxifying.

Thanks,
Shinu.

[chris]

Yes. When i click on the image i get the ajax loading image but it is not running the code in the RadGrid1_ItemCommand.  Below is my ajax settings

  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
        Width="75px" Transparency="50">
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
            style="border: 0;" />
    </telerik:RadAjaxLoadingPanel>

Thanks for you help