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%');
Related
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
Basically i have 2 instances of ckeditor on a single page. One on the left and another in the right side of the page.
The left editor uses a div rather than traditional iframe. I've done this by removing the iframe plugin and including the div editing area plugin.
The right editor loads in an iframe and but is also div based(i can use the iframe editor as well on the right if required, not an issue).
Now if the cursor/focus is on the right editor's content area then the left editor should scroll along with it. I've tried to use the code as provied by Reinmar in below url but it seems to work only with editors based on iframe on both sides. Also please note that i'm using jquery adapter for initializing the editors.
CKEDITOR how to Identify scroll event
I initialized the editor on left as below:
var editor_left = $( '#editor_left' ).ckeditor();
And below is my code for the right editor:-
var editor_right = $( '#editor_right' ).ckeditor();
editor_right.editor.on( 'contentDom', function() {
var editable = editor_right.editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
alert('scroll detected');
parent.$('#left_editor_content_area').scrollTop($(this).scrollTop())
});
});
If i use the iframe based editor on the right then i'm able to get the "scroll detected" alert. But the scrollTop() function still does not work as expected
Any help will be appreciated.
The code that you mentioned is right. You got to update scrollTop property of the div-based editable with the scroll position of the window inside the iframe-based editor (JSFiddle).
var editor_div = CKEDITOR.replace( 'editor_div', {
extraPlugins: 'divarea'
} );
CKEDITOR.replace( 'editor_iframe', {
on: {
contentDom: function() {
var editable = this.editable(),
win = this.document.getWindow(),
doc = editable.getDocument();
editable.attachListener( doc, 'scroll', function( evt ) {
// Get scroll position of iframe-based editor.
var scroll = win.getScrollPosition();
// Update scroll position in the div-based editor.
editor_div.editable().$.scrollTop = scroll.y;
} );
}
}
} );
I'm using Kendo UI 2013.1 and I have a grid within a window. The window's visibility is set to false on the page load, but when a link is clicked, I make it visible.
The problem is that whenever you try to do anything with the grid, like use the filter, or use a paging button, the window becomes invisible. When you click the link again, the window is visible again and reflects whatever the last action was - filtered results or on the next page.
I've tried several approaches that look similar to:
$("#outageWindow").kendoWindow({ visible: true });
But no luck. Here is the full code without any of my resolution attempts:
#(Html.Kendo().Window()
.Name("viewListWindow")
.Title("Complete CI List")
.Width(650)
.Actions(actions => actions.Close())
.Content(#<text>
#(Html.Kendo().Grid(chg.CIsModifiedByChange.CIsModifiedByChange) //Bind the grid to ViewBag.Products
.Name("grid")
.RowAction(row =>
{
if (row.IsAlternate)
{
//Set the background of the entire row
//row.HtmlAttributes["style"] = "background:#e0f7ff;"; this is a lighter blue
row.HtmlAttributes["style"] = "background:#dde1ff;";
}
})
.Columns(columns =>
{
columns.Bound(ci => ci.Value).Title("CI Name");
})
.Pageable() // Enable paging
.Sortable() // Enable sorting
.Filterable() // Enable filtering
)
</text>)
.Draggable()
.Visible(false)
)
<script type="text/javascript">
$(document).ready(function () {
$("#viewCI").bind("click", function () {
$("#viewListWindow").data("kendoWindow").center().open();
})
});
</script>
this solution is work fine for me,
try this
function load_grid() {
/* your grid properties here */
}
$(document).ready(function () {
$("#viewCI").bind("click", function () {
/* load window */
$("#viewListWindow").data("kendoWindow").center().open();
/* load grid into element inside window after window opened */
load_grid();
})
});
I am looking to add a title to the Kendo UI grid toolbar and align it left. Is there some way I can add an h2 or h3 to this area?
Also to style just this toolbar can I access the style property? ( I want to put a darker color/gradient to the top and bottom (where pagination is))
toolbar : [
{"name": "create", template: "<img class='k-grid-add' src='add.png'/>"},
{"name": "save", template: "<img class='k-grid-save-changes' src='save.png'/>"},
{"name": "cancel", template: "<img class='k-grid-cancel-changes' src='cancel.png'/>"}
],
The class that identifies the Kendo Grid toolbar is k-grid-toolbar. So for styling it, you might use:
#grid .k-grid-toolbar {
background: red;
}
For adding some content to the toolbar, you can use:
$(".k-grid-toolbar", "#grid").prepend("<h1>hello</h1>");
or
$(".k-grid-toolbar", "#grid").before("<h1>hello</h1>");
$(".k-grid-toolbar", "#grid").after("<h1>hello</h1>");
depending if you want to add the HTML inside the div containing the buttons before or after it.
And grid is the id of the div containing the grid.
In Kendo-MVC parlance, the solution is quite simple:
#(Html.Kendo().Grid<MyGridsViewModel>()
.Name("MyGridsName")
.ToolBar(toolbar => toolbar.Template("<h4>My Grid's Title</h4>"))
.DataSource(datasource => ...
This works fine until you start getting crazy and attempt to use the Create/Custom buttons builders with the toolbar lambda.
In that case, the buttons are never rendered. The solution there is to use one of the other approaches identified in this thread: http://www.telerik.com/forums/custom-command-button-in-toolbars
I am using Kendo UI MVC grid. One of the properties of the model is bool, so I need to present it in grid as checkbox. By default Kendo UI present it as "true" and "false" values in the column. So you need to first time to click to get checkbox, then second time to click to change value of the combobox. Instead of having default values from grid, I set ClientTemplate, so I got checkbox instead of "true" and "false" values.
c.Bound(p => p.GiveUp)
.Title("Giveup")
.ClientTemplate("<input type='checkbox' id='GiveUp' name='GiveUp' #if(GiveUp){#checked#}# value='#=GiveUp#' />")
.Width(50);
This grid uses batch editing and in-grid editing (GridEditMode.InCell)
.Editable(x => x.Mode(GridEditMode.InCell))
.DataSource(ds => ds.Ajax()
.ServerOperation(false)
.Events(events => events.Error("error"))
.Batch(true)
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("Orders", "Order").Data("formattedParameters"))))
So what I would like to have is ability for user to click on checkbox and change value of my model, but unfortunately that doesn't work. I can see visually checkbox's value is changed but I don't see red triangle that marks cell as changed, and when I click on add new item button, value from checkbox disappear.
Please advice on what I am doing wrong.
Thanks in advance.
For those who would like to see how full code looks like.
Home.cshtml
#(Html.Kendo().Grid<OrdersViewModel>()
.Name("Orders")
.Columns(c =>
{
c.Bound(p => p.Error)
.Title("Error")
.ClientTemplate("<input type='checkbox' #= Error ? checked='checked': '' # class='chkbx' />")
.HtmlAttributes(new {style = "text-align: center"})
.Width(50);
<script>
$(function() {
$('#Orders').on('click', '.chkbx', function() {
var checked = $(this).is(':checked');
var grid = $('#Orders').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Error', checked);
});
});
</script>
Basically when you add/remove records from the Grid the red triangles always disappear (or when you sort/page/filter etc), the checkbox is not the problem with the red triangles.
Now for the checkbox if you create a ClientTemplate which is again a checkbox you will need to click one time to put the cell into edit mode (you will see no difference because the editor template is again a checkbox) so you will need to click second time to actually change the value.
What I suggest you as best practice is to use the approach covered here - it is way more faster (less operations for the Grid) and it easier than applying extra logic to handle the two clicks with the approach above.