Click here to Skip to main content
15,891,529 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi
Now i am screwed i have to change my entire functionality of datatable .

Now what i need is i need to have a edit link as a column on every row of data-table . when i click on edit the columns should turn to respective controls i.e text-boxes,drop-downs .

This is my code where i previously dealt with cell wise editing/updating .

CODE:

JavaScript
 $(document).ready(function () {

        var tab = $('#myDataTable').dataTable({
            
                    "oTableTools":
                    {
                        "sSwfPath": "../../Content/copy_cvs_xls_pdf.swf"
                    },
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": 'DataProvider',
            "bJQueryUI": true,
            "sDom": '<"H"TCfr>t<"F"ip>',
            "oTableTools": {
                "aButtons": [
                    {
                        "sExtends": "copy_to_div",
                        "sButtonText": "Copy to div",
                        "sDiv": "copy",
                    }
                ]
            },

            "aoColumns": [
                         {
                             "sName": "ID"
                             , "bVisible" : false
                            
                         },
                         { "sName": "COMPANY_NAME",  "sClass": "hidden-xs" ,
                          "fnRender": function(oObj)
                             {  return '<a href=\"Home/Details/' + oObj.aData[0] + '\">' + oObj.aData[1] + '</a>'; 
                             }
                         },
                         { "sName": "ADDRESS" },
                         { "sName": "TOWN" }   //this will be drop-down assume             ]   
        });
      
//This will be useful no more i guess :( sad 
        tab.makeEditable({
            "aoColumns": [
 
                null,
                null,
                {
                indicator: 'Saving...',
                tooltip: 'Click to select town',
                loadtext: 'loading...',
                type: 'select',
                onblur: 'submit',
                loadurl: 'AjaxDataProvider1'

            }]
        });
    });

</script>


PS: Once column edited data Reached controller means i can do everything . I am trying from 4-5 hours continuously still i have no clue :(
Simply above 3 columns(text,text,dropdown) + one edit link column .. ..

Here are the links i tried please once look at this and share you ideas :
https://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html[^]

http://datatables.net/media/blog/inline-editing/complete.html[^]

Regards
Posted
Updated 16-Sep-16 1:33am

this is solution.


View

@{
ViewBag.Title = "Index";
}

@{
string EditButton = "Edit";

}

Part 1 : Implement jQuery Datatable in ASP.NET MVC


@**@



Employee Name
Company
EditCity
Postal Code




tr.even {
background-color: #F5F5F5 !important;
}

@* Load datatable css *@

@* Load datatable js *@
@section Scripts{


$(document).ready(function () {
var oTable = $('#myTable').dataTable({
"ajax": {
"url": "/home/loaddata",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Name", "orderable": true },
{ "data": "Company", "orderable": true },

{
"data": null,
"orderable": false,
defaultContent: "@Html.Raw(EditButton)"
}

],
"fnRowCallback": function (nRow, aoData) {
debugger;
$(nRow).attr("data-id", aoData["EmpId"]);
$(nRow).addClass("selectable")
return nRow;
}
});

$("#applyBtn").on("click", function () {
oTable.fnDraw();
});

$("#myTable tbody").delegate("tr", "dblclick", function () {
var ETId = $(this).attr("data-id");
if (ETId != undefined) {

$(this).toggleClass('selected');
var dLink = '@Url.Action("Manage", "EmailTemplate", new { Id = "_DATAID_" })';
dLink = dLink.replace("_DATAID_", ETId);
window.location = dLink;
}
else {
return false;
}
});

});

function btnEditClientDocumentClick(event) {

$(event.target).closest("tr").removeClass("ui-selected");
var ETId = $(event.target.parentElement.parentElement).attr('data-id');
var dLink = '@Url.Action("Manage", "Home", new { Id = "_DATAID_" })';
dLink = dLink.replace("_DATAID_", ETId);
window.location = dLink;
}

}


public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
return View();
}

//Write action for return database data

public class Employee
{
public string Name { get; set; }
public string Company { get; set; }
public Guid EmpId { get; set; }
public Employee(string name ,string cmp ,Guid empid)
{
Name = name;
Company = cmp;
EmpId = empid;
}

}
public ActionResult loaddata()
{

List emplist = new List();
emplist.Add(new Employee("Ronak", "xyz",Guid.NewGuid()));
emplist.Add(new Employee("Ashish", "xyz1", Guid.NewGuid()));
emplist.Add(new Employee("Vraj", "xyz2", Guid.NewGuid()));
emplist.Add(new Employee("Mukesh", "xyz3", Guid.NewGuid()));
//var data = dc.Customers.OrderBy(a => a.ContactName).ToList();
var data = emplist.ToList();
return Json(new { data = data }, JsonRequestBehavior.AllowGet);

}

}
 
Share this answer
 
Comments
Richard Deeming 16-Sep-16 11:02am    
This question was asked, answered and solved over 2 ½ years ago.

Your "solution" doesn't even attempt to answer the question.
You should implement a Keytable..

Below is an example.


https://editor.datatables.net/tutorials/keytable[^]
 
Share this answer
 
Comments
sunil gutta 22-Apr-14 15:32pm    
mate i need something like old fashioned asp.net data gridview where we click edit means we should get textbox , dropdown respectively . Not a pop as functionality in above mentioned link . Columns should term to controls to edit
Guruprasad.K.Basavaraju 22-Apr-14 15:35pm    
http://www.jeasyui.com/tutorial/datagrid/datagrid12.php
sunil gutta 22-Apr-14 15:44pm    
ok datagrid :) but , i am trying to change just the functionality of editing @datatable . using datatable is my prime motive . whatever i do i have to abide by my requirements and do on it . you can understand i guess by serious trouble i am causing you with some typical questions :( sorry . complex options on my datatable it will be much deeper when i go in depth .
Guruprasad.K.Basavaraju 22-Apr-14 15:45pm    
You will need to modify the datatable scripts Sunil, I am not sure which methods but its possible with some good amount of effort.
sunil gutta 22-Apr-14 16:03pm    
ok mate i will keep my efforts and i hope :) Ty for your time . just incase you came across something like this means comment here and by the way i seen you 3d box which is super cool by that i came to conclusion you may be UI expert . Here my small css dropdown question : http://www.codeproject.com/Questions/763485/dropdown-list-creative-css . ty . please try it when you feel free .

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900