How to - ExportToExcel button left alignment

[Vasssek]

Hello,

I have one small issue with ExportToExcelButton position. By default it's positioned at the right end of CommandItem panel.

What I've tried to achieve is to change export button position to the left border of CommandItem panel.
I tried to do steps described here http://www.telerik.com/community/forums/aspnet-ajax/grid/set-right-allignment-to-export-to-excelbutton-in-radgrid.aspx , but the result effect wasn't good.

For further info please check image in the attachment.

Please help me to solve this issue.

Best regards

Vasssek

[Princy]

Hello,

Try the following CSS.
CSS:

.rgExpXLS
 {
   float:left ! important;
   margin-right:1100px ! important;
 }
.RadGrid_Default .rgCommandRow
 {
  color: Transparent !important;
 }

Thanks,
Princy.

[Vasssek]

Hello,

I've tried to apply your Css style, it works, but it depends on radgrid width. Instead of this I've found another topic which concerns to similar issue.

http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-move-the-export-buttons-to-the-left.aspx

I've modified it a bit and this is the result CSS:

.CustomGridCommandStyle_Only_ExpXLS .rgCommandTable td
{
    text-align: left !important;
    color: #5E5749 !important;
    padding-left: 0 !important;
}

.CustomGridCommandStyle_Only_ExpXLS .rgCommandTable td:first-child
{
     display:none!important;
}

.CustomGridCommandStyle_Only_ExpXLS input.rgExpXLS
{
     margin-left: -27px !important;
}

I hope, it helps somebody...

I'm quite satisfied with it, but I have another question. I wonder whether it is possible to change position of 'export to excel' button as it is drawned in the attachment ? The reason for doing this is, that I don't need to use commanditem panel row and I can show more rows in radgrid...

Best regards

Vasssek

[Mira]

Hello Vasssek,

Please use the following code in order to implement the desired functionality:

void RadGrid2_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        Button btn = new Button();
        btn.Text = "Export Excel";
        btn.CommandName = RadGrid.ExportToExcelCommandName;
        (e.Item as GridHeaderItem)["ColumnUniqueName"].Controls.Add(btn);
    }
}

I hope this helps.

Greetings,
Mira
the Telerik team

[Vasssek]

Hello Mira,

thank you for your code snippet and advice, too. Based on it, I've achieved desired design of radgrid with export to excel button on left filtered cell.

Here is the code for those, who want to achieve something similar...

1. Add this to radgrid declaration in .aspx:

 

OnItemCreated="RadGrid1_ItemCreated" OnItemCommand="RadGrid1_ItemCommand"

 

2. Server side code:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridFilteringItem)
        {
            ImageButton ExportToXLSButton = new ImageButton();
            ExportToXLSButton.ID = "CustomExportToExcelButton";
            ExportToXLSButton.AlternateText = ExportToXLSButton.ToolTip = "Exportovať do Excelu";
            ExportToXLSButton.ImageUrl = "~/Images/ExportToExcel.gif";
            ExportToXLSButton.CommandName = RadGrid.ExportToExcelCommandName;
            (e.Item as GridFilteringItem)["EditCommandColumn"].Controls.Add(ExportToXLSButton);
        }
    }
    protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
    {
        if (e.CommandName == RadGrid.ExportToExcelCommandName)
        {
            RadGrid1.ExportSettings.OpenInNewWindow = true;
            RadGrid1.ExportSettings.ExportOnlyData = true;
            RadGrid1.ExportSettings.IgnorePaging = true;

            RadGrid1.MasterTableView.ExportToExcel();
        }
    }

3. Don't forget to place following code in HEAD section, because radgrid is managed by RadAjaxManager:

function onRequestStart(sender, args) {
               if (    args.get_eventTarget().indexOf("CustomExportToExcelButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToExcelButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToWordButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToPdfButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToCsvButton") >= 0)
               {

                    args.set_enableAjax(false);
                }
}

The result grid with export to excel button is in the attachment.
For more information about exporting data from radgrid check this link: http://www.telerik.com/help/aspnet-ajax/grid-html-export.html

Many thanks to all people from Telerik team who support us :))

Vasssek