I have a dynamically filled DropDown list which is initialized after grid cell click.
Problem is, that after select any value is always displayed in datagrid only ID of selected number but not text value.
See image>
After select the value
I need to store selected id of item for update request (this works fine) and in datagrid set selected text value.
How can i do it?
Here is the code:
// COLUMNS
{
field :"worker",
title : "Worker",
// bind function for populate custom dropdown list
editor: orderWorkerDropDownEditor,
template: "#=worker#",
width:150
},
// DROPDOWN
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
animation: false,
autoBind: true,
dataTextField: "wname",
dataValueField: "wid",
dataSource: [
{ wid: 1, wname: "Worker" },
{ wid: 2, wname: "Manager" },
{ wid: 3, wname: "Admin" }
]
});
Thanks for any help.
Related
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}"
})
]
});
A select element is generated using the following code in an MVC4 view
#Html.DropDownList(
"abPrintYearsMode",
new List<SelectListItem>{
new SelectListItem { Text = "Lifetime", Value = "1" },
new SelectListItem { Text = "Manual", Value = "2" }
},
new { #class = "required" }
)
which renders the following HTML
<select class="required" id="abPrintYearsMode" name="abPrintYearsMode">
<option value="1">Lifetime</option>
<option value="2">Manual</option>
</select>
How do I get the select element to retain the value selected by the user on a postback? Currently, the topmost option "Lifetime" is always selected after a postback even when the user select "Manual" option #2.
try
#Html.DropDownListFor( x => x.abPrintYearsMode,
new List<SelectListItem>{
new SelectListItem { Text = "Lifetime", Value = "1" },
new SelectListItem { Text = "Manual", Value = "2" }
},
new { #class = "required", id= "abPrintYearsMode"}
)
Have you tried setting autopostback property to true?
Dropdown Box has the property autopostback whcih if set to true fires an event. So when ever user selects a different value in the combo box, an event will be fired in the server. i.e. a request will be send to the server
Reference
You need a property on the model that is used by the view that will contain the selected value of the dropdown. It appears in your case this property needs to be:
public int abPrintYearsMode { get; set; }
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>
I am using the jqGrid for ASP.NET MVC, and have a grid with a subgrid. In that subgrid, I have added a button to the toolbar like so:
ToolBarSettings = new ToolBarSettings()
{
ShowRefreshButton = true,
CustomButtons = new List<JQGridToolBarButton>()
{
new JQGridToolBarButton()
{
Text = "Custom",
Position = ToolBarButtonPosition.Last,
OnClick="CustomClick" }
}
},
etc...
}
The CustomClick is a javascript callback, and it fires without any problems, but I am having trouble getting the parent grid row id in the CustomClick callback.
How can I get the parent row id in the CustomClick function?
Thanks, Dennis
The child Grid id itself contains the parentKey. when ever a child grid is created the id of the child grid is ParentGridName_ParentKey_ChildGridName. So you can get the Parent key
Below is the code for custom button :
<CustomButtons>
<Trirand:JQGridToolBarButton ToolTip="Custom button" OnClick="GetParentKey" />
</CustomButtons>
Then inside GetParentKey function you can get the parentKeyID as follows :
function GetParentKey()
{
var GridId = this.id.toString().split('_');
var parentKey = GridId[1];
}
Inside of CustomClick function you has as this the DOM element of the table from which navigator the custom button are clicked. There are no "parent row", but you can get the id of the currently selected row (if any exist) per
var rowid = $(this).jqGrid('getGridParam', 'selrow');
see example from the following answer oder search for another examples to the navButtonAdd method.