We are using a Kendo NumericTextBox widget to display a calculated value to the user. We want the value shown to change as the viewmodel changes, but we do not want the user to be able to edit the value.
We have tried:
- disabling the widget. This disables user interaction, as required, but it does not allow the value to be updated by the view model.
- setting the widget as readonly. This allows the value to be updated, and does not allow the user to change the value directly, but the look of the widget changes when the user clicks on it.
We are trying to find a way to have something in between these two, where the value can be changed programmatically, but not by the user. And where there is no visible effect when the user clicks on the widget.
Is this possible with a Kendo NumericTextBox?
Edit: The issue is that changes to the viewmodel are sent back to the server by serializing the form, and disabled inputs don't get included in the form serialization. This is not an issue with the widget itself, as pointed out by CodingWithSpike.
The widget seems to update fine when set on the viewmodel, and the widget is disabled.
See this example.
<input data-role="numerictextbox"
data-format="c"
data-min="0"
data-max="100"
data-bind="enabled: isEnabled,
value: selectedNumber">
<button type="button" data-bind="click: up">Incrament</button>
...
<script>
var viewModel = kendo.observable({
selectedNumber: 0,
isEnabled: false,
up: function () { viewModel.set("selectedNumber", viewModel.selectedNumber + 1); }
});
kendo.bind($("#example"), viewModel);
</script>
Disable the widget when rendering the page to the user - this will still show updated values when they are re-calculated from other input. Then re-enable the widgets just before serializing the form back to the server.
Related
In our scenario we need to edit the data directly from the grid, without passing by a button that changes the state of the row.
Example : a checkbox that changes a boolean value into the data. This sort of update doesn't necessarily need a button to change the state of the row : the user could possibly change the value through the checkbox without changing the state of the grid.
My question is : what the more convenient way of doing this ? I've seen the grid has mutliple kinds of update (Template-Driver Forms, External Forms, Reactive Forms etc ...) but each time the developer has to put a button to change the state of the row.
I manage this directly into my grid template, and I bypassed the kendoGridEditTemplate because it demands a user interaction with the row.
<ng-template kendoGridCellTemplate
let-dataItem
*ngIf="column.value.Type === 'boolean'">
<span *ngIf="!column.value.Editable" [...]></span>
<kendo-switch *ngIf="column.value.Editable && Config.Editable === 'Direct'"
[ngModel]="dataItem[column.key]"
(ngModelChange)="dataItem[column.key]=$event"
(valueChange)="gridEditable.updateData(Config, dataItem, [{field:column.value.Editable.Column, value: $event }])">
</ng-template>
We'll use the kendoGridEditTemplate when we'll integrate user interaction when modifying the row data.
I am using the kendo UI Web Grid to display some data.
Since I am dealing with a lot of data I have decided to use the grid virtual scrolling feature, which works great.
Now, I need to add a non databound column that will get populated with a checkbox, so that I can check/uncheck a record in the grid for further processing.
I cam able to add the checkbox column by simply using a template :
columns: [
{
field: "",
width:'3%',
title: " ",
hidden: false,
template: "<input type=\"checkbox\" />"
},
The problem that I am running into is that when virtual scrolling is enabled, if I check one of the checkboxes, then scroll the grid, when I go back to the record that was checked, it is not checked anymore.
How can I use virtual scrolling and still keep my checkbox checked ?
Thanks
The rows are always re-created when you pass as many records as your pageSize is. However if you really bind that checkbox to the underlying model, the changes will be persisted and once you are back on the same page you will see the items as checked.
One way to make the checkboxes reflect the changes to the model is like this:
grid.tbody.on('click',':checkbox',function(e){
var row = $(this).closest('tr');
grid.dataItem(row).set('isAdmin',$(this).is(':checked'));
})
Where isAdmin is the name of the field the checkbox is bound to.
Here is live example.
I have a bootstrap dropdown button for each table row.
When the dropdown is clicked it shows a small form with some input fields.
When the user submits this form data or the row gets redrawn the dropdown closes.
I tried preserving the dropdown state using the Template.preserve() method, similar to inputs but with no success.
Some suggested using {{#constant}} directive surrounding the dropdown I also have some reactive content inside the form that needs re-rendering, so this options is not for me.
I have noticed this issue with reactive templates and there is no good solution that I know of. This is somewhat of a hack but it works.
Option 1
Manually add and remove a css class to your dropdown. Use session variables to save the state of the dropdown.
This should be the default state of your dropdown... class="dropdown"
When a user clicks on the dropdown use a session variable to save its state and add 'open' to the HTML class attribute. class="dropdown open"
When a user closes the dropdown remove 'open'
Option 2:
1. User clicks dropdown button.
2. Save dropdown button ID as active using a session variable.
3. Use the following callback to reopen your dropdown... Template.myTemplate.rendered = function ( ) {
if (dropdown = active) {
$().dropdown('toggle'); //instead of toggle try 'open'
}
}
I haven't tried this with dropdowns yet but I was having the same issue with modals disappearing every time the template kept rendering. I tried the second option and it didn't work that great. I ended up using something like the first option to solve the issue and it worked great.
I know MVC doesn't have autoposback functionality and that needs to be done using JS/JQuery, and that is when my problems start... don't know how to do it yet.
This is how I populate my ddl:
#Html.DropDownListFor(x => x.CurrentCountry,
new SelectList(Model.Countries.ToList(), "Code", "Name"))
and my URL have this format:
localhost/Products/?country=US¤cy=USD&category=17&page=2
How do I add postback functionality to take the selected country?
Thanks.
I know MVC doesn't have autoposback functionality and that needs to be done using JS/JQuery
Not necessary. You could put the dropdown in an HTML <form> and when the user submits this form the selected value will be sent to the server.
If on the other hand you want to transmit the selected value when the user changes selection then you need to use javascript and subscribe to the onchange event. For example if you use jQuery:
$(function() {
// subscribe to the change event of the dropdown
$('#CurrentCountry').change(function() {
// find the containing form and submit it
$(this).closest('form').submit();
});
});
I have an MVC 3 Razor Telerik grid. I have an Edit comand on the row.
When a user clicks on Edit (this places the grid in Edit mode with an Update and Cancel button), I want to set a property for two of the columns to readonly.
When the user clicks on Cancel or Update, I want to set the columns back to full permission.
I know there must be some properties in the controller I should be able to set when the Edit button is pressed for this, but have not seen any docs on how to accomplish this.
How can I do this?
I'm using version 2011.2.712.340 of the controls.
What your describing above sounds a little bit confusing. The purpose of the readonly property is to ensure that when your row enters edit mode the columns that had readonly explicitly set cannot be edited, which seems to be what you're looking for. When in regular read mode all columns will have the same permission whether or not readonly was set, since you are just viewing the data and not editing.
Edit after clarification from comment:
Seems like you want to have this field editable when you are inserting a record, but not when you edit the row. Well, this can be done using some JavaScript. If you use Ajax binding (the only way to fire this event) you can do the following by subscribing to the onEdit client-side event:
...
.ClientEvents(clientEvents => clientEvents.OnEdit("onEdit"))
...
And here's the JavaScript:
<script type="text/javascript">
function onEdit(e) {
var form = e.form;
var mode = e.mode;
if (mode == "edit") {
var country = form.Country; //Country is a public property of my Model
country.disabled = true;
}
}
As you can see above, I get the form with the associated edited row and specifically grab the field associated with the property I do not want to be edited and disable that input element.