I am getting the error:
Delegate 'System.Action' does not take 1 arguments
While creating a Splitter with Partial view rendered inside one of the panes of Splitter. The error is at Content property of the the pane. Please suggest me any changes to solve the problem
#(Html.Kendo().Splitter()
.Name("vertical")
.HtmlAttributes(new { style = "height:900px" })
.Orientation(SplitterOrientation.Horizontal)
.Panes(panes =>
{
panes.Add()
.HtmlAttributes(new { id = "pane1" })
.Resizable(true)
.Size("300px")
.Collapsible(false)
.Content((#<text><div>#Html.RenderPartial("GetUsers", Model)</div></text>));
})
)
with the information from the following link I am able solve my problem. When you have to nest container controls of kendo UI you need to create a helper method for nested content and call the helper method as cotent for container control.
Kendo widgets two level deep in Razor, inline markup blocks cannot be nested
Related
I'm using LoadContentFrom method of Kendo TabStrip, it allows tabstrip to load content from another action method.
The content will be loaded only when user clicks the link, tab, therefore it causes a short delay that I'd like to avoid. I wasn't able to find any method to enable eager loading for this control and load all the tabs at once. Any suggestion or workaround is welcome.
This is a sample tabstrip:
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Animation(false)
.SelectedIndex(0)
.Items(i =>
{
i.Add()
.Text("Action1")
.LoadContentFrom("Action1", "Controller");
i.Add()
.Text("Action2")
.LoadContentFrom("Action2", "Controller");
i.Add()
.Text("Action3")
.LoadContentFrom("Action3", "Controller");
})
)
UPDATE
Thanks to #joaumg, this is the JS code that I'm using:
$('#tabstrip').data().kendoTabStrip.reload($('#tabstrip ul li'))
Reload method does the job and loads the tab, and $('#tabstrip ul li') selector return an array of all tabs.
There are 3 ways of doing it...
First, generating the HTML and calling $("#tabstrip").kendoTabStrip();
Second, generate a JSON, and pass it as dataSource
Both uses the client side and can be seen here: http://docs.telerik.com/kendo-ui/web/tabstrip/overview#initialize-the-tabstrip
A server side uses the TabStrip HtmlHelper, which doc's can be found here: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/tabstrip/overview#tabstrip ( look at the .Items and .Content methods )
I have an editor template for a grid using Telerik MVC grid and I have two kendo ui components in a grid cell. How can I get them to align next to each other i.e. side by side.
I have tried some css and placing them in div and align float but they render in separate spans and unsure on how to get them side by side any ideas?
Currently the search button is underneath the autocomplete textbox.
#model object
#*#Html.Kendo().AutoComplete().Name("LocationSearch").Placeholder("Type in your search item . . ").Filter("startswith").BindTo(new string[] { "UK","USA","FR","ES","TR","RU","PT"}).Separator(",")*#
#(Html.Kendo().AutoComplete()
.Name("DepartmentSearch")
.Filter("startswith")
.Placeholder("Type in your search item")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDepartments", "Home");
})
.ServerFiltering(false);
})
)
#(Html.Kendo().Button()
.Name("Search")
.HtmlAttributes(new { type = "button", style="min-width:20px !important;"})
.Content("...")
)
The autocomplete widget is created in a span added inline width via jquery and this worked. $("#DepartmentSearch").first().css('width', '65%');
I am using MVVM framework(view/viewmodel). I have a hyperlinked field on one of the kendo grid columns. My requirement is that on clicking the hyperlink on the grid, viewmodel function should call. I am trying to achieve this but not able to call. Please suggest any approach for this.
Define a template as:
template: 'Click-me',
And then define SayHello function as:
function SayHello(me) {
alert("hello");
var item = $("#grid").data("kendoGrid").dataItem($(me).closest("tr"));
console.log("item", item);
item.sayGoodbye();
}
NOTE: That SayHello needs to be global.
Where sayGoodbye is defined in your model.
Example here http://jsfiddle.net/OnaBai/2p3yH/
I need to implement conditional TabStrip in Telerik MVC Grid. The parent grid row contains the cell value of Status. If the status is Active i dont suppose to show the tabstrip in the child grid. If the status is Pending, then i need to show the TabStrip to create new item.
I have to do something like this:
if ("<#= Status #>" == "Pending") // The condition is not working here. Always show this tab.
{
items.Add().Text("Create New Detail").Url("/Acq/PoDet/Create/<#=Id#>");
}
})
.ToHtmlString()
Since most probably you are using Ajax binding you will need to write a little bit of JavaScript to achieve your goal. Your writings are not correct because you are meshing JavaScript code (#= ...#) with C# code.
Here is what an idea what you can do in the detail template, (it is a little bit tricky because you need to escape the special symbols):
<script id="employeesTemplate" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("test#=EmployeeID#")
.Items(it=>it.Add().Text("test").Content("content test"))
.ToClientTemplate()
)
<script>
if (#=EmployeeID # % 2) {
$('\#test' + #=EmployeeID#).data().kendoTabStrip.append({"text":"This is the TabTitle",content:"this is some content"})
}
<\/script>
</script>
The example above is using the client API method called append to append a node to the TabStrip on the client side when the DetailView is generated into the detail row if the EmployeeID%2 == 0 (a simple condition).
I hope you got the idea.
In my application, I want the program to redirect the user to a new page AND slide open the list of SUBITEMS when a panelBar ITEM is clicked/selected. However, I am unsure as how this should be implemented.
I have used ".Action" along with "item" of my panelBar but this is unfortunately throwing an error. A small portion of the code is displayed below for your convenience (mainly focus on the second last line). The error being thrown is:
HttpException was unhandled by user code
<% Html.Telerik().PanelBar()
.Name("PanelBar")
.SelectedIndex(0)
.Items(item =>
{
item.Add()
.Text("Home").Action("Index", "Home")
.Items(subItem =>
{
subItem.Add().Text("My Profile").Action("MyProfile", "Profile");
subItem.Add().Text("Test");
});
item.Add()
.Text("Orientation").Action("Index", "Orientation")
.Items(subItem =>
{
subItem.Add().Text("GridView");
subItem.Add().Text("Scheduler");
subItem.Add().Text("Docking");
subItem.Add().Text("Chart");
});
}).Render();
%>
It seems like ".Action" is not working in this case. So my question is, how should I make the item take in an event?
Here is a snippet of how I do this using javascript and it works just fine. I do not dispute that there are other ways of doing this as well. So you are aware, this snippet is from an MVC app that I am doing. I included styling code as well so that you are aware that you can do that. I realise that you were not asking for that functionality but just thought it may help better your understanding of the property.
Lets say I want the font bold, no border and we want to trap a mouse event to perform a redirect.
To handle the styling, I simply add my item and then set my styling with the HtmlAttributes property.
Here is the code for the styling...
**item.Add()
.Text("Surf Shop")
.HtmlAttributes(new { style = "font-weight: bold; border:none;" })**
As my site is a surfing site, I would like to open the Surf Shop homepage and drop the submenu
at the same time. To do this, I use the same HtmlAttributes attributes property and hook into the
onmousedown event event handler. I then call my handler passing in the controller name that I wish to load. I only need the controller as all pages are called index. You could however, pass in a complete string here and simply redirect to it. Whatever blows your hair back... :-)
Here is the code with hook into the event handler...
**item.Add()
.Text("Surf Shop")
.HtmlAttributes(new { onmousedown="onBaseNavItemClick('SurfShop');" })**
Finally, here is the complete code with both styling and hook into the event handler
**item.Add()
.Text("Surf Shop")
.HtmlAttributes(new { style = "font-weight: bold; border:none;",onmousedown="onBaseNavItemClick('SurfShop');" })**
Our event handler function
**function onBaseNavItemClick(itemText)
{
window.location = BASE_URL + itemText + "/index";
}**
ps. The MVC controller that is being called must pass a value back in ViewData in order to toggle the selectedIndex property of the PanelBar. This is so the correct Panel opens when the redirect is performed.
Hope this helps...