jquery datatables, asp.net MVC
hello,
I'm using Jquery datatables in one of my Asp.net Mvc project. To allow users to re-order rows, I can use row-reorder extension.
https://datatables.net/extensions/rowreorder/
There is a "row-reorder" event that gets called when a row moves from one position to another. How can I call my controller action method
to update new order in the database table, once user changes the row order. My datatable initialization code is below (sample) -
$(document).ready(function
var table = $('#example')).DataTable({
rowReorder: true,
ajax: {
url: '..../getdata',
type: 'GET',
data: function(data) {
//returns serialized data;
}
}
});
table.on('row-reorder', function (e, diff, edit){
console.log('row reordered')});
});
currently, I'm calling ".../getdata" URL to populate the datatable. can I initialize my datatable such that , i can make a AJAX call when rows are moved?
I'm using Jquery datatables in one of my Asp.net Mvc project. To allow users to re-order rows, I can use row-reorder extension.
https://datatables.net/extensions/rowreorder/
There is a "row-reorder" event that gets called when a row moves from one position to another. How can I call my controller action method
to update new order in the database table, once user changes the row order. My datatable initialization code is below (sample) -
$(document).ready(function
var table = $('#example')).DataTable({
rowReorder: true,
ajax: {
url: '..../getdata',
type: 'GET',
data: function(data) {
//returns serialized data;
}
}
});
table.on('row-reorder', function (e, diff, edit){
console.log('row reordered')});
});
currently, I'm calling ".../getdata" URL to populate the datatable. can I initialize my datatable such that , i can make a AJAX call when rows are moved?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
There is a "row-reorder" event that gets called when a row moves from one position to another. How can I call my controller action methodI think you got resolution of your current post!
to update new order in the database table, once user changes the row order.
For another requirement/question, it is good to create another thread!
I have an issue with a column where i have edit button. when clicked on that button, it triggers the "row-reorder" event instead of firing the edit pop up.Please provide your part of code where you gets issue to get accurate resolution!
ASKER
thanks. I can do that. related to the same question then. say if one of the td, has a anchor tab. which deletes a row. Is there way to find out if this anchor tab was clicked on the 'row-reorder' event and then prevent the default behavior of row-reordering.
<td >
<a onclick="doSomething();">r
</td>
<td >
<a onclick="doSomething();">r
</td>
It is difficult to understand your issue with above part of code!<td > <a onclick="doSomething();">remove</a> </td>
Can you please provide more part of code to check and give resolution?
For another requirement/question, it is good to create another thread!
ASKER
@Prakash, I took care of that anchor tag issue. but here is one more question related to the same original question. so on "row-reorder" even, as you had suggested , i am making a ajax call to update the database. but i am having one more issue, look at my sample code below,
when initializing, i make a ajax call to populate the table. now when i enable row reorder feature and even click on the row (without moving the rows), the row order event gets triggered and update function gets called which is fine but the original function (url : ../getdata) to populate the data is also being called each time.
i'm not sure why along with the update url the get data url is also called everytime.
$(document).ready(function
var table = $('#example')).DataTable({
rowReorder: true,
ajax: {
url: '..../getdata',
type: 'GET',
data: function(data) {
//returns serialized data;
}
}
});
table.on('row-reorder', function (e, diff, edit){
//ajax call to update function
});
when initializing, i make a ajax call to populate the table. now when i enable row reorder feature and even click on the row (without moving the rows), the row order event gets triggered and update function gets called which is fine but the original function (url : ../getdata) to populate the data is also being called each time.
i'm not sure why along with the update url the get data url is also called everytime.
$(document).ready(function
var table = $('#example')).DataTable({
rowReorder: true,
ajax: {
url: '..../getdata',
type: 'GET',
data: function(data) {
//returns serialized data;
}
}
});
table.on('row-reorder', function (e, diff, edit){
//ajax call to update function
});
Have you tried my posted solution ?
ASKER
@ManoJ Patil - yes, that is exactly what i'm doing. I am initializing the datatable and hooking up the row-reorder event and on each row-reorder event, i'm making a ajax call to update the database.
if you look at the sample code in my last comment, i have a ajax call that populates the table when table is initialized. so on each row-order event, two ajax calls are made one to update function (which I specified, so this is ok), but it makes a call to the getData function as well , which is specified during data initialization. I couldn't figure out why it makes the second call as well.
if you look at the sample code in my last comment, i have a ajax call that populates the table when table is initialized. so on each row-order event, two ajax calls are made one to update function (which I specified, so this is ok), but it makes a call to the getData function as well , which is specified during data initialization. I couldn't figure out why it makes the second call as well.
ASKER
i'm not sure if there is an way to disable the "row-reorder" event when button is clicked inside the datatable.