Hi all,
i want to extend the product entity with some custom properties. I want to show my custom properties in an own tab under products.
The new version 3.3 is a little bit different. How can i add a new tab in my own controller? Is it the HandleEvent-Method?
public void HandleEvent( AdminTabStripCreated eventMessage )
{
if ( eventMessage.TabStripName == "product-edit" )
{
eventMessage.BlocksToRender.Add( );
}
}
New Tab in nopCommerce 3.3
- 1
- 2
nopCommerce team
- 16639
- 156220
- 22.10.2008
- Armenia
Please find how we use it in one of our commercial themes below:
public class AdminTabStripCreatedEventConsumer : IConsumer<AdminTabStripCreated>
{
public void HandleEvent(AdminTabStripCreated eventMessage)
{
if (eventMessage.TabStripName == "affiliate-edit")
{
//http://docs.kendoui.com/api/web/tabstrip#methods-append
eventMessage.BlocksToRender.Add(new MvcHtmlString("<script>" +
"$(document).ready(function() {" +
"$('#category-edit').data('kendoTabStrip').append(" +
"[{" +
"text: 'New tab title'," +
"content: '<b>text</b>'" +
"}]);" +
"});" +
"</script>"));
var actionName = "CategoryIconTabContent";
var controllerName = "ThemeHelperComputer";
var routeValues = new RouteValueDictionary()
{
{"Namespaces", "Nop.Plugin.ThemeHelper.Computer.Controllers"},
{"area", null},
{"categoryId", categoryId}
};
var urlHelper = new UrlHelper(eventMessage.Helper.ViewContext.RequestContext).Action(actionName, controllerName, routeValues);
eventMessage.BlocksToRender.Add(new MvcHtmlString("<script>" +
"$(document).ready(function() {" +
"$('#affiliate-edit').data('kendoTabStrip').append(" +
"[{" +
"text: 'New tab title'," +
"contentUrl: '" + urlHelper. + "'" +
"}]);" +
"});" +
"</script>"));
}
}
}
MVP
- 1099
- 15010
- 01.03.2011
- United States
u can try this:
public void HandleEvent(AdminTabStripCreated eventMessage)
{
if (eventMessage.TabStripName == "product-edit")
{
string url = "/Controller/Action;
string tabName = _localizationService.GetResource("Tab name");
var sb = new StringBuilder();
sb.Append("<script language=\"javascript\" type=\"text/javascript\">");
sb.Append(Environment.NewLine);
sb.Append("$(document).ready(function () {");
sb.Append(Environment.NewLine);
sb.Append("var kTabs = $('#product-edit').data('kendoTabStrip');");
sb.Append(Environment.NewLine);
sb.Append(" kTabs.append({ text: \"" + tabName + "\", contentUrl: \"" + url + "\" });");
sb.Append(Environment.NewLine);
sb.Append("});");
sb.Append(Environment.NewLine);
sb.Append("</script>");
sb.Append(Environment.NewLine);
eventMessage.BlocksToRender.Add(MvcHtmlString.Create(sb.ToString()));
}
}
- 3
- 15
- 15.04.2014
- Germany
Hi,
thanks for response.
I tried the first solution. I can see my own tab (the tab name is not bold, how to configure?), but the view/data is loading "onclick". Using a custom validator for my custom properties only works after clicking the tab. Save the view without clicking the tab makes the validator fail because my objects are not instanciated. Without validation my data will be overidden with null/nullable.
Any ideas?
thanks for response.
I tried the first solution. I can see my own tab (the tab name is not bold, how to configure?), but the view/data is loading "onclick". Using a custom validator for my custom properties only works after clicking the tab. Save the view without clicking the tab makes the validator fail because my objects are not instanciated. Without validation my data will be overidden with null/nullable.
Any ideas?
- 3
- 15
- 15.04.2014
- Germany
Hi,
I tried following things:
Controller
public void HandleEvent( AdminTabStripCreated eventMessage )
{
if ( eventMessage.TabStripName == "product-edit" )
{
RouteValueDictionary routeValues = new RouteValueDictionary
{
{ "area", LmisConsts.ADMIN_AREANAME },
{ "id", System.Web.HttpContext.Current.Request.RequestContext.RouteData.Values[ "id" ].ToString() }
};
int? id = Convert.ToInt32( System.Web.HttpContext.Current.Request.RequestContext.RouteData.Values[ "id" ].ToString() );
// EDIT
this.ControllerContext = this.ControllerContext ?? new System.Web.Mvc.ControllerContext( System.Web.HttpContext.Current.Request.RequestContext, this );
this.SaveSelectedTabIndex();
string content = this.RenderPartialViewToString( "_ProductStickersTab", model ).Replace( "\r\n", "" ).Trim();
eventMessage.BlocksToRender.Add( new MvcHtmlString( TabHelper.BuildKendoAdminTab( _logger, eventMessage.TabStripName, this._localizationService.GetResource( ProductStickersConsts.NS_PLUGIN + ".TabProductStickers" ), content, "content" ) ) );
}
}
public static string BuildKendoAdminTab( ILogger logger, string tabStripName, string text, string content, string contentType = "contentUrl", bool encoded = false )
{
return String.Format(
"{5}<script>{5}" +
" $(document).ready(function() {{{5}" +
" $('#{0}').data('kendoTabStrip').append({5}" +
"[{{{5}" +
"text: '{1}',{5}" +
"encoded: {2},{5}" +
"{3}: '{4}'{5}" +
"}}]);{5}" +
"}});{5}" +
"</script>{5}",
tabStripName, text, encoded.ToString().ToLower(), contentType, content, Environment.NewLine
);
}
The content is loading correct, but in the <script>-tag. This is not good.
Using contentUrl the content will load 'onclick'.
I need another way to bind a new tab without changing the original source code.
Any ideas?
I tried following things:
Controller
public void HandleEvent( AdminTabStripCreated eventMessage )
{
if ( eventMessage.TabStripName == "product-edit" )
{
RouteValueDictionary routeValues = new RouteValueDictionary
{
{ "area", LmisConsts.ADMIN_AREANAME },
{ "id", System.Web.HttpContext.Current.Request.RequestContext.RouteData.Values[ "id" ].ToString() }
};
int? id = Convert.ToInt32( System.Web.HttpContext.Current.Request.RequestContext.RouteData.Values[ "id" ].ToString() );
// EDIT
this.ControllerContext = this.ControllerContext ?? new System.Web.Mvc.ControllerContext( System.Web.HttpContext.Current.Request.RequestContext, this );
this.SaveSelectedTabIndex();
string content = this.RenderPartialViewToString( "_ProductStickersTab", model ).Replace( "\r\n", "" ).Trim();
eventMessage.BlocksToRender.Add( new MvcHtmlString( TabHelper.BuildKendoAdminTab( _logger, eventMessage.TabStripName, this._localizationService.GetResource( ProductStickersConsts.NS_PLUGIN + ".TabProductStickers" ), content, "content" ) ) );
}
}
public static string BuildKendoAdminTab( ILogger logger, string tabStripName, string text, string content, string contentType = "contentUrl", bool encoded = false )
{
return String.Format(
"{5}<script>{5}" +
" $(document).ready(function() {{{5}" +
" $('#{0}').data('kendoTabStrip').append({5}" +
"[{{{5}" +
"text: '{1}',{5}" +
"encoded: {2},{5}" +
"{3}: '{4}'{5}" +
"}}]);{5}" +
"}});{5}" +
"</script>{5}",
tabStripName, text, encoded.ToString().ToLower(), contentType, content, Environment.NewLine
);
}
The content is loading correct, but in the <script>-tag. This is not good.
Using contentUrl the content will load 'onclick'.
I need another way to bind a new tab without changing the original source code.
Any ideas?
- 226
- 3440
- 27.05.2013
- United Kingdom
bbo wrote:
Hi,
To solve the bold tab I added a style in the HandleEvent:
You can render the tab in the controller and add it using the "content" attribute kTabs.append({ text: "301 Redirect", content: "{html here}" }); I went down this route but found that using a tab is actually better as the kendo library is very different from telerik library, there isn't a model to bind to as it's all done in Javascript now, so I had to re-engineer a few bits - I'll be using content loading tabs from now on.
Hi,
I tried following things:
Controller
public void HandleEvent( AdminTabStripCreated eventMessage )
{
if ( eventMessage.TabStripName == "product-edit" )
{
RouteValueDictionary routeValues = new RouteValueDictionary
{
{ "area", LmisConsts.ADMIN_AREANAME },
{ "id", System.Web.HttpContext.Current.Request.RequestContext.RouteData.Values[ "id" ].ToString() }
};
int? id = Convert.ToInt32( System.Web.HttpContext.Current.Request.RequestContext.RouteData.Values[ "id" ].ToString() );
// EDIT
this.ControllerContext = this.ControllerContext ?? new System.Web.Mvc.ControllerContext( System.Web.HttpContext.Current.Request.RequestContext, this );
this.SaveSelectedTabIndex();
string content = this.RenderPartialViewToString( "_ProductStickersTab", model ).Replace( "\r\n", "" ).Trim();
eventMessage.BlocksToRender.Add( new MvcHtmlString( TabHelper.BuildKendoAdminTab( _logger, eventMessage.TabStripName, this._localizationService.GetResource( ProductStickersConsts.NS_PLUGIN + ".TabProductStickers" ), content, "content" ) ) );
}
}
public static string BuildKendoAdminTab( ILogger logger, string tabStripName, string text, string content, string contentType = "contentUrl", bool encoded = false )
{
return String.Format(
"{5}<script>{5}" +
" $(document).ready(function() {{{5}" +
" $('#{0}').data('kendoTabStrip').append({5}" +
"[{{{5}" +
"text: '{1}',{5}" +
"encoded: {2},{5}" +
"{3}: '{4}'{5}" +
"}}]);{5}" +
"}});{5}" +
"</script>{5}",
tabStripName, text, encoded.ToString().ToLower(), contentType, content, Environment.NewLine
);
}
The content is loading correct, but in the <script>-tag. This is not good.
Using contentUrl the content will load 'onclick'.
I need another way to bind a new tab without changing the original source code.
Any ideas?
I tried following things:
Controller
public void HandleEvent( AdminTabStripCreated eventMessage )
{
if ( eventMessage.TabStripName == "product-edit" )
{
RouteValueDictionary routeValues = new RouteValueDictionary
{
{ "area", LmisConsts.ADMIN_AREANAME },
{ "id", System.Web.HttpContext.Current.Request.RequestContext.RouteData.Values[ "id" ].ToString() }
};
int? id = Convert.ToInt32( System.Web.HttpContext.Current.Request.RequestContext.RouteData.Values[ "id" ].ToString() );
// EDIT
this.ControllerContext = this.ControllerContext ?? new System.Web.Mvc.ControllerContext( System.Web.HttpContext.Current.Request.RequestContext, this );
this.SaveSelectedTabIndex();
string content = this.RenderPartialViewToString( "_ProductStickersTab", model ).Replace( "\r\n", "" ).Trim();
eventMessage.BlocksToRender.Add( new MvcHtmlString( TabHelper.BuildKendoAdminTab( _logger, eventMessage.TabStripName, this._localizationService.GetResource( ProductStickersConsts.NS_PLUGIN + ".TabProductStickers" ), content, "content" ) ) );
}
}
public static string BuildKendoAdminTab( ILogger logger, string tabStripName, string text, string content, string contentType = "contentUrl", bool encoded = false )
{
return String.Format(
"{5}<script>{5}" +
" $(document).ready(function() {{{5}" +
" $('#{0}').data('kendoTabStrip').append({5}" +
"[{{{5}" +
"text: '{1}',{5}" +
"encoded: {2},{5}" +
"{3}: '{4}'{5}" +
"}}]);{5}" +
"}});{5}" +
"</script>{5}",
tabStripName, text, encoded.ToString().ToLower(), contentType, content, Environment.NewLine
);
}
The content is loading correct, but in the <script>-tag. This is not good.
Using contentUrl the content will load 'onclick'.
I need another way to bind a new tab without changing the original source code.
Any ideas?
Hi,
To solve the bold tab I added a style in the HandleEvent:
if (eventMessage.TabStripName == "product-edit")
{
int productId = Convert.ToInt32(System.Web.HttpContext.Current.Request.RequestContext.RouteData.Values["ID"]);
this.ControllerContext = this.ControllerContext ?? new System.Web.Mvc.ControllerContext(System.Web.HttpContext.Current.Request.RequestContext, this);
string script = @"<style type=""text/css"">
.k-link {
font-weight: bold;
}
</style>
<script language=""javascript"" type=""text/javascript"">
$(document).ready(function () {
var kTabs = $('#product-edit').data('kendoTabStrip');
kTabs.append({ text: ""301 Redirect"", contentUrl: ""/MiscPageRedirect/RedirectProductTab?id=" + productId + @""" });
});
</script>";
eventMessage.BlocksToRender.Add(MvcHtmlString.Create(script));
}
You can render the tab in the controller and add it using the "content" attribute kTabs.append({ text: "301 Redirect", content: "{html here}" }); I went down this route but found that using a tab is actually better as the kendo library is very different from telerik library, there isn't a model to bind to as it's all done in Javascript now, so I had to re-engineer a few bits - I'll be using content loading tabs from now on.
- 5
- 25
- 06.10.2014
- Israel
Hi all,
I have uses the code from hezyz post to append a new tab in admin product tab strip.
I face now a problem with getting the tab content data from the controller, I have received 404 error.
The controller's class name is PricesTabController
I have tried a different urls to get access to the controller function GetTabContent()
string url = "/PricesTab/GetTabContent";
string url = "/NopCommerce/Admin/PricesTab/GetTabContent";
The controller's code is:
[AdminAuthorize]
public class PricesTabController : BaseAdminController
{
[HttpGet]
public ActionResult GetTabContent()
{
return Json(new
{
status = "OK"
});
}
}
What I'm doing wrong?
Please help.
Thank you.
I have uses the code from hezyz post to append a new tab in admin product tab strip.
I face now a problem with getting the tab content data from the controller, I have received 404 error.
The controller's class name is PricesTabController
I have tried a different urls to get access to the controller function GetTabContent()
string url = "/PricesTab/GetTabContent";
string url = "/NopCommerce/Admin/PricesTab/GetTabContent";
The controller's code is:
[AdminAuthorize]
public class PricesTabController : BaseAdminController
{
[HttpGet]
public ActionResult GetTabContent()
{
return Json(new
{
status = "OK"
});
}
}
What I'm doing wrong?
Please help.
Thank you.
- 101
- 1021
- 26.02.2012
- United States
Here is a reusable function that can be used for any NOP tab strip
then you can call it like this example:
private void HandleEvent(AdminTabStripCreated eventMessage, string actionName, string controllerName, string tabName)
{
int id = Convert.ToInt32(System.Web.HttpContext.Current.Request.RequestContext.RouteData.Values["ID"]);
string urlHelper = new UrlHelper(eventMessage.Helper.ViewContext.RequestContext).Action(actionName, controllerName,
new RouteValueDictionary() { { "area", "" }, { "Id", id } });
string script = string.Format(@"<script> $(document).ready(function(){{$('#{0}')
.data('kendoTabStrip').append([{{text:""<b>{1}</b>"", encoded: false, contentUrl:'{2}'}}]);}}); </script>",
eventMessage.TabStripName, tabName, urlHelper);
eventMessage.BlocksToRender.Add(new MvcHtmlString(script));
}
then you can call it like this example:
public void HandleEvent(AdminTabStripCreated eventMessage)
{
if (eventMessage.TabStripName == "product-edit")
HandleEvent(eventMessage, "YourActionName", "YourControllerName", "YourTabName");
else if (eventMessage.TabStripName == "category-edit")
HandleEvent(eventMessage, "YourActionName", "YourControllerName", "YourTabName");
}
- 26
- 200
- 21.11.2016
- India
a.m. wrote:
Hi Andrei,
I have followed the steps and I get
Cannot read property 'append' of undefinedin the console of browser for
if I remove
also I tried
I am using 3.80 version.
Please guide.
Please find how we use it in one of our commercial themes below:
public class AdminTabStripCreatedEventConsumer : IConsumer<AdminTabStripCreated>
{
public void HandleEvent(AdminTabStripCreated eventMessage)
{
if (eventMessage.TabStripName == "affiliate-edit")
{
//http://docs.kendoui.com/api/web/tabstrip#methods-append
eventMessage.BlocksToRender.Add(new MvcHtmlString("<script>" +
"$(document).ready(function() {" +
"$('#category-edit').data('kendoTabStrip').append(" +
"[{" +
"text: 'New tab title'," +
"content: '<b>text</b>'" +
"}]);" +
"});" +
"</script>"));
var actionName = "CategoryIconTabContent";
var controllerName = "ThemeHelperComputer";
var routeValues = new RouteValueDictionary()
{
{"Namespaces", "Nop.Plugin.ThemeHelper.Computer.Controllers"},
{"area", null},
{"categoryId", categoryId}
};
var urlHelper = new UrlHelper(eventMessage.Helper.ViewContext.RequestContext).Action(actionName, controllerName, routeValues);
eventMessage.BlocksToRender.Add(new MvcHtmlString("<script>" +
"$(document).ready(function() {" +
"$('#affiliate-edit').data('kendoTabStrip').append(" +
"[{" +
"text: 'New tab title'," +
"contentUrl: '" + urlHelper. + "'" +
"}]);" +
"});" +
"</script>"));
}
}
}
Hi Andrei,
I have followed the steps and I get
Cannot read property 'append' of undefinedin the console of browser for
.data('kendoTabStrip') if I remove
.data('kendoTabStrip'),error disappears but the tab does not render.also I tried
$('#order-edit').kendoTabStrip().data('kendoTabStrip') but then content disappears for all the tabs. so clearly I am missing something here.I am using 3.80 version.
Please guide.
- 1
- 2