How to handle row selected changed event for a table using Blazor?
I tried handling #onchange as well as #onselectionchange.
The syntax for the table looks like this:
<table class="table" #onchange="#this.SelectionChanged">
Your event binding doesn't work because the table element does not emit change events.
Instead, you could add an input element (for example a checkbox) inside your table rows. You can then handle row selection changes by adding your event binding to the input elements.
Read more on the HTMLElement change event in this article.
You can use Onclick in the row:
<tbody>
#foreach (var item in Forecasts)
{
<tr class="#item.Clase" #onclick="#(() => DoSomething(item))">
<td>#item.Date</td>
<td>#item.TemperatureC</td>
<td>#item.TemperatureF</td>
<td>#item.Summary</td>
</tr>
}
</tbody>
and create a Dosomething to receive the item
Related
I'm using Knockout for data binding and using dataTable+YADCF for Sorting and filtering. My scenario is little complex, on clicking the Category nodes (left side) each time need to make an AJAX call and refresh the table data (right side) through Knockout. This Knockout binding functionality works fine without any issue.
HTML Code
<table class="pdm-data-table pdmList" id="ListCatAttrVal" data-link="row">
<thead>
<tr>
<th>Display Name</th>
<th>Display Source</th>
</tr>
</thead>
<tbody id="listAttribute" data-bind="foreach: attributevalue">
<tr>
<td data-bind="text: dispName"></td>
<td data-bind="text: dispSrc"></td>
</tr>
</table>
Knockout Model Code
if (!ko.dataFor(document.getElementById("listAttribute"))) {
var attributeModel = function () {
this.attributevalue = ko.observableArray();
};
attributeBinding = new attributeModel();
ko.applyBindings(attributeBinding, document.getElementById("listAttribute"));
}
Issue is after applying DataTable for the Table
$("#ListCatAttrVal").dataTable().fnClearTable();
for (var x in response.attributes) {
attributeBinding.attributevalue.push(response.attributes[x]);
}
$("#ListCatAttrVal").dataTable();
After this, Datatable Sorting is not working.
I'm trying to remove the existing generated dataTable and re-initiate it every-time when I click on the category node. But it is not working as expected.
I had a similar issue while working with knockout and datatables - my bindings inside the datatable don't seem to work initially. As a workaround I ended up initialising the datatable in the following way:
var table = $("#ListCatAttrVal").dataTable();
table.fnPageChange(0, true);
After calling fnPageChange (or any other function of datatable library, I believe) bindings seem to be working.
After seeing my question/answer on this topic, finally I decide to put this question,
from Controller side, I am returning a Data Table with dynamic number of columns (not fix at design time, it will give columns at run time).
want to bind that Data Table to jquery grid.
Please suggest and help....
I check this solution, but how to do with MVC?
Is it possible to modify the colModel after data has loaded with jqgrid?
Check this if this will solve your problem. This might be slow but it will work.
#foreach (System.Data.DataRow row in Model.Table.Rows)
{
<tr>
#foreach (System.Data.DataColumn col in Model.Table.Columns)
{
<td>
#Model.Table.Rows[row.Table.Rows.IndexOf(row)][col.ColumnName].ToString()
</td>
}
</tr>
}
I am trying to generate a table like this
#foreach (var item in #Model.Where(o => o.Status == "Submitted")){
<tr class="row" data_orderid="#item.Id">
<td class="description">
#item.Customer
</td>
<td class="description">
#item.OrderDescription
</td>
...etc...etc
so that I can handle the click event of each tr, and display some info based on the data-orderid attribute value of the tr that was clicked.
In Visual Studio I get a validation message saying "data_orderid is not a valid attribute of tr" and when it renders the HTML tr has no attributes, Not event the class.
How should I be adding attributes like this?
The format of HTML 5 data attribute is like this
data-AttributeName=AttributeValue
Example :
data-name="John Resig"
Change underscore to a hiphen and it will be rendered correctly.
<tr class="row" data-orderid="#item.Id">
First of all it is more likely that you should be using "data-xxx" (rather than "data_xxx") attributes.
Secondly, It is unlikely (if not imposible) for visual studio to omit class and your "data_orderid" attributes.
Make sure that for loop gets any elements from your condition #Model.Where(o => o.Status == "Submitted"
Additionally, as a note, Razor is smart enough to interpret 'html attributes' passed to elements, like here:
#Html.TextBoxFor(m => m.Name, new { #data_orderid = item.id, #class="input-xxlarge" }))
All -
I'm using stripes to do some form input for a problem I'm working on and I'm stuck on how best to submit a a pair of data using stripes and checkboxes.. for example my page looks like the following:
I have a list of options where users can enable a selection by clicking the box, and also supply some input for that item by entering data into the text field next to it:
<tr>
<td><stripes:checkbox name="item.enable" value="${item.id}"/></td>
<td><stripes:text name="item.value" value="${item.value}"/></td>
</tr>
.....
next item...
When the form is submitted I'd expect my Collection<Item> to be populated yet that's not the case..
How can I best submit a pair of items using the check box fields.
Thanks in advance.
..Chris
Read the documentation on indexed properties. You need to tell Stripes that you have multiple items, by naming them items[0], items[1], etc.:
<tr>
<td><stripes:checkbox name="items[0].enable" value="${item.id}"/></td>
<td><stripes:text name="items[0].value" value="${item.value}"/></td>
</tr>
<tr>
<td><stripes:checkbox name="items[1].enable" value="${item.id}"/></td>
<td><stripes:text name="items[1].value" value="${item.value}"/></td>
</tr>
This supposes that you action bean has a setItems(List<Item> items) method, that the Item class has a public no-arg constructor, and has a setEnable(String itemId) and a setValue(String value) method.
I would wrap this in a JSTL 'forEach' tag and I would put the items in a List. Similar to what JB Nizet said, you also need public setters in the action bean. If you are using Collection<Item> with some implementation other than List<Item> the below snippet won't work.
<c:forEach var='itemIndex' begin='0' end='2'>
<c:set scope='page' var='item' value='${items[itemIndex]}'>
<tr>
<td><stripes:checkbox name="items[${itemIndex}].enable" value="${item.id}"/></td>
<td><stripes:text name="items[${itemIndex}].value" value="${item.value}"/></td>
</tr>
</c:forEach>
There is another case when you don't want the list to default to 3 items. The one I'm thinking of is when the list is already populated. If that is the case I would change the 'end' attribute of the <c:forEach> to be: ${fn:length(actionBean.items) == 0 ? 3 : fn:length(actionBean.items)-1}
I'm having an issue with a DataGrid not resorting itself after calling newItem() then save() on the store backing the datagrid.
<div dojoType="dojo.data.ItemFileWriteStore" url="/MultiRaterManagerAjax" id="mrWriteStore" jsId="mrWriteStore"</div>
<table dojoType="dojox.grid.DataGrid" region="left" query="{ hasSub: false }"
clientSort="true" selectionMode="single" jsId="ldrSubGrid" sortInfo="1"
errorMessage="Loading..." store="mrWriteStore">
<thead>
<tr>
<th width="100%" field="_item" formatter="formatSubs">Subs</th>
</tr>
</thead>
</table>
An event handler calls the following javascript
item = mrWriteStore.newItem({});
//set the necessary attributes on item
mrWriteStore.save({onComplete:afterStoreUpdate, onError: saveFailed});
A new item is added to the store, and the DataGrid is updated showing the new item. But the new item is at the bottom of the list. It doesn't seem to recognize the sorting order of the datagrid.
I'm thinking there is an event I need to connect to (or subscribe to) on the datagrid which tells me it has updated the data. Then I call sort/filter functions when this event is fired. But what to connect/subscribe to?
I was struggling with this the other day. I think you need to call the sort() method of the datagrid from inside of your onComplete function, which you have named afterStoreUpdate
dijit.byId('ldrSubGrid').sort();