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.
Related
I'm using the standard Oracle APEX Interactive grid. When I click the button to add a new row, it adds the row to the bottom of the list. Which is not convenient. If I select a record first, then click add row, it adds the new row below the selected record.
How do I change the functionality so that adding a row adds the row to the top of the grid?
You're not mentioning the apex version you use. It shouldn't make a difference, but for the record, I prepared my solution in apex 20.2.
The "Add row" button that you click is originally associated with grid action called "selection-add-row". You can check that by inspecting button element with your browser's developer tools - it should has a data-action attribute set to "selection-add-row".
Actions with context of particular Interactive Grid can be modified via javascript - either during runtime (as for eg. dynamic action) or during Interactive Grid initialization (by using JavaScript Initialization Code property in Advanced section of IG attributes).
You have at least two ways to achieve your goal. The first is to change behavior of "selection-add-row" action. I suggest to use following code as Javascript Initialization code:
function(config) {
config.initActions = function( actions ) {
actions.remove('selection-add-row');
actions.add({
name: "selection-add-row",
label: "Add row",
iconBeforeLabel: "true",
action: function(event, focusElement) {
let model = $(actions.context).interactiveGrid('getCurrentView').model;
model.insertNewRecord();
}
});
}
return config;}
It removes the action and adds the new one with the same name. New action adds new row on top of grid instead of adding below selected row. The drawback here is that you're loosing original apex action - but no harm done if you're not panning to use it anyway.
The second solution would be to not remove the original action and create new action that does the same but with different name. In this case you need to somehow change the data-action attribute of "Add row" button to the name of new action (or remove the button completely, and create your own).
More info about actions and whole IG customization: https://docs.oracle.com/en/database/oracle/application-express/20.2/aexjs/interactiveGrid.html
I am using Kendo ListBox in my application where it has the two data list namely as 'fromData' and 'toData', also it has four in built button controls as tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"].
when we click on any of the button, the data rendering on the front end acts accordingly. My requirement is - I have added another check box on the page and whenever the checkbox is checked by the user I want the transferAllTo to act and all the data should be transferred from 1st list to 2nd list without clicking on the tool button. It should work only with the selection of check box.
I can see there is a method called OnRemove() which is acting when I am clicking the button from front end, so I created a method to be called on Onclick event of Checkbox and Inside that I called the OnRemove() method but it did not work.
$('#' + clientId).find('#' + fromEntitySelect).kendoListBox({
draggable: true,
dataSource: fromDataSource,
connectWith: "toEntitySelect",
dropSources: ["toEntitySelect"],
dataTextField: "Entity",
dataValueField: "EntityID",
toolbar: {
tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
},
change: onChange,
drop: onDrop,
drag: onDrag,
dragend: onDragEnd,
remove: onRemove,
});
My requirement is - I have added another check box on the page and whenever the checkbox is checked by the user I want the transferAllTo to act and all the data should be transferred from 1st list to 2nd list without clicking on the tool button. It should work only with the selection of check box.
You can simple let jQuery click the button "transferAllTo".
As an example, go to https://demos.telerik.com/kendo-ui/listbox/index and execute $("a[data-command='transferAllTo']").click() in the browser's JavaScript console.
http://demos.telerik.com/aspnet-mvc/grid/editing-custom
Hope this is clear.
I have a view that includes a grid with an existing application. The grid needs to load only after selecting some other inputs in the view. Using one of the "template" approaches like the above example works if you know what the list will contain ahead of time. The grid databinds when the view is rendered, and any ClientTemplate is rendered then. So, rebinding the grid doesnt seem to affect the dropdownlist since it has already been rendered.
However, the contents of the dropdownlist cant be known until the user starts adding items to the grid, so its only then that I to need define whats going to be in the dropdownlist, not from the very beginning when the grid is initially displayed.
How do I define or populate the dropdownlist when the grid is binding or as a result of the read action?
[update]
This is the grid column in question, where now Ive setup the column to have its own datasource, but the action GetSystemItemCodes never gets invoked. There is a read action on the grid itself (not shown), but since the template has already rendered when the grid is displayed the first time, it doesnt matter what I do to update the viewdata, its already been rendered.
columns.Bound(rdetail => rdetail.ItemCode).Title("Item Code").ClientTemplate((#Html.Kendo().DropDownList()
.DataSource(datasrc => datasrc.Read(read => read.Action("GetSystemItemCodes", "SalesVoucher")))
.HtmlAttributes(new { id = "itemCodeDropDown" })
.OptionLabel("- Select Item Code - ")
.DataValueField("ItemCodeID")
.DataTextField("ItemCodeValue")
.Name("itemCodeDropDown")
.Events(e => e.Change("OnItemCodeChange"))
.ToClientTemplate()).ToHtmlString()).Width(230);
I think my next approach will be to filter the dropdown with items being returned when adding a new row.
So suppose my question is at this point is: when defining a datasource for an individual column this way, when does its read action get called? Right after the read action on the grid ? How manually cause the column datasource to refresh or rebind?
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.
My question is somewhat related to this answer - https://stackoverflow.com/a/3458299/1635958.
I am working on Asp.Net MVC 3.0.
I have Page1 where I have many controls. When I click on a Button1, I want the ability to make a list of json objects (lets say List personList ) and send that list to a Controller action. I want the view to be opened as a dialog.
So I am trying something like
var $dialog = $('<div></div>')
.load("http://localhost:XXXX/Controler1/Action1")
.dialog({
autoOpen: false,
title: "SomeTitle",
width: 500,
height: 300
});
$dialog
.data("personList", personList)
.dialog('open');
Once I do this, I want the ability to deserialize this data at the controller's side and pass it to a view. Is this doable through this approach? Is there a better approach?
Edit
Requirement is something like this ->
1. Page1 will display a grid of book details.
2. There is an Action column for each row, which is a checkbox
3. User can select the rows he is interested in, and click on a button outside the grid for a specific Action.
4. I should be able to collate data about all the books selected, and pass that data onto a jQuery dialog that gets opened.
5. The jQuery dialog should display the collated data to the user and present him with the ability to take some extra actions.
Edit 2
What is the best practice to have modal dialogs in MVC?
I have a view which shows a grid of items. I want to provide the ability of selecting a subset of the rows, clicking a button, and opening a modal dialog with the selected rows for editing the selected rows and doing more actions. What is the best practice to get this done in MVC? When we click the button, if we call a controller, what is the recommended way to pass data to that controller?
I did it this way ->
I created a json object from the first page. Posted it to the controller as an ajax call. The controller renders a view as a result. I capture the response and display it as a jquery UI dialog. Worked for me.