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.
Related
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.
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 have a Form to create a new model object and persist it. That form is displayed in a lightbox or popup.
Some fields are dropdownlist showing related info that lives in another table (other model object related to the main model).
What I need to achieve is without leaving the creation form, create a new item of the related type and update the DropDownList in order to continue filling fields and finaly submit the form.
I have done this in winforms but not really sure which is the best approach in MVC 3:
Trigger another popup with a small form?
Use some kind of editable dropdownlist?
Place a small hidden form right next/after the DDL to allow entering the info to create an item in DDL (and to DB also)?
What do you thing is the best option?
Thanks!
There is no editable dropdown list in HTML. There are some toolkits that simulate it, but in general these are clumbsy and really complex. It's a lot easier to stick with basic controls.
You would proably do best to have a small + sign next to the field, and then popup an editing field that inserts the element into the combobox and sends it to the controller via ajax to add to the database.
An alternative to a second pop up is having a toggle add button. When toggled, then show a small area where you can enter the name. Using ajax, save the name, and then refresh your dropdown. This works well if you only have a few attributes to fill in.
I have a grid control displaying data about a Company. I want one column to be "Employee". On click on the any cell of "Employee" column I want to pop up the one Form called "Employee Details" and would like to feel the data.
How can I do this?
As I understand the modal form on click of a jqgrid cell deals with data only related to that row. I want to show different data on the pop up form, i.e. other than the grid data.
Pl help.
Shivali
Probably you can use unobtrusive links in the column (see this and this answers). The advantage of this technique is that instead of typical links you can define any custom action on click on the link. The look of the link can be defined by CSS, but it seems to the that the link can show the user better as other HTML elements, that the user can click on it.
Alternative you can use a button in the column with respect of the custom formatter, but with the same technique as described before you can free define which action will be done on the click.
Inside of the click event with the parameter 'e' you have e.currentTarget as the DOM element of <a> for the link or <input> or <button> if you use buttons in the grid column. To find the row id you can use var row = $(e.currentTarget).closest("tr.jqgrow") or var row = $(e.target).closest("tr.jqgrow") to find the <tr> element. The row id will be row[0].id.
I've reached the time for a design decision on how to indicate 'none selected' in a data bound ComboBox. I wish to apply this to all future occurrences where a ComboBox needs this. One cannot set SelectedIndex to -1 on data bound combos, nor can one set SelectedValue to null.
Commonly suggested solutions are to add a dummy row to the combo, but without knowledge of the objects bound to rows, a combo cannot reliably create a dummy object in such a way as to display the 'none selected' message. I don't want to add another item on the data source, as this will compromise the list for other clients that don't use a dummy object.
What other options are there? BTW, I'm using a Telerik RadComboBox, but this scenario is not specific to the Telerik control.
You can define the "empty item" in the markup, and append any data-bound items:
<asp:DropDownList DataSourceID="..." AppendDataBoundItems="true" ...>
<asp:ListItem Value="-1" Text="None"></asp:ListItem>
</asp:DropDownList>
The key is to specify AppendDataBoundItems="true" to append the data-bound items to any items that were specified directly in the markup.
This works for the standard ASP.NET DropDownList but also for the Telerik RadComboBox.
Add a new item before you databind and set AppendDataboundItems = true;
cbo.AppendDataboundItems = true;
cbo.Items.add(new ListItem("None", "-1");
cbo.DataSource = x;
cbo.DataBind();
Hope I no property like AppendDataBoundItems in ThickClient (window App)
Better insert dummy row in your datasource table in Zeroth index.
DataRow dr = dtsource.NewRow();
dr["username"] = "--New User---";
dr["Userid"] = 0;
dtsource.Rows.InsertAt ((dr),0);
cmbToUser.DataSource = dtsource;
IMO this is where data binding falls flat on its face. On non-databound controls this is really easy--simply add the dummy item to the combobox before manually adding the other items.
To reliably do this with all types of comboboxes that are databound you'll need to add the item to your dataset--something which violates the separation of presentation and function that databinding is supposed to bring you in the first place.
More often than not, databinding saves you time up until a point. When you start hacking things to overcome the shortcoming of databinding you're not saving time anymore.
My recommendation for this is usually to re-evaluate whether databinding is the right solution.
/Rant over