I am new to KendoUI (been using ExtJS for years) and was trying to build a toolbar which will need a textbox and I could not find any reference to how to do this.
I figured it out and am posting it here for others.
Simply add this to your items collection:
{ template: "<input type='text' id='address' class='k-textbox'>" },
If you want to add a label do this:
{ template: "<label>Address:</label>" },
{ template: "<input type='text' id='address' class='k-textbox'>" },
The k-textbox class skins your textbox properly.
It looks like you can put pretty much anything in the template items type.
If others have better ways or more info please share.
Related
How can I bind a local array to the MVVM dropdownlist of kendo.
I have an array like this
var array = [0.0, 20.00]
and I want to bind it to my input control
<input data-role="dropdownlist"
data-bind='"source: ' + array + '"' />
Its not working. Any ideas how I can achieve this?
thanks
The MVVM source binding accepts model field, and not a variable in the window scope. If you would like just bind the DropDownList to primitive values, then use the data-source attribute:
<input data-role="dropdownlist" data-source="array" />
Here is a runnable demo.
If you would like to use the source binding, then define a view model. Here is another demo that demonstrates this approach.
It's hard to tell from your question whether you have forgotten to use kendo.bind() to bind the View to the ViewModel but I suggest you also review the Kendo UI Framework Source Binding documentation for the syntax of data-bind. Also check the DropDownList MVVM Demo for a more complete example. A minimalist implementation is shown below:
<body id="appRoot">
<p>Minimalist DropDownList example</p>
<input data-role="dropdownlist" data-bind="source: array">
<script>
// Ideally you would use this viewModel variable instead of the plain JavaScript object literal below
var viewModel = kendo.observable( { array: [ 0.0, 20.00 ] } );
kendo.bind($("#appRoot"), { array: [ 0.0, 20.00 ] } );
</script>
</body>
When I create multiple view instances of the Marionette view which is linked with a template html with ids, these would get duplicated for multiple instances of these views.
While it works correctly, I feel that there ought to be more architecturally correct way of doing this.
The example code is like below.
Template:
<script id="myTemplate" type="text/template">
<div id="myDiv">
<input type="text" id="myText"/>
<input type="button" id="myBtn" value="Click me!"/>
</div>
</script>
View:
MyView = Backbone.Marionette.ItemView.extend({
template: '#myTemplate',
events: {
'click #myBtn' : 'myFunc' //Correctly identifies its own 'myBtn'
},
myFunc : function() {
alert($('myText').val()); //Again, picks own 'myText'
}
});
var v1= new MyView();
v1.render();
var v2= new MyView();
v2.render(); //Duplicate IDs now present in DOM
I need some unique identification of these DOM elements and hence the ids.
Even when tying the model to this view, we need some way to identify these DOM elements.
What is the correct way of doing this without duplicating the ids.
Just pass the id to the view when you create it:
Template:
<script id="myTemplate" type="text/template">
<input type="text" class="js-myText"/>
<input type="button" class="js-myBtn" value="Click me!"/>
</script>
View def:
MyView = Backbone.Marionette.ItemView.extend({
template: '#myTemplate',
events: {
'click #myBtn' : 'myFunc' //Correctly identifies its own 'myBtn'
},
myFunc : function() {
alert($('myText').val()); //Again, picks own 'myText'
}
});
Instanciation:
var v1= new MyView({ id: "view" + number});
v1.render();
Then you can provide dynamic id values for your views (e.g. by using a model id).
That said, when using Marionette you shouldn't need to call render: you should instead show a view within a region. Take a look at the free sample to my Marionette book to get you up to speed.
If you must go for unique IDs to make sure no one accidentally duplicates a class name inside a view, you can use:
Underscore's uniqueId method to generate a unique ID for each DOM element inside the view, like: <input type="text" id= <%= _.uniqueId("myText_") %> /> This will just make sure that IDs are not duplicated. But they're not very helpful if you need to identify the elements by these IDs.
Marionette's TemplateHelpers which allow you to use helper functions from inside the templates:
//Define this inside your view:
templateHelpers: function() {
var that = this;
return {
getIdSuffix : function() { return that.idSuffix; }
/*Where idSuffix is passed to the view during instantiation
and assigned to this.idSuffix */
};
}
//In the template:
<input type="text" id= <%= "myText_" + getIdSuffix() %> />
You now know before runtime what DOM IDs you will have, provided care is taken not to give the same idSuffix to more than one view instance.
Simply put, don't use an id if it's not unique. Use a class or some other way of identifying the element.
You can use any jQuery selector to locate the element you want, ranging from the insane and brittle:
this.$('div > input:first'); // don't actually do this!
to the slower but semantically better:
this.$('[data-element-type="some-text-box-descriptive-name"]');
Although in reality, using a class is best, because that's what a class is for - for identifying a type of element. I can see that a maintainer might not know not to change your class in the template, so a data-attribute might be acceptable, or maybe even (in this case):
this.$('input[type=text]');
I have a razor display that is being used for entry. In one case, I would like the user to be able to populate the text box, in the other case, I would like to prevent the user from populating it. I am using code like:
#Html.TextBoxFor(model => model.Goop, new { #class = "text-box", maxlength = 2, onfocus = "javascript:this.select();" })
if (Model.Review.ReviewType.Equals("M"))
{
<script type="text/javascript">
$(function () {
$("#Goop").prop("disabled", true);
});
</script>
}
I have tried to do this several ways, jQuery (above), CSS attribs, javascript, ASP.NET... but all have the same issue: When the form is submitted, if the Goop textbox is disabled, the value for Goop in the model is Null. Ideas?
Thanks in advance!
Maybe it's not as cool without jQuery, but when I do this in my apps I do something along the lines of
if (Model.Review.ReviewType.Equals("M"))
{
#Html.DisplayFor(model => model.Goop)
#Html.HiddenFor(model => model.Goop)
}
else
{
#Html.TextBoxFor(model => model.Goop)
}
If a form element is disabled, it does not post a value. That's how it's supposed to work.
To work around this, you will need to do one of several things. You can enable the fields just before posting by intercepting the submit method. You can use a hidden field to store the data in addition to the disabled control. Or you can just assume the values on the controller side.
by the way, it should be .prop("disabled", "disabled"), which renders as disabled="disabled", that's standards compliant.
I am trying to use the new Kendo UI grid from asp.net mvc 3.
I am having a table the table is generated automatically from a controller in asp.net mvc 3.
And display it with Kendo.ui grid.
However, I am having the html code inside of the cells instead of the html controls
Example:
it display in the cell: <input checked="checked" class="check-box" disabled="disabled" type="checkb.. instead of an input, the code in the View is #html.input
or Edit | Details | <a href="/Adm instead of a link ( code in the View is #Html.actionLink)
How can I make it encode html code ?
This is my script:
$(document).ready(function() {
$("#calendrierMatch").kendoGrid({
});
});
Thanks
The KendoUI Grid automatically encodes the content of the grid, that's why you get the text <input type= ... instead of the actual input controll.
You can disable the encoding for a given column with using the encoded options (see documentation):
encoded: Boolean(default: true) Specified whether the column content
is escaped. Disable encoding if the data contains HTML markup.
So you need something like:
$(document).ready(function(){
$("#grid").kendoGrid({
//...
columns: [
{
field: "Column containing HTML",
encoded: false
}
]
});
});
in model binding kendo grid Razor Html Page use this code
#Html.Kendo().Grid(Model).Name("GridName").Columns(col =>{
col.Bound(m => m.ID);
col.Bound(m => m.Name);
col.Template(#<text>
#Html.Raw(HttpUtility.HtmlDecode( item.Text))
</text>);
})
You need to add the template feature of kendo grid.
In the below code i have created a text box inside the cell of kendo grid.
{
field: "Total",
title: "Total",
width: "40px",
template: "<input type='text' class=\"quantity_total\" id='txtTotal_${ItemId}'
name='txtTotal_${ItemId}' maxlength='8' onkeypress = 'return
fnCheckNumeric_total(event,this.id)' />"
},
I have an controller which has check like that
if (form["submit"].ToString() == "Continue")
{
}
and i have button which is doing submit
<button name="submit" value="Continue">Continue</button>
It was all working well until i decided to disable Continue button on submit to prevent double click using this function:
$('form').submit(function () {
if ($(this).valid()) {
$(':submit', this).attr('disabled', 'disabled');
}
});
So now i don't get value form["submit"] posted on controller.
Any thoughts how may i fix that?
I want still prevent second click but be able to get form["submit"] value posted on controller.
Can you control the submit value in a hidden field in the form? I can't tell what other logic you might need, but when the form renders, you could set the hidden field's value to the submit button's value and change it when necessary using the first script below. As long as it has a name attribute and is enabled (which you'd rarely disable a hidden field) then it will post when the form is submitted.
$(function() {
// this assumes your button has id="myButton" attribute
$(':hidden[name="submit"]').val($('#myButton').val());
});
And of course in your form, you would need a hidden field with name="submit"
<input type="hidden" name="submit" value="Continue" />
Then, whenever the state of your form changes, modify the disabled state of the button and the value of the hidden field to reflect the value (if it changed at all).
There are also frameworks you may find useful for UI features like this. KnockoutJS comes to mind. It can be used to "value" bind input elements. It's probably overkill for this small example, but it could be useful if your UI expands. I've added markup, script and comments below if you're interested.
$(function () {
var viewModel = {
submitValue: ko.observable("Continue")
};
ko.applyBindings(viewModel);
$('form').submit(function() {
if($(this).valid()) {
// the following line will change the both the hidden field's value
// as well as the button's value attribute
viewModel.submitValue("some other value");
// I couldn't follow your selector here, but please note I changed
// the name of the submit button in the markup below.
$(':submit, this).attr('disabled', 'disabled');
}
});
});
KnockoutJS requires you use the data-bind attribute to setup your elements. In your case, you'd bind one property to multiple elements like this:
<button name="submitButton" data-bind="value: submitValue"/>Continue</button>
<!-- and bind the same value similarly in the hidden field-->
<input type="hidden" name="submit" data-bind="value: submitValue"/>