Apply CSS Style for the Radgrid CommandItem SaveChanges Button

[Dinakaran]

I'm using Radgrid CommandItem Savechanges button to save all the changes from the batch edit. I'm trying to apply CSS style like horizontal alignment to right, change the background color and so on. I used CommandItemStyle option but it's not showing any changes in the save changes button. Is this possible to apply CSS style to SaveChanges button?. I can't able to use CommandItemTemplate because i can't able to get changed batch edit items in the custom button click.

[Shinu]

Hi Dinakaran,

Please try the following CSS to align the SaveChangesButton to right.

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
  if (e.Item is GridCommandItem)
  {
   //Access the savechanges linkbutton
    LinkButton savebutton = e.Item.FindControl("SaveChangesButton") as LinkButton;
    savebutton.CssClass = "savebtn";
  }
}

CSS:

<style type="text/css">
    .saveBtn
    {
        position:absolute;
        margin-left:74%;
    }
    <%--  Access the savechanges icon--%>
    .RadGrid_Default .rgSave
    {
        position:absolute;
        margin-left:72.5% !important;
    }
</style>

Thanks,
Shinu

[Dinakaran]

Hi Shinu,
 
  Thanks for your response. This CSS is only move the button image, but "save changes" text is remain's there.

[Shinu]

Hi Dinakaran,

Sorry for the mistype, please correct the CSS class name as saveBtn in the C#.

CSS:

.saveBtn
{
 position: absolute;
 margin-left: 74% ;
}

C#:

savebutton.CssClass = "saveBtn";

Thanks,
Shinu

[surya]

Hi Shinu...

I am very new to telerik using radgrid batch editing everything is fine but when i click on save changes my grid is comletetly disappearing and coming back after saving.In demo it is just showing loading icon.How can i achieve that?Am i missing any style?

 

Thank you

[Konstantin Dikov]

Hello Surya,

By default, clicking on the "Save Changes" button will initiate a postback and the entire page will be refreshed. To achieve the desired behavior you will have to enable AJAX for RadGrid through RadAjaxPanel or RadAjaxManager (as in the demo that you are referring).


Best Regards,
Konstantin Dikov
Telerik

[surya]

hello Dikov,

thank you for getting back.I am using radAjaxPanel and radAjax manger .I have three grids .

<asp:Panel ID="Radscriptpanel" runat="server">
    <telerik:RadAjaxManager runat="server">
        <ajaxsettings>
            <telerik:AjaxSetting AjaxControlID="gridMenuMixConfig">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gridMenuMixConfig" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="SavedChangesList" />

                </UpdatedControls>
            </telerik:AjaxSetting>
           <telerik:AjaxSetting AjaxControlID="gridMenuMixEntry">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gridMenuMixEntry" LoadingPanelID="RadAjaxLoadingPanel1" />

                </UpdatedControls>
            </telerik:AjaxSetting>
             <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Radgrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

                </UpdatedControls>
            </telerik:AjaxSetting>
             <telerik:AjaxSetting AjaxControlID="txtRegisterCustCount">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="txtRegisterCustCount" LoadingPanelID="RadAjaxLoadingPanel1" />

                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="txtRegisterSalesTax">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="txtRegisterSalesTax" LoadingPanelID="RadAjaxLoadingPanel1" />

                </UpdatedControls>
            </telerik:AjaxSetting>

        </ajaxsettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecorationZoneID="demo1" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadFormDecorator ID="RadFormDecorator2" runat="server" DecorationZoneID="demo2" DecoratedControls="All" EnableRoundedCorners="false" />
</asp:Panel>

 

Thankyou

[Konstantin Dikov]

Hello Surya,

If your RadGrid perform AJAX requests correctly, the RadAjaxLoadingPanel is most likely with white background in your scenario, because you need to set the Skin property of the control in order for it to be visible (as in the demos):

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Default"></telerik:RadAjaxLoadingPanel>

Please give this a try and see if everything is working correctly with the above change.


Regards,
Konstantin Dikov
Telerik