I am using the kendo ui autocomplete control inside a div. I set the styles for the div but it didn't work for me.
<div>
#(Html.Kendo().AutoComplete()
.Name("NameAutoComplete")
.DataTextField("FullName")
.BindTo(Model.NameList)
.Filter("contains")
)
</div>
Thank you.
Indeed the easiest way is to do it through the HtmlAttributes method.
e.g.
#(Html.Kendo().AutoComplete().Name("test").HtmlAttributes(new { style="width:400px"}))
Related
I am new to Kendo. I am using Html.Kendo().CheckBoxFor(m => m.Enable) in MVC cshtml, and I'm unable to add a change event for this checkbox. The Html.Kendo().DropDownListFor has .Events(e => e.Change("PopulateCountry")), but I dont see same type of event in CheckBox.
Can anyone help on this?
The Html.Kendo().CheckBoxFor helper renders a regular html5 checkbox. It is not actually a kendo widget like Html.Kendo().DropDownListFor creates. I believe this is why the helper for CheckBox is lacking an .Events option.
Regardless, you can use the .HtmlAttributes option to add a change handler to the checkbox element instead:
.HtmlAttributes(new { onchange = "PopulateCountry();" })
I am having an mvc kendo CombBox declared as
var comboBox = Html.Kendo().ComboBox()
.Name("Combo")
.Placeholder("Select a val...")
.DataTextField("Description")
.DataValueField("Description")
.AutoBind(false)
.Filter(FilterType.Contains)
.DataSource(source => source
.Read(read => read.Action("XYZ", "ABC").Data("callList"))
.ServerFiltering(true)
)
.HtmlAttributes(new { style = "width:400px" });
Is there any way to have different css for alternative items.
I couldnt find any thing in the kendo documentation. I also tried with JQuery but had failed. Can anyone tell if there is solution for this.
Thanks.
Depending on your browser support (IE9 or higher), you can do this with plain old CSS.
#Combo .k-item:nth-child(odd) {
background-color: #f00;
}
Try this way.
$(document).ready(function () {
$("#States").kendoComboBox();
var cmb = $("#States").data("kendoComboBox");
cmb.ul.find("li:odd").css("background-color", "#C0C0C0");
cmb.ul.find("li:odd").css("background-color", "#FFFFFF");
});
check this kendo dojo http://dojo.telerik.com/ePIQu
I am using Kendo Web not MVC but the result will be same as long as this script runs after the grid is populated.
I'm trying to toggle the visible property of a Kendo UI window through the data-bind method using an MVVM pattern but it is not responding as it should according to the Kendo documentation.
<div id="KendoWindow"
data-role="window"
data-bind="visible:WindowVisible"
data-title="Title does not show"
data-width="500"
data-height="300"
>
<div class="span4" >
<label for="Comment">Comments</label>
<textarea id ="Comment" data-bind="value: Comment"></textarea>
</div>
I am initializing it properly but if I set the WinowVisible property to false in the viewModel like so,
this.set("WindowVisible", false);
the window stays visible.
If I set it through jQuery like so :
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:false
});
it will then become invisible. Then I can't make it visible again if I run this code:
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:true
});
Maybe try adding data-visible="false" to the window, then when the ShowWindow becomes true, it should become visible. I have a checkbox bound to the boolean value, as well as a button click function setting the boolean and both seem to work fine.
See sample...
http://jsbin.com/jecih/1/edit
How can I disable kendo editor or make it read only? I tried using HTML attribute but no luck ( or I still do it right)
#(Html.Kendo().Editor()
.Name("Text")
.Value(#detail.SRoomInformation)
.Tools(tools => tools.Clear())
)
If you are wondering why there is no such option such as Enable/Disable - because html could be simply shown as html or as text - all the tools the Editor provide are not needed and it is pointless to use such widget. Editor means it helps you edit ;)
If you really want to make it disabled you can use the following line of code after initializing the Editor
e.g.
#Html.Kendo().Editor().Name("test")
<script type="text/javascript">
$(function () {
$($('#test').data().kendoEditor.body).attr('contenteditable', false)
})
</script>
No Idea why the answered question didn't work for me. But anyway, it sparked something like:
#(Html.Kendo().EditorFor(model => model.Description) )
#Html.ValidationMessageFor(model => model.Description)
<script>
// this piece of code neeeeeeeds to be heeeeere! Don't move it
$(document).ready(function () {
var editor = $('#Description').data('kendoEditor');
editor.body.contentEditable=false;
});
</script>
And this worked!:) Have fun!
None of the above solutions worked for me when I tried to implement them. It seems that Telerik has provided an extremely simple solution to this involving an overlaid div as documented at: http://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/enable-and-disable-editor
In practice this resulted in an extra div next to the control I wanted to disable:
<div ng-if="readonly/disabled_Condition == true">
<div id="overlay" style="width:100%;height:250px; top:100; position:absolute; background-color: black; opacity:0.1; z-index:2;"></div>
<textarea kendo-editor k-options="options.DutyEditor" ng-model="item.TasksHtml"></textarea>
</div>
The one issue is matching up the size of the overlaid div to the size of your kendo editor. In my case it's a simple 100% width and 250px height, so I lucked out here.
Thought this might help someone!
I am using Telerik Window in my MVC3 project. I have bulk of files (like .Png, .JPEG, .Pdf etc.) in my local system. I wanted to show these files with Telerik Window. I have no idea that how can i do this. I need suggestions to do this. Please help me for this.
I have a Telerik Window code like this.
View.cshtml
<div id="upload_win">
#{Html.Telerik().Window().Visible(false)
.Name("File").ClientEvents(cli => cli.OnClose("OnClose"))
.Modal(true)
// .LoadContentFrom("action","Controller")
.Scrollable(false)
.Resizable()
.Draggable(true)
.Width(870)
.Height(500)
.Render();
}
</div>
I had this same issue today and this is what I had to do to get it working.
#(Html.Telerik().Window()
.Name("Window")
.Title("Server Report Window (PDF)")
.Draggable(true)
.Resizable(resize => resize
.Enabled(false)
)
.Modal(true)
.Buttons(button => button
.Maximize()
.Close()
)
.Effects(fx =>
fx.Zoom().Opacity()
.OpenDuration(AnimationDuration.Slow)
.CloseDuration(AnimationDuration.Slow)
)
.Content("<iframe src='Controller/Action' width='100%' height='100%' />")
.Width(500)
.Height(350)
)
So, points to note, I tried using LoadContentFrom, although it would return the PDF, the PDF was being displayed as "byte code". Using Content, I used an iframe, and let the iframe render the PDF.
I'm still trying to figure out how to get it in LoadContentFrom, but for now this get's the job done.
UPDATE: Figured it out, here's the process
Create Action that will return partial view
public ActionResult DisplayPDF(){ return PartialView("_PDFView"); }
Create Partial View that only contains an iframe, be sure to set the width and height to 100%, which will ensure that no matter the size of the Telerik Window, it will expand to fit accordingly, even on resizing. The iframe src should point to the action that returns the File(pdf_content, "application/pdf)
iframe src="Controller/Action" width="100%" height="100%"
In your View that contains the Telerik Window, update it to reflect the path to the PartialView
.LoadContentFrom("Controller/DisplayPDF")