Apply CSS Style for the Radgrid CommandItem SaveChanges Button

8 posts, 1 answers
  1. Dinakaran
    Dinakaran avatar
    9 posts
    Member since:
    Aug 2013

    Posted 05 Apr 2014 Link to this post

    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.
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Apr 2014 in reply to Dinakaran Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dinakaran
    Dinakaran avatar
    9 posts
    Member since:
    Aug 2013

    Posted 08 Apr 2014 in reply to Shinu Link to this post

    Hi Shinu,
     
      Thanks for your response. This CSS is only move the button image, but "save changes" text is remain's there.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Apr 2014 in reply to Dinakaran Link to this post

    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
  6. surya
    surya avatar
    9 posts
    Member since:
    Dec 2015

    Posted 07 Jan Link to this post

    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

  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1796 posts

    Posted 11 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. surya
    surya avatar
    9 posts
    Member since:
    Dec 2015

    Posted 12 Jan in reply to Konstantin Dikov Link to this post

    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

  9. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1796 posts

    Posted 15 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017