I having a task in MVC 3 application, where I need to show data in TABLE (TR/TD), by using "Draggable|jQuery UI" and using some blog below code works for draggable, but how to save row order?... "Index.cshtml" has draggable jQuery code, where we can save
order....don't having idea...how...please help...
Model
public class User
{
public int Id { set; get; }
public string Name { get; set; }
public IList<UserInterest> Interests { get; set; }
}
public class UserInterest
{
public int Id { set; get; }
public string InterestText { set; get; }
public bool IsExperienced { set; get; }
}
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
var usr = new User();
usr.Interests = GetUserInterests();
return View(usr);
}
[HttpPost]
public ActionResult Index(User model)
{
//check model.Interests to see what is posted
return View(model);
}
private static List<UserInterest> GetUserInterests()
{
var interestList = new List<UserInterest>();
interestList.Add(new UserInterest { Id = 1, InterestText = "C#" });
interestList.Add(new UserInterest { Id = 2, InterestText = "Java", IsExperienced = true });
return interestList;
}
}
So you'd need each row to have some unique identitfier on it and then send that data to the server:
var ids = [];
$("#yourTable body tr").each(function(){
var row = $(this);
var id = row.attr("data-yourIdAttribute");
ids.push(id);
});
alert(ids);
// now just send ids to the server via $.ajax
ajmaly
Member
12 Points
63 Posts
Draggable/jQuery UI....how to save table row order?
Dec 09, 2012 12:42 PM|LINK
Hi,
I having a task in MVC 3 application, where I need to show data in TABLE (TR/TD), by using "Draggable|jQuery UI" and using some blog below code works for draggable, but how to save row order?... "Index.cshtml" has draggable jQuery code, where we can save order....don't having idea...how...please help...
Model
public class User { public int Id { set; get; } public string Name { get; set; } public IList<UserInterest> Interests { get; set; } } public class UserInterest { public int Id { set; get; } public string InterestText { set; get; } public bool IsExperienced { set; get; } }Controller
public class HomeController : Controller { public ActionResult Index() { var usr = new User(); usr.Interests = GetUserInterests(); return View(usr); } [HttpPost] public ActionResult Index(User model) { //check model.Interests to see what is posted return View(model); } private static List<UserInterest> GetUserInterests() { var interestList = new List<UserInterest>(); interestList.Add(new UserInterest { Id = 1, InterestText = "C#" }); interestList.Add(new UserInterest { Id = 2, InterestText = "Java", IsExperienced = true }); return interestList; } }_layout.cshtml
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("http://code.jquery.com/jquery-1.8.3.js")" type="text/javascript"></script> <script src="@Url.Content("http://code.jquery.com/ui/1.9.2/jquery-ui.js")" type="text/javascript"></script> </head> <body> <div class="page"> <div id="header"> <div id="title"> <h1> My MVC Application</h1> </div> </div> <div id="main"> @RenderBody() </div> <div id="footer"> </div> </div> </body> </html>Home/EditorTemplates/UserInterest.cshtml
@model testApp2.Models.UserInterest <tr style="width: 50%"> <td style="width: 25%"> @Html.HiddenFor(x => x.Id, new { @class = "iHidden" }) @Html.TextBoxFor(x => x.InterestText) </td> <td style="width: 25%">@Html.CheckBoxFor(x => x.IsExperienced) </td> </tr>Index.cshtml
@model testApp2.Models.User @using (Html.BeginForm()) { <div> <table style="width: 50%"> <tr style="width: 50%"> <th style="width: 25%"> Name </th> <th style="width: 25%"> Have Experience? </th> </tr> </table> <table id="container" style="width: 50%"> <tbody> @Html.EditorFor(x => x.Interests) </tbody> </table> </div> <p> <input type="submit" value="Save" /> </p> } <script type="text/javascript" language="javascript"> $(document).ready(function () { //make table rows sortable $('#container tbody').sortable({ start: function (event, ui) { //fix firefox position issue when dragging. if (navigator.userAgent.toLowerCase().match(/firefox/) && ui.helper !== undefined) { ui.helper.css('position', 'absolute').css('margin-top', $(window).scrollTop()); //wire up event that changes the margin whenever the window scrolls. $(window).bind('scroll.sortableplaylist', function () { ui.helper.css('position', 'absolute').css('margin-top', $(window).scrollTop()); }); } }, beforeStop: function (event, ui) { //undo the firefox fix. if (navigator.userAgent.toLowerCase().match(/firefox/) && ui.offset !== undefined) { $(window).unbind('scroll.sortableplaylist'); ui.helper.css('margin-top', 0); } }, helper: function (e, ui) { ui.children().each(function () { $(this).width($(this).width()); }); return ui; }, scroll: true, stop: function (event, ui) { //debugger; //SAVE YOUR SORT ORDER } }).disableSelection(); }); </script>BrockAllen
All-Star
27512 Points
4895 Posts
MVP
Re: Draggable/jQuery UI....how to save table row order?
Dec 09, 2012 02:39 PM|LINK
So you have rows in a table that the user can sort. Where would you like to store the data? Client-side or server-side? For how long?
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
ajmaly
Member
12 Points
63 Posts
Re: Draggable/jQuery UI....how to save table row order?
Dec 09, 2012 05:15 PM|LINK
Yes, it is sorting/order change.
and I would like to sorted data in POST....
I think we can grab sorted in jquery part and then can call controller action, but I don't having idea to pass sorted data to the controller action?
BrockAllen
All-Star
27512 Points
4895 Posts
MVP
Re: Draggable/jQuery UI....how to save table row order?
Dec 09, 2012 05:33 PM|LINK
So you'd need each row to have some unique identitfier on it and then send that data to the server:
var ids = []; $("#yourTable body tr").each(function(){ var row = $(this); var id = row.attr("data-yourIdAttribute"); ids.push(id); }); alert(ids); // now just send ids to the server via $.ajaxDevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
ajmaly
Member
12 Points
63 Posts
Re: Draggable/jQuery UI....how to save table row order?
Dec 10, 2012 02:25 PM|LINK
i do that by other way, but suggestion help me lot....thanx