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.
Related
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
I want a view with a table on the site and when you click on a table Item, i want to update a partial view with the current object I just clicked on. How do I manage to do this?
<table>
#foreach (var a in annotations)
{
<tr>
<td>
<label onclick="change stuff to new Annotation">#a.Title</label>
</td>
</tr>
}
</table>
<div id="stuff">#Html.RenderPartial("Go", "new annotation")"</div>
You're mixing client-side and server-side code. By the time the click event occurs, you're on the client and server-side code has run and finished.
You could render the partial view in a hidden div and just unhide it on the click event. Something similar to this, perhaps:
<table>
#foreach (var a in annotations)
{
<tr>
<td>
<label>#a.Title</label>
<div style="display:none;">#Html.RenderPartial("Go", a)</div>
</td>
</tr>
}
</table>
<script type="text/javascript">
$(function () {
$('table tr td label').click(function () {
$(this).closest('td').find('div').show();
});
});
</script>
There may be a more elegant way to find the correct div in the jQuery selectors, you can perhaps add classes and ids to DOM elements as needed to make it cleaner. If you have a lot of these table rows then I'd also recommend using the jQuery .on() function for binding the click event as it would perform better. Something like this:
<script type="text/javascript">
$(function () {
$('body').on('click', 'table tr td label', function () {
$(this).closest('td').find('div').show();
});
});
</script>
This would bind a single click event to the DOM instead of many, with the added bonus that dynamically added rows would still handle the event after the binding takes place.
your getting your client side and server side code mixed up here.
#Html.RenderPartial("Go", a)
is a server side method that returns some HTML.
<label onclick=
Is client side code. So by the time your client gets the data it looks like this:
<label onclick="The text returned from html.render partial">
I think you need to read up on MVC a bit more to achieve what you want as your fundamentally going down the wrong route here.
Iam using ASP.Net MVC3 Razor, I have two listboxes in .cshtml, let's say lbox1 and lbox2. I have binded data in the controller and sent to listboxes using viewbag. Both the listboxes have same data in it like A,B,C,D.But we can select more than one items from the listbox.. Now i want lbox1 selectionmode as single.
How can i restric it to single select ???
I have a controller where i binded the data
public Actionresult Index()
{
ViewBag.lbox1= new SelectList(db.boxes, "ID", "Name");
}
This is my view
<table>
<tr>
<td>
#Html.ListBox("lbox1")
</td>
<td>
#Html.ListBox("lbox2")
</td>
</tr>
</table>
could any one help me
Use a DropDown instead of a ListBox:
#Html.DropDown("lbox1")
I know this sound somewhat off-piste but how would you create a weakly typed view where you pass in a collection of objects and iterate in razor accordingly and display in a table?
-- Controller View --
???
-- Razor View ---
#foreach (var item in Model)
{
<tr>
<td>
#item.attr1
</td>
<td>
#item.attr2
</td>
</tr>
}
Frist you know the data send
From Controller -------> view by two way
By weak type view
and by strong type view
there is no other way of passing data from controller to view ...(remember)
what is intelliscence ----> which show the related sub property of any model
like we write Model. --------> then all property show in
droupdown list after dot(.).
A.what is weak type view
This is used without using model i.e like using ViewBag and other.
There is no intellisence for this type of view and it is complicated, and when you write
any name which not exist then it give at runtime error.
Ex.
.............Controller
ViewBag.List = List<job>;
return View();
.............Razor View
#foreach(var item in ViewBag.List)
{
// when you write no intellisence and you want to write your own correct one...
#item.
}
B. What strongly type view
this is used model to send data from controller to view an vice-versa.
Model are strongly typed to view so, it show intellicence and when you write wrong
then there only error show at compile time..
Ex.
.................Controller
List<job> jobdata =new List<job>();
return View(jobdata);
................view
//Mention here datatype that you want to strongly type using **#model**
#model List<job>
#foreach(var item in Model)
//this **Model** represent the model that passed from controller
// default you not change
{
#item. //then intellisence is come and no need write own ....
}
that is weak and strong type view ......
So now you solve any problem with this basic.....
may I hope it help u....
But it is best to use Strongly Typed view so it become easy
to use and best compare to weak...
#model dynamic
Will do what you want, I believe.
If its going to be a collection, then maybe use
#model ICollection
It's not weakly typed. It's typed to a collection of some kind.
#model IEnumerable<MyClass>
OK, late to the party I know, but what you're after is a view stating "#model dynamic" as already stated.
Working Example: (in mvc3 at time of posting)
NB In my case below, the view is actually being passed a System.Collections.IEnumerable
As it's weakly typed, you will not get intelesense for the items such as #item.Category etc..
#model dynamic
#using (Html.BeginForm())
{
<table class="tableRowHover">
<thead>
<tr>
<th>Row</th>
<th>Category</th>
<th>Description</th>
<th>Sales Price</th>
</tr>
</thead>
#{int counter = 1;}
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
#Html.Raw(counter.ToString())
</td>
<td>
#item.Category
</td>
<td>
#item.Description
</td>
<td>
#item.Price
</td>
</tr>
#{ counter = counter +1;}
</tbody>
}
</table>
}
Edit: removed some css
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();