I'm trying to recreate this example using a JSView:
https://embed.plnkr.co/BA9T4Z0QdsZrqkooWTs2/
The data is bound to the table, and then when clicking a row, it binds the row data to the dialog box.
I was trying to follow this example in my own project, but I could not make it work, so I then tried to recreate the example above step by step in a JSView.
https://embed.plnkr.co/jvaQyVgvjNP261lVBFaz/ (ignore the App.view.xml file).
On Line 34 of my controller getBindingContext("userList") is undefined, even though I'm using the correct model name.
This contrasts with Line 31 of the example's controller where getBindingContext("list") returns an object.
What am I doing wrong?
Actually you don't have to change the event, also using itemPress event on the Table is fine. The parameters are just different. To get the selected item and further its context, use:
event.getParameter("listItem"); // returns: pressed list item
instead of
event.getSource(); // returns: source control that fired the event (here: sap.m.Table)
More info on the itemPress event
In the XML example, item press is set on the column list item, in the JS example it's set on the table. getSource() then returns the table instead of the line. You can fix it by changing the press event:
var oTable = new sap.m.Table({
id: "UserTable",
columns: [
new sap.m.Column({
header: new sap.m.Label({
text: "User ID"
})
}),
new sap.m.Column({
header: new sap.m.Label({
text: "Name"
})
})
]
});
var template = new sap.m.ColumnListItem({
type: "Active",
visible: true,
press: [oController.onItemPress, oController],
cells: [
new sap.m.Text({
text: "{userList>Userid}"
}),
new sap.m.Text({
text: "{userList>Name}"
})
]
});
Related
I am adding UIelement by using following code
legendBox = chart[unique].addUIElement(UILayoutBuilders.Column.setBackground( UIBackgrounds.Rectangle ))
.setPosition({ x: 0, y: 100 })
.setOrigin(UIOrigins.LeftTop)
Right now I am able to add series to it by following code
entry = legendBox.addElement(UIElementBuilders.CheckBox);
series.attach(entry);
Instead , can I add the button with some value ? On clicking of that button I need call an function with that value.
For example if I add button with value
<button val="22">Click<button>
Now when i click that button , I need a callback function returning 22.Is it possible ?
In your case, the entry variable is of type UICheckBox.
To apply a custom action when clicking it, the onSwitch method should do it.
series.attach(entry); is only required if you want the button to hide/restore the series, you can remove this code if you want that only your custom action is triggered.
entry = legendBox.addElement(UIElementBuilders.CheckBox)
entry.onSwitch((_, checked) => {
console.log('clicked', checked)
})
See also UIElementBuilders.ButtonBox if you want to add automatic bounce-back.
entry = legendBox.addElement(UIElementBuilders.ButtonBox)
entry.onSwitch((_, checked) => {
if (checked) {
console.log('button pressed')
}
})
I’m using Kendo UI v2016.3.1118 for my web application.
I use the editing capabilities (mode: “incell”) in the Kendo UI grid. I have created a grid with editing textbox, date, and numeric values and it works fine.
What I want to do now is to apply editing for columns with dropdown values.
I’ve integrated a custom dropdownprovider like described in Telerik sample (https://demos.telerik.com/kendo-ui/grid/editing-custom, demo: https://dojo.telerik.com/UjAGU).
That works so far quite well. However, after I change a value in the DropDown and the cell loses focus, the display switches back to the view mode. It only appears a little red indicator in the upper left of the cell, indicating the value has been changed (cell is “dirty”). Except of the red indicator the cell is empty (no value is shown in cell).
In my case I’ve only numeric (foreign key) values for the columns of type dropdown foreign in my datasource.
My datasource looks similar to this:
{
Product ID: 1,
ProductName: "Chai",
Category: 1
}
Datasource in sample provided by Telerik:
{
Product ID: 1,
ProductName: "Chai",
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, berries, and ales"
}
}
I've tried to set the cell value to the selected text in the Select-Event of the dropdown. Nevertheless there is still no text shown for the dropdown in view-mode. Unfortunately, I cannot find a suitable event. The event closeCell is never thrown in my constellation.
Any ideas out there?
Regards
Stefan
I think your issue probably stems from the difference between what is returned by your dropDownList when you make a selection (i.e. an entire object, complete with text and value), and what your grid model object requires (just the value).
Assuming you have a function to create the editor like the one in the sample you referenced, can you please try altering it to set the valuePrimitive property to true?
function categoryDropDownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
valuePrimitive: true,
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
});
}
According to the documentation:
If set to true, the View-Model field will be updated with the selected item value field. If set to false, the View-Model field will be updated with the selected item.
Hopefully that will resolve your issue.
I am using dojo EnhancedGrid to display some data and handling "onRowClick" event to allow the user to click on a row in the grid to view more details about this row like below.
dojo.connect(grid, "onRowClick", grid, dojo.partial(displayDetailsForSelectedElement, type) );
Now, I want to allow the user to delete an item from the grid by providing a delete button in separate column for each of the row in the grid. The code for the button is provided below.
function buttonFormatterRemove(col, rowIndex){
var w = new dijit.form.Button({
label: "Delete", //label: '<img src="images/del.png" />',
iconClass: "dijitIconDelete", //"dijitEditorIcon dijitIconCut",
showLabel: false,
onClick: function() {
console.log(this);
//if (confirm("Are you sure you want to delete the assertion?")){
alert("Do I come here for delete...");
//var item = grid.selection.getSelected();
//var work_id = grid.store.getValue(item[0], "work_id");
var item = this.grid.getItem(rowIndex);
var id = item['id'];
alert("delete row with id = " + id);
//Send POST request to delete
require(["dojo/request"], function(request){
request.del(contextPath + "/rest/items/" + id)
.then(function(text){
console.log("The server returned: ", text);
});
});
//}
}//function
});
w._destroyOnRemove=true;
return w;
}
The issue I am having is that when I click on the delete button for a row, though it does come inside onClick(), the code after alert("Do I come here for delete..."); doesn't get invoked. After, it executed first alert(), it calls displayDetailsForSelectedElement() to handle 'onRowClick'.
I am not sure if this issue is due to the fact that 2 events are fired when I click on delete button and if there is a solution to fix this? Any help and advice would be much appreciated.
You may call dojo.stopEvent(e) firstly to stop the event propagation in your delete method.
I'm having a question about knockout binding to a select list. the problem is if we attached a click binding to a control, the event will be executed whenever the control is clicked. but why this select change event is firing while the control is loading to the DOM. I'm using knockout for last three week. this is the fiddle for that.
http://jsfiddle.net/aroor/dUvRx/4/
<select data-bind='options :list, optionsText: "name", value:selectedItem , event : { change : onSelectChange }'></select>
var model = function(){
var self = this;
self.name = ko.observable();
self.key = ko.observable();
self.visible = ko.observable();
self.selectedItem = ko.observable();
self.onSelectChange = function(data,event){
var currentSelection = self.selectedItem();
if(currentSelection.visible )
{
// display the content according to the selection
}
}
};
ko.applyBindings(new model());
please help me to sort this problem.
I don't want to use the optionsCaption to select the default item. because the collection is coming from a ajax call.
Your onSelectChange method is based off of the values of the select box. Thus, when the value changes as a result of the data binding (such as when the items are first added to the list), it is correct for this event to fire.
Instead of basing your change event off of the select box, it might be better to base your change event off of the data-bound properties.
First, you could change your list to be an observable array.
list = ko.observableArray([{ name : "test-01", key : 1, visible: true},
{ name : "test-02", key : 2 , visible: false},
{ name : "test-03", key : 3 , visible: false},
{ name : "test-04", key : 4 , visible: true}
]);
selectedItem = ko.observable();
In your markup:
<select data-bind='options :list, optionsText: "name", value:selectedItem'></select>
Now, whenever you want to determine if the item has changed, you can use the ko.subscribe function.
selectedItem.subscribe(function(newValue) { /* Do stuff when the value changes here */ });
How can a select a Row of a WEBGRID after binding it so that row
will get highlighted(by mouse click on any row or cell of any row without the
use of check-box or option button as column)
1.)After selecting any row can I get the data value for that row?
2.) Can I move selection up and down by keyboard (up and down keyboard
button)?
3.) And after changing the index of selecting row(by mouse or by keyboard
up-down button) is rowselectedindexchaged or rowselectingindexchanging event
can be fired/handled
Thank you
There's a lot to this question, and there are lots of ways to implement it. Here's a rough sketch of how you could do this. I'm going to assume you're using JQuery as that will make this a lot easier.
To highlight a row or cell on click, attach click events to each:
$("tr").click(function() { $(this).css('background', 'yellow'); });
$("td").click(function() { $(this).css('background', 'lightblue'); });
Of course, you'll also need to un-highlight them, but we'll come to that in a moment.
To get data for a row (I assume you mean on the server, not the client), you'll have to do an AJAX call. It will be easiest to get the id of the row rather than passing the whole row back. Something like this inside the click events:
var row_id = $(this).closest("tr").find("input[type=hidden]").attr("value");
$.get("?row_id=" + row_id);
This assumes that you have added a hidden input to each row in your Webgrid with its row ID value.
In case you need to access the selected first row cell you can use this inside the click function:
var cellOne = this.cells[0].innerHTML ;
I also recommend that your click function should only be linked to a certain table (otherwise the selection will be enabled on all tr elements) and use a css class that is added and removed when selection changes.
$('#MainTable tr').click(function () {
$(this).addClass('select');
$('#MainTable tr').not(this).removeClass('select');
});
To move up and down, you can add a "keyup" event listener to the window and handle up/down. See here for more details: jQuery kepress detection on left, right arrows and space bar. You'll have to use Javascript to keep track of which row is currently selected so as to highlight/unhighlight as needed.
Finally, for the last question, you can trigger an AJAX call (or Javascript call) when the user clicks or arrow-keys to a different row. You'll already be keeping track of which row number has been selected, so you can just send that along with the event:
$.get("?event=row_selection_changed&row_id=" + row_id);
You can try this code:
<div id="AjaxWebGrid">
#grid.GetHtml(
htmlAttributes: new { id = "MainTable" },
tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column("SendedInDateTime", "SendDate", null, style: "SendDateTimeStyle"),
grid.Column("", header:"حذف", format:
#<text>
#Ajax.ActionLink("Delete", "Delete",
new { id = "", DelID = item.Id }, new AjaxOptions { UpdateTargetId = "AjaxWebGrid" },
new { #class = "button" })
</text>)
));
</div>
<script>
$(document).ready(function () {
$('#MainTable tr').click(function () {
$(this).addClass('select');
$('#MainTable tr').not(this).removeClass('select');
});
});
</script>
#grid.GetHtml(htmlAttributes: new { id="MainTable" }, .....);
<script type="text/javascript">
$(function ()
{
var tr = $('#MainTable').find('tr');
tr.bind('click', function (event)
{
$("tr").click(function () { $(this).css('background', 'yellow'); });
});
});
</script>