How to set a column to be sorted on page load dynamically using DataTables.net? - asp.net-mvc

Iam using Asp mvc. I have this table,which is a dataTables,
in my page, columns of the table sometimes appear or not, depending on the users authotrization.
e.g i have this table with checkbox(it appears dynamically and is on the left-most column), that i want to be not sortable.
i also wanted to sort the first column in the left on default.
So whether, checkbox appears or not, i want the first non-check box column to be sortable.
Is this possible?.

I know this question has been here for long, hopefully you got it resolved.
I am not sure I get it clearly, but my advise is that you look at this page for ideas on how you can control sorting using datatables.net:
http://www.datatables.net/release-datatables/examples/advanced_init/sorting_control.html
If you use one of the DataTools you can even control which columns show or give users the opportunity to select the columns they want to see.
Look at the examples here:
http://www.datatables.net/examples/

By this code you can sort individual columns on datatables by adding class 'sort-desc' or 'sort-asc' for sorting ascending and descending on page load
$('.dom-table').each(function(index) {
var sort_column=$('.dom-table thead tr').children().index('.sort-desc');
var sort_oper='desc';
if(sort_column < 0)
{
var sort_column=$('.dom-table thead tr').children().index('.sort-asc');
sort_oper='asc';
if(sort_column < 0)
{
sort_column=0;
}
}
$(this).dataTable({
"sDom": 'T<"clear">lfrtip',
"aaSorting": [[sort_column,sort_oper]],
});
});
I have not tested this code but it should work.

Related

How to define the columns in CRUD grid?

I need to define which columns shall appear and their order in the CRUD grid.
If I use crud.getGrid().setColumns(...) then the edit column does not appear. If I include vaadin-crud-edit-column in the list then I get an exception cause this column does not exist (but I see it there!).
If I remove the un-needed columns (lot of trouble anyway!) I still can't change the column sequence.
Is there some way to sort this out?
For adding edit column to the Grid in Crud there is a helper method Crud.addEditColumn(grid) You can also use this method to add your edit column as a first column or last column depending how you configure the Grid.
private void customGrid() {
Grid<Person> grid = new Grid<>(Person.class);
Crud<Person> crud = new Crud<>(Person.class, grid, createPersonEditor());
PersonDataProvider dataProvider = new PersonDataProvider();
crud.setDataProvider(dataProvider);
grid.setColumns("firstName","lastName");
Crud.addEditColumn(grid);
add(crud);
}

Rails: Return value from another table after a select

I had a question that was marked as a duplicate but it really didn't answer my question, but it did answer another question that I had so that was great :) I think perhaps I did not explain myself correctly so going to try again. Please keep in mind that I am still relatively new to RoR. My previous question can be found here:
Rails: Select on 1 field returns value to another field
So, let me explain what I am trying to achieve again. I have a table called plans and a table called plan_prices. A plan has many plan prices. I have another table called contracts. A contract can have a plan and a plan price, so the contract table has plan_id and plan_price_id. So here is what I am trying to achieve. When I create a contract I have a select for the plan which returns the plan_id. I also have a select on the plan_price that returns the plan_price_id. This first select has some JS on it to determine when it changes so that the plan_price is filtered accordingly. All this is working just fine. The final piece that I want to do is when I select the plan_price there is a column on that table called price. I want to take this price and default it into the contract.price field which can then be changed if the user deems necessary. I am just having a hard time working out how I would default the plan_price.price value into the contract.price field once the plan_price has been selected. The contract.price field is a simple free entry field and not a select field, since the user can change the price to something else.
Hope the above is clear and I hope that there is someone that can help me out on this.
TIA.
Send an Ajax request on the onchange state of the plan_price field:
:onchange=>"selectPrize(this)"
You will be passing the selected value as a param on your AJAX request
JS Function
function selectPrize(prizeID) {
var dataString ='prize='+prizeID.value;
$.ajax({
type: "GET",
url: "/your_controller/your_controller_method",
data: dataString
});
return false;
};
On your controller, in the selected method, look for the plan prize with the id you got through your ajax request.
#plan_prize = Planprize.where("id = #{params[:prize]}").first
Then create a js.erb file in your folder, depending on the method you've chosen in your controller and do some simple javascript to change the value of the contract_prize:
your_method.js.erb file
$(document.getElementById('contract_prize').value = '<%= #plan_prize.prize %>');
This should work.

Nested Datatables Single Row Selection

I have multiple datatables whose are in single selection mode. I know how many datatables I have and how to reference to them because I append an index to their widgetVar attribute. So I can reference them by the "non-safe" operation var dt = eval('dt' + index).
The issue I am facing is every time I select a row in one of the nested dataTables the selection is remaining on the other ones and I want to clean them.
I've tried something like:
<p:ajax event="rowSelect" onstart="deseleccionarTablas()"/>
function deseleccionarTablas()
{
for (i=0; i < dtEstacionesSeleccionadas.getPaginator().cfg.rows; i++)
{
var dt = eval('dt' + i);
dt.unselectAllRows();
}
};
dtEstacionesSeleccionadas is the "container" or "root" table and works in "lazy" mode with paginator, so a variable number of nested dataTables may be shown. The code above doesn't work because it unselects everything, even the last row I selected, as expected. And I want that last one to remain selected.
Any ideas? Thank you.
Instead of using JavaScript, why don't you update them on the server side? Each table should have the selection="#{mrBean.selectedRow}" attribute. You only need to set all of those things to null in the actionListener of the <p:ajax event="rowSelect">. Then, a simple update="table1 table2 ... tablen" will solve you problem.

Creating Drop down list for a column which is defined as an Int in the SQL database - jqGrid ASP.NET MVC

I am using Entity Framework Database First approach in ASP.NET MVC.
I have created models from an existing database and everything works fine.
I am using jqGrid and trying to create a drop down list for a column which is defined as an Int in the database.
In the database, the values are either 0 or 1, so in the dropdown list I will have to show two values such as "Import" or "Export" based on whether it is 0 or 1.
Would I be able to handle this scenario in the jqGrid?
Please post any suggestions if you have!
I think you can handle this thing in colModal itself. there's is one option editOption you can specify with you colModal and based on the value you are getting from data you can specfy the text property of that column
In this case, the data for the grid should contain “One” or “Two” to be set in the column myname.
Now, with this setting
<script>
jQuery("#grid_id").jqGrid({
...
colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ]
...
});
</script>
the data should contain the keys (“1” or “2”), but the value (“One”, or “Two”) will be displayed in the grid.
check this link for further help. You will get your answer. Because you didn't post your code(atleast you should have done that for ur that particular column) i can not say you are implementing the same way.

asp.net MVC - How to do a master/detail page

I wish to create a master/detail page. I see it working one of two ways:
Clicking a row in a grid calls the same page again with the addition of a details panel.
Clicking a row does javascript/JSON call to a controller action that returns details and populates a panel.
I would like the selected row to be highlighted. The selected row could be several pages into a paged grid.
Sounds easy. Unfortunately I'm new to asp.net MVC, and I'm not an experienced programmer. However, I can follow and adapt examples. I would appreciate examples of both the above methods to help me learn MVC.
Thanks in advance.
To answer my own question:
I ended up using PartialViews and jQuery.
Clicking on a select link against a row causes a new row to be added below the selected one (using jQuery). Into this row I use jQuery to GET /PurchaseOrder/Detail (a PartialView).
Here is my Javascript:
function GetDetails(id, enableEdit) {
var detailsRowExists = $().find("#detailsRow").size();
if (detailsRowExists) {
// Delete details row
// Note: need to rename id for row to be deleted
// because jQuery does not wait for the row to be
// deleted before adding the new row.
$("#detailsRow").attr("id", "detailsRowOld");
$("#detail").slideUp("normal", function() {
$("#detailsRowOld").remove();
});
};
// Put new row below selected one
$("tr[id=" + id + "]").after("<tr id='detailsRow'><td colspan='4'><div id='detail'><img src='../../Content/wait20trans.gif' />Loading...</div></td></tr>");
// Pull details into new row
$.get("/PurchaseOrder/Detail/" + id, { enableEdit: enableEdit },
function(data) {
$("#detail").hide();
$("#detail").html(data);
$("#detail").slideDown("normal");
}
);
}
Hopefully this may helps others trying to achieve a master/details page.

Resources