How Can I Add Hyperlink using this Tool, Like View/Edit/Delete ?

[tusharbsale]

Hi, Actually I need to add Action Column which will have View/Edit/Delete functionality. I am not able to add same. I am able to see Action column as I have added Action Property in Model but row wise Hyperlinks are not coming up. Below is code i am trying.

can you please give some suggestion how can i add hyperlink action column?

var table = $('#runningJob').DataTable({ language: { processing: "Loading Data...", zeroRecords: "No matching records found" }, processing: true, serverSide: true, orderCellsTop: true, autoWidth: true, deferRender: true, lengthMenu: [5, 10, 15, 20], dom: '<"row"<"col-sm-12 col-md-6"B><"col-sm-12 col-md-6 text-right"l>><"row"<"col-sm-12"tr>><"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>', buttons: [ { text: 'Export to Excel', className: 'btn btn-sm btn-dark', action: function (e, dt, node, config) { window.location.href = "/RunningJobs/GetExcel"; }, init: function (api, node, config) { $(node).removeClass('dt-button'); } } ], ajax: { type: "POST", url: '/RunningJobs/LoadTable', contentType: "application/json; charset=utf-8", async: true, headers: { "XSRF-TOKEN": document.querySelector('[name="__RequestVerificationToken"]').value }, data: function (data) { let additionalValues = []; additionalValues[0] = "Additional Parameters 1"; additionalValues[1] = "Additional Parameters 2"; data.AdditionalValues = additionalValues;

                return JSON.stringify(data);
            }
        },
        columns: [
            {
                data: "JobNumber",
                name: "eq",

            },
            {
                data: "JobID",
                name: "co"
            },
            {
                data: "Description",
                name: "co"
            },
            {
                data: "DiaryConfig",
                name: "eq"
            },
            {
                data: "Type",
                name: "eq"
            },
            {
                data: "NextRunDate",
                name: "eq"
            }                      
            ,
            {                    
                data: "Action",
                render: function (data, type, full, meta) {
                    return '<a class="btn btn-info" href="/DiaryConfig/EditDiaryEntry/' + full.JobID + '">Edit</a>';
                }
            }
        ]          
    });

[fingers10]

can you share me your root model code that you pass to the jquery-datatables TagHelper? I tried with my demo solution and here is the screen print. It works for me.

[fmir864]

@fingers10 I have the same requirement. Can you please go through how we can add the hyperlinks?

[tusharbsale]

It's working for me now . Action column in Model was missing.

So now working code is

var table = $('#runningJob').DataTable({ language: { processing: "Loading Data...", zeroRecords: "No matching records found" }, processing: true, serverSide: true, orderCellsTop: true, autoWidth: true, deferRender: true, lengthMenu: [5, 10, 15, 20], dom: '<"row"<"col-sm-12 col-md-6"B><"col-sm-12 col-md-6 text-right"l>><"row"<"col-sm-12"tr>><"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>', buttons: [ { text: 'Export to Excel', className: 'btn btn-sm btn-dark', action: function (e, dt, node, config) { window.location.href = "/RunningJobs/GetExcel"; }, init: function (api, node, config) { $(node).removeClass('dt-button'); } } ], ajax: { type: "POST", url: '/RunningJobs/LoadTable', contentType: "application/json; charset=utf-8", async: true, headers: { "XSRF-TOKEN": document.querySelector('[name="__RequestVerificationToken"]').value }, data: function (data) { let additionalValues = []; additionalValues[0] = "Additional Parameters 1"; additionalValues[1] = "Additional Parameters 2"; data.AdditionalValues = additionalValues;

                return JSON.stringify(data);
            }
        },
        columns: [
            {
                data: "JobNumber",
                name: "eq",

            },
            {
                data: "JobID",
                name: "co"
            },
            {
                data: "Description",
                name: "co"
            },
            {
                data: "DiaryConfig",
                name: "eq"
            },
            {
                data: "Type",
                name: "eq"
            },
            {
                data: "NextRunDate",
                //render: function (data, type, row) {
                //    if (data)
                //        return window.moment(data).format("DD/MM/YYYY HH24:MI:SS");
                //    else
                //        return null;
                //},
                name: "gt"
            },
            {
                data: "DiaryID",
                name: "eq",
                visible: false
            }
            ,
            {
                data: null,
                className: "center",
                orderable: false,
                //defaultContent: '<a href="/DiaryConfig/EditDiaryEntry?diaryid=' + full.DiaryID + '" class="editor_edit btn btn-info">Edit</a> <a href="" class="editor_remove btn btn-info">Remove</a>'
                 render: function (data, type, full, meta) {
                     return '<a href="/DiaryConfig/GetData?jobId=' + full.JobID + '">View</a> / <a href="/DiaryConfig/EditJobs?diaryId=' + full.DiaryID + '">Edit</a> / <a href="/DiaryConfig/RemoveDiaryEntry?diaryid=' + full.DiaryID + '">Remove</a>';
               }
            }
            //,
            //{
            //    data: "Action",
            //    name: "eq",
            //    orderable: false,
            //    render: function (data, type, full, meta) {
            //        return '<a class="btn btn-info" href="/DiaryConfig/EditDiaryEntry?diaryid=' + full.DiaryID + '">Edit</a>';
            //    }
            //}
        ]
    });

[fmir864]

For me, its stuck on the Loading Data.. @tusharbsale

[fingers10]

@fmir864 I'll push a working sample to Demo some time later by today or tomorrow. Many developers are asking for this sample. I'll add that.

[fmir864]

@fingers10 Thanks it'll be great.

[fingers10]

@fmir864 Check this. Now added example for CRUD operations