disable kendo ui controls in mvc - model-view-controller

I am using kendo ui controls for the first time in mvc.
1> #Html.Kendo().TextBoxFor(model => model.field).Name("txtFirstName")
how do I reset the value to empty string and disable a kendo textboxfor using jquery?
for some controls I am able to do something like this, but for the kendo.Textbodfor() I donot know what to pass in the .data()
var txtLastName= $("#LastName").data("kendoAutoComplete");
txtLastName.value("");
txtLastName.enable(false);
2> this partial view only renders a textbox - how to reset the value to an empty string and disable the textbox rendered by the partial view
<li>#Html.Partial("~/Views/xyz/_AutoComplete.cshtml")</li>

When using #Html.Kendo().TextBoxFor the generated output doesn't generate a Kendo widget it is simply an input element.
You just need to use some jQuery or Javascript to do what you want.
$('#txtFirstName').removeAttr("value")
$('#txtFirstName').prop("disabled", "disabled")

Related

Changing kendo textbox value loses formatting

I have a basic textbox defined as:
#Html.Kendo().TextBoxFor(m => m.myNumber).Format("{0:#,###}").HtmlAttributes(new { #readonly = "readonly", style = "width:150px;" })
After doing an ajax call I update the value via javascript:
$("#myNumber").val(data.myNumber);
However now the formatting is lost, there's no longer a comma thousands separator present. Is there a javascript function I need to call on $("#myNumber"), like a rebind or refresh? For some reason telerik doesn't have any documentation for their textbox.
Copying answer from the comments:
I think what you're more looking for is the NumericTextBox. This will give you the proper controls of being able to set it's format and then in the javascript after your ajax call, set the value of the kendo object to maintain formatting. Right now all you're doing is selecting a plain jQuery html element and setting it's value. That won't interface with the kendo textbox (which isn't an object) at all. You'll either need to return your value in the format you desire or explore #Kevin's option as alternatives.

How to read datasource of a Kendo DropDownList only once?

(MVC Razor) So on my page I have a Kendo grid which contains a DropDownList within a certain column. Now I don't want to fill data of my dropdownlist from controller (With Viewbag/ViewData) before the page loads because it would slow it down, but instead I'd like to fill the DropDownList data on user click with a call to a controller function, and call the read method only once(on first click). How would I be able to achieve this goal?
Set autoBind property to false. It will cause that dropdown will not be filled by data before user click on it.
After component is initialized dataBound event is started so you can set readonly in it.
Demo here

kendo ui grid with two tables - header and data

I was trying to use the Kendo Grid UI control.
I am using the binding from Javascript with few template columns.
When the HTML is generated it gets two tables, one for header and one for body. This becomes hard for accessibility, can someone please guide me how do I set to generate only one table with header and data in it.
This issue is caused by setting grid to be scrollable. Scrollable property in Kendo UI for jQuery is true by default so you need to explicitly set it false.
If you are using Kendo UI for ASP.NET MVC then you have to remove GridBuilder's .Scrollable() method call.

Disable web browser's default autocomplete on kendo multiselect

I'm creating a kendo multiselect from a select input. The kendo control renders out a basic input text box and a custom drop down that is displayed as you type. The issue I'm having is that the input it triggering the default web browser autocomplete dropdown which is overlaying the kendo dropdown. I need to disable the default web browser behavior so that only the kendo dropdown is displayed. I've tried adding the autocomplete="off" attribute to the select tag that the kendo multiselect is initialized from but the resulting tag that is rendered by kendo does not carry this attribute over.
Never mind, I simply used the 'input' field off of the kendo object to access the input and then added the attribute after the kendo control was initialized
$('#multiSelect').data('kendoMultiSelect').input.attr('autocomplete', 'off');
This resolved the issue

KendoUI: how to use edit in line for html form in KendoUI

Firstly, I am doing a research on KendoUI, and my experience is mainly on struts-layout taglib.
And now I got issues on HTML Form while using KendoUI.
My Questions are as below:
Can Kendo ListView be used to replace the html form? That is, there is no Form any more, but a kendo ListView.
If still use html form, how to make each field editable in line (is there any kendo widget to do same behavior as JQuery UI plugin X-editable)?
The closest thing would probably be a Grid that is editable. Clicking on a cell puts it in edit mode: http://demos.telerik.com/kendo-ui/grid/editing
But you could also make a custom Kendo UI widget that behaves basically the same as x-editable by having a clickable element that opens a Kendo Tooltip box with an input element in it.

Resources