toolbar Grid hides grid's header and filterbar

[Miguel Jesús]

Hello,

I'm having problems when activating the grid toolbar on my page.

That's how my page looks like when grid toolbar is disabled.

@(Html.EJ().Grid<UsuarioDto>("FlatGrid")

    .Datasource(ds => ds.URL("Usuario/DataSource").Adaptor(AdaptorType.UrlAdaptor))

    .AllowSorting()

    .AllowPaging()

    .AllowResizing()

    .Locale("es-PE")

    .AllowFiltering()

    .FilterSettings(filter =>

    {

        filter.FilterType(FilterType.FilterBar);

        filter.FilterBarMode(FilterBarMode.Immediate);

    })

    .PageSettings(page => { page.PageSize(6); })

    .ClientSideEvents(eve => { eve.ActionBegin("actionbegin");})

    .Columns(col =>

    {

        col.Field("UserName").HeaderText("Username").TextAlign(TextAlign.Right).Width(75).Add();

        col.Field("NombreCompleto").HeaderText("Nombre Completo").Width(80).Add();

        col.Field("Telefono").HeaderText("Telefono").TextAlign(TextAlign.Right).Width(75).Add();

        col.Field("Email").HeaderText("Email").Width(110).Add();

        col.Field("RolNombre").HeaderText("Rol").Width(110).Add();

    }))

And this is when toolbar is enabled

@(Html.EJ().Grid<UsuarioDto>("FlatGrid")

    .Datasource(ds => ds.URL("Usuario/DataSource").Adaptor(AdaptorType.UrlAdaptor))

    .AllowSorting()

    .AllowPaging()

    .AllowResizing()

            .ToolbarSettings(toolbar =>

            {

                toolbar.ShowToolbar().ToolbarItems(items =>

                {

                    items.AddTool(ToolBarItems.Add);

                    items.AddTool(ToolBarItems.Edit);

                    items.AddTool(ToolBarItems.Delete);

                    items.AddTool(ToolBarItems.Update);

                    items.AddTool(ToolBarItems.Cancel);

                });

            })

    .Locale("es-PE")

    .AllowFiltering()

    .FilterSettings(filter =>

    {

        filter.FilterType(FilterType.FilterBar);

        filter.FilterBarMode(FilterBarMode.Immediate);

    })

    .PageSettings(page => { page.PageSize(6); })

    .ClientSideEvents(eve => { eve.ActionBegin("actionbegin");})

    .Columns(col =>

    {

        col.Field("UserName").HeaderText("Username").TextAlign(TextAlign.Right).Width(75).Add();

        col.Field("NombreCompleto").HeaderText("Nombre Completo").Width(80).Add();

        col.Field("Telefono").HeaderText("Telefono").TextAlign(TextAlign.Right).Width(75).Add();

        col.Field("Email").HeaderText("Email").Width(110).Add();

        col.Field("RolNombre").HeaderText("Rol").Width(110).Add();

    }))

I have no idea of what would be the reason of this behaviour.

I'm using syncfusion Essential Studio version 13.1.0.21 with MVC5 (5.2.2) and .Net framework 4.5.1.

And on master's layout i added this references:

   <link rel='nofollow' href="@Url.Content("~/Content/ej/web/default-theme/ej.widgets.all.min.css")" rel="stylesheet" />

    <script src="@Url.Content("~/Content/js/jquery-1.10.2.min.js")"></script>

    <script src="@Url.Content("~/Content/js/jquery.easing.1.3.min.js")"></script>

    <script src="@Url.Content("~/Content/js/jquery.globalize.min.js")"></script>

    <script src="@Url.Content("~/Content/js/jsrender.min.js")"></script>

    <script src="@Url.Content("~/Content/js/ej.web.all.min.js")"></script>

     @Html.EJ().ScriptManager()

Waiting for your reply,

Regards

[Ajith R]

Hi Miguel,

Thanks for using Syncfusion products.

Query : I'm having problems when activating the grid toolbar on my page. I have no idea of what would be the reason of this behavior.

We are sorry to let you know that we are unable to reproduce your reported issue. We suspect that old version of Grid script and CSS files in your application which causes the issue. Please refer the below queries for further details.

1. Can you please ensure whether you have used 13.1.0.21 version scripts and CSS files in your application. Please refer the below screen shot to know the current version used in the script file.

2. Please share us the screen shot if you have faced any script error in the browser console.

3. Can you please provide as the script function for actionBegin and any custom scripts used related to the Grid in your application?

4. Could you please share us the layout page with custom CSS if any used in your application?

5. Please provide us more information regarding your reported issue or else please get back to us with reproducing the issue in the below sample it will be helpful for us to analyze the issue and provide you the response as early as possible.

Please refer the below location to get the CSS and Script files for 13.1.0.21.

CSS Files: C:\Program Files (x86)\Syncfusion\Essential Studio\13.1.0.21\JavaScript\assets\css\web
Script Files: C:\Program Files (x86)\Syncfusion\Essential Studio\13.1.0.21\JavaScript\assets\scripts\web

For your convenience we have created a simple sample and the same can be downloaded from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119202/UrlAdaptor-544390318.zip

Please let us know if you have any concerns.

Regards,
Ajith R

---

MJ Miguel Jesús May 25, 2015 11:20 PM UTC

Thanks for your reply,

I found the error, it was boostrap.

In my template I 'm using bootstrap 2.3 but I think that syncfusion MVC5 needs boostrap 3+ in order to work well.

Would you have any advice to get syncfusion MVC5 working with bootstrap 2.3?

Another few questions,

• I need that the toolbar items redirect to another page, Is there any way to do that? For example, I need Edit button on toolbar redirects to another page, BUT If possible I would like to preserve the validation when no row is selected.
• Is there any way to remove the filter text on the bottom?

Waiting for your reply,

Regards

---

AR Ajith R Syncfusion Team May 26, 2015 12:32 PM UTC

Hi Miguel,

Thanks for your update.

Query 1: Would you have any advice to get syncfusion MVC5 working with bootstrap 2.3?

We have analyzed your query and we would like let you know that our control supports bootstrap 2.3 version also. But, in this version, some styles has been applied to element if the element’s class name has been ended as “span”.
Please refer the below styles that are in bootstrap 2.3 version CSS file.

CSS-[bootstrap.2.3 version]

[class*="span"] {

float: left;

min-height: 1px;

margin-left: 20px;
}

In our control, we have used class name “e-toolbarspan” for some internal process. So above styles applied to this tool bar element also. In earlier version of bootstrap CSS files these styles are removed.

If you want to use the bootstrap 2.3 version in your project, Please use below code in your view page to resolve the reported issue.

<style>

.e-toolbarspan {

float:none;

margin-left:auto;

}
</style>

Query 2: I need that the toolbar items redirect to another page, Is there any way to do that? For example, I need Edit button on toolbar redirects to another page, BUT If possible I would like to preserve the validation when no row is selected.

We suggest you to use ToolbarClick client side event and set the args.cancel as true based on the itemName to prevent the default actions performed by tool bar item. After that we can perform our custom actions like redirect the page on edit tool item click based on the selected record length. Please refer the below code snippet for further details.

[index.cshtml]

@(Html.EJ().Grid<object>("Grid")

-----------

-----------

.ClientSideEvents(eve => { eve.ToolbarClick("toolbarClick"); })

)

function toolbarClick(args) {

if (args.itemName == "Edit") {

args.cancel = true; // Cancel the default edit action

// Get selected records length

if (this.getSelectedRecords().length > 0) {

var OrderID = this.getSelectedRecords()[0].OrderID;

window.location.rel='nofollow' href = "/Home/SelectedData?OrderID=" + OrderID;

}

else

alert("No Records Selected")

}
}

[HomeController.cs]

public ActionResult SelectedData(int OrderID)

{

// Write your code here

return View(data);
}

Query 3: Is there any way to remove the filter text on the bottom?

We have faced an issue while setting ShowFilterBarStatus as false in the FitlerSettings and we considered this “ShowFilterBarStatus not working properly” as an issue. A support incident has been created under your account to track the status of this issue. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

For your convenience we have created a simple sample and the same can be downloaded from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119202/ToolbarBootstrap189155041.zip

Please let us know if you have any concerns.

Regards,
Ajith R

SIGN IN To post a reply.

• 3 Replies
• 2 Participants
• Want to subscribe?
  SIGN IN
• Created by
  MJ Miguel Jesús
• Platform
  ASP.NET MVC
• Control
  Grid
• Created On
  May 21, 2015 05:12 PM UTC
• Last Activity On
  May 26, 2015 12:32 PM UTC

[Miguel Jesús]

Thanks for your reply,

I found the error, it was boostrap.

In my template I 'm using bootstrap 2.3 but I think that syncfusion MVC5 needs boostrap 3+ in order to work well.

Would you have any advice to get syncfusion MVC5 working with bootstrap 2.3?

Another few questions,

• I need that the toolbar items redirect to another page, Is there any way to do that? For example, I need Edit button on toolbar redirects to another page, BUT If possible I would like to preserve the validation when no row is selected.
• Is there any way to remove the filter text on the bottom?

Waiting for your reply,

Regards

[Ajith R]

Hi Miguel,

Thanks for your update.

Query 1: Would you have any advice to get syncfusion MVC5 working with bootstrap 2.3?

We have analyzed your query and we would like let you know that our control supports bootstrap 2.3 version also. But, in this version, some styles has been applied to element if the element’s class name has been ended as “span”.
Please refer the below styles that are in bootstrap 2.3 version CSS file.

CSS-[bootstrap.2.3 version]

[class*="span"] {

float: left;

min-height: 1px;

margin-left: 20px;
}

In our control, we have used class name “e-toolbarspan” for some internal process. So above styles applied to this tool bar element also. In earlier version of bootstrap CSS files these styles are removed.

If you want to use the bootstrap 2.3 version in your project, Please use below code in your view page to resolve the reported issue.

<style>

.e-toolbarspan {

float:none;

margin-left:auto;

}
</style>

Query 2: I need that the toolbar items redirect to another page, Is there any way to do that? For example, I need Edit button on toolbar redirects to another page, BUT If possible I would like to preserve the validation when no row is selected.

We suggest you to use ToolbarClick client side event and set the args.cancel as true based on the itemName to prevent the default actions performed by tool bar item. After that we can perform our custom actions like redirect the page on edit tool item click based on the selected record length. Please refer the below code snippet for further details.

[index.cshtml]

@(Html.EJ().Grid<object>("Grid")

-----------

-----------

.ClientSideEvents(eve => { eve.ToolbarClick("toolbarClick"); })

)

function toolbarClick(args) {

if (args.itemName == "Edit") {

args.cancel = true; // Cancel the default edit action

// Get selected records length

if (this.getSelectedRecords().length > 0) {

var OrderID = this.getSelectedRecords()[0].OrderID;

window.location.rel='nofollow' href = "/Home/SelectedData?OrderID=" + OrderID;

}

else

alert("No Records Selected")

}
}

[HomeController.cs]

public ActionResult SelectedData(int OrderID)

{

// Write your code here

return View(data);
}

Query 3: Is there any way to remove the filter text on the bottom?

We have faced an issue while setting ShowFilterBarStatus as false in the FitlerSettings and we considered this “ShowFilterBarStatus not working properly” as an issue. A support incident has been created under your account to track the status of this issue. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

For your convenience we have created a simple sample and the same can be downloaded from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119202/ToolbarBootstrap189155041.zip

Please let us know if you have any concerns.

Regards,
Ajith R