fnRender giving issue in datatable ? mvc4

Question

0.00/5 (No votes)

See more:

well the below mentioned code works good but when i am trying using fnRender just to make it hyperlink and its throwing me **CELL CANNOT BE UPDATED (SERVER ERROR)** while editing .

My code :

JavaScript

<script  type="text/javascript">

    $(document).ready(function () {

        $.datepicker.regional[""].dateFormat = 'dd/mm/yy';
        $.datepicker.setDefaults($.datepicker.regional['']);

        var tab=  $('#myDataTable').dataTable({
           
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": 'AjaxDataProvider',
            "bJQueryUI": true,
            "aoColumns": [
                         {
                             "sName": "ID",
                             "bSearchable": false,
                             "bSortable": false ,
                             "fnRender": function (oObj) {
                                 return '<a href=\"Home/Details/' + oObj.aData[0] + '\">View</a>';
                             }
                         },
                         { "sName": "COMPANY_NAME" },
                         { "sName": "ADDRESS" },
                         { "sName": "TOWN" }
            ]

        });
        
        tab.columnFilter({
            sPlaceHolder: "head:after",
            aoColumns: [
                {
                    type: "date-range",
                    bRegex: true,
                    bSmart: true
                },
                {
                    type: "number-range"
                },
                { type: "text" },

                { type: "text" }
                
            ]
        });

        tab.makeEditable({
            "aoColumns": [
                null,
                null,
                null,
                {
                indicator: 'Saving...',
                tooltip: 'Click to select town',
                loadtext: 'loading...',
                type: 'select',
                onblur: 'submit',
                loadurl: 'AjaxDataProvider1'
                //data: "{'London':'London','Liverpool':'Liverpool','Portsmouth':'Portsmouth','Edinburgh':'Edinburgh', 'Blackburn':'Blackburn','Kent':'Kent','Essex':'Essex','Oxon':'Oxon','Lothian':'Lothian','West Sussex':'West Sussex','Lanarkshire':'Lanarkshire','Birmingham':'Birmingham','East Sussex':'East Sussex','Surrey':'Surrey'}"
            }]
        });

    });

        </script>
}

<table id="myDataTable" class="display">
                    <thead>

                         <tr>
                            <th>ID</th>
                            <th>Company name</th>
                            <th>Address</th>
                           <th>Town</th>
                        </tr>
    
                        <tr>
                            <th>ID</th>
                            <th>Company name</th>
                            <th>Address</th>
                           <th>Town</th>
                        </tr>

                    </thead>
                        
                    <tbody> 
                   </tbody>

                   <tfoot>
                       <tr>
                           <th>ID</th>
                            <th>Company name</th>
                            <th>Address</th>
                           <th>Town</th>
                       </tr>
                   </tfoot>

                </table>

Any suggestions are welcome
Regards

Posted 13-Apr-14 8:38am

sunil gutta

Updated 14-Apr-14 8:42am

v3

Add a Solution

Comments

Guruprasad.K.Basavaraju 14-Apr-14 10:41am

Are you making this data table editable ?

sunil gutta 14-Apr-14 12:40pm

yes mate .. yes

Guruprasad.K.Basavaraju 14-Apr-14 13:40pm

Just curios, why would you want to edit a link ?

sunil gutta 14-Apr-14 14:41pm

i am making datatable editable but i am masking some columns non-editable . Like hyperlink column etc .. please check the edited post with full code :) regards

sunil gutta 14-Apr-14 14:44pm

Hey mate you can find the code above woks interestingly when i keep the same fnRender in second column in my datatable and removing the present fnRender the editing of other columns everything is fine but when i keep in 1st column means it shows the error CELL CANNOT BE UPDATED

Guruprasad.K.Basavaraju 15-Apr-14 2:07am

Sunil, will check on this in the morning.. Please click on reply to my message that will trigger a notification to me. Otherwise I wouldn't know if you commented unless I come to this page again..

sunil gutta 15-Apr-14 12:26pm

Reminder . i will be waiting for your response

Guruprasad.K.Basavaraju 15-Apr-14 13:54pm

You again replied to your own message :) See below for solution

sunil gutta 15-Apr-14 13:57pm

below ? i can find anything . am i missing something

Guruprasad.K.Basavaraju 15-Apr-14 14:03pm

Try now...

2 solutions

Solution 1

Remember, your On Blur is ocnfigured to call submit which will post back the edited data to server.

Below is the snippet in Jquery.jeditable.js file which does this.

JavaScript

/* add edited content and id of edited element to POST */
                             var submitdata = {};
                             submitdata[settings.name] = input.val();
                             submitdata[settings.id] = self.id;

If you look closely its looking for ID which is your first column. If you make that a action link then things go wrong. Try using the below code and that should work.

JavaScript

<script type="text/javascript">

    $(document).ready(function () {

        $.datepicker.regional[""].dateFormat = 'dd/mm/yy';
        $.datepicker.setDefaults($.datepicker.regional['']);

        var tab = $('#myDataTable').dataTable({

            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": 'AjaxDataProvider',
            "bJQueryUI": true,
            "aoColumns": [
                          {
                              "sName": "ID"
                          },
                         //{ "sName": "COMPANY_NAME" },
                         {
                             "sName": "COMPANY_NAME", 
                             "bSearchable": false,
                             "bSortable": false,
                             "fnRender": function (oObj) {
                                 return '<a href="\"Home/Details/'" mode="hold" />                             }
                         },
                         { "sName": "ADDRESS" },
                         { "sName": "TOWN" }
            ]

        });
        tab.makeEditable({
            "aoColumns": [
             null,
                null,
                null,
                {
                    indicator: 'Saving...',
                    tooltip: 'Click to select town',
                    loadtext: 'loading...',
                    type: 'select',
                    onblur: 'submit',
                    loadurl: 'AjaxDataProvider1'
                    //data: "{'London':'London','Liverpool':'Liverpool','Portsmouth':'Portsmouth','Edinburgh':'Edinburgh', 'Blackburn':'Blackburn','Kent':'Kent','Essex':'Essex','Oxon':'Oxon','Lothian':'Lothian','West Sussex':'West Sussex','Lanarkshire':'Lanarkshire','Birmingham':'Birmingham','East Sussex':'East Sussex','Surrey':'Surrey'}"
                }]
        });

        tab.columnFilter({
            sPlaceHolder: "head:after",
            aoColumns: [
                {
                    type: "date-range",
                    bRegex: true,
                    bSmart: true
                },
                {
                    type: "number-range"
                },
                { type: "text" },

                { type: "text" }

            ]
        });

    });

        </script></script>

Posted 15-Apr-14 7:56am

Guruprasad.K.Basavaraju

Comments

sunil gutta 15-Apr-14 14:01pm

yes when i keep the fnrender in second column it works but you mentioned some reason yes thank you . so is there any workaround so i can get hyperlink in ID column it self . ?

Guruprasad.K.Basavaraju 15-Apr-14 14:16pm

You can add another dummy column when you return the data and make that an Action link.

sunil gutta 15-Apr-14 14:15pm

Dude this piece of code showing unterminated error i.e the code in fnreneder . i was unable to comment that code .

One more thing can we make the above hyperlink display with out underline ?

Guruprasad.K.Basavaraju 15-Apr-14 14:17pm

Action link are usually unlined in browser correct ? :) but yes, you can apply style to remove the underline

sunil gutta 15-Apr-14 14:22pm

ok can i remove the underline in the above fnRender thing itself ?? . In html there will be decoration : false like that right ?

Guruprasad.K.Basavaraju 15-Apr-14 14:32pm

add this code above your script tag..

<style>
#myDataTable tr td a
{
text-decoration: none;
}

</style>

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Guruprasad.K.Basavaraju · Accepted Answer · 2014-04-15T08:21:00

Change the below line in

C#

public ActionResult AjaxDataProvider(JQueryDataTableParamModel param)

C#

var result = from c in displayedCompanies select new[] { Convert.ToString(c.ID), c.Name, c.Address, c.Town };

TO

C#

var result = from c in displayedCompanies select new[] { Convert.ToString(c.ID),"", c.Name, c.Address, c.Town };

Now change your script as below.

JavaScript

<script  type="text/javascript">

    $(document).ready(function () {

        $.datepicker.regional[""].dateFormat = 'dd/mm/yy';
        $.datepicker.setDefaults($.datepicker.regional['']);

        var tab = $('#myDataTable').dataTable({

            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": 'AjaxDataProvider',
            "bJQueryUI": true,
            "aoColumns": [
                          {"sName": "ID","bVisible":false},
                         {
                             "sName": "ID",
                             "bSearchable": false,
                             "bSortable": false,
                             "fnRender": function (oObj) {
                                 return '<a href=\"Home/Details/' + oObj.aData[0] + '\">' + oObj.aData[0] + '</a>';                            }
                         },
                         {"sName": "COMPANY_NAME"},
                         { "sName": "ADDRESS" },
                         { "sName": "TOWN" }
            ]

        });
        tab.makeEditable({
            "aoColumns": [
             null,                null,
                null,
                {
                    indicator: 'Saving...',
                    tooltip: 'Click to select town',
                    loadtext: 'loading...',
                    type: 'select',
                    onblur: 'submit',
                    loadurl: 'AjaxDataProvider1'
                    //data: "{'London':'London','Liverpool':'Liverpool','Portsmouth':'Portsmouth','Edinburgh':'Edinburgh', 'Blackburn':'Blackburn','Kent':'Kent','Essex':'Essex','Oxon':'Oxon','Lothian':'Lothian','West Sussex':'West Sussex','Lanarkshire':'Lanarkshire','Birmingham':'Birmingham','East Sussex':'East Sussex','Surrey':'Surrey'}"
                }]
        });

        tab.columnFilter({
            sPlaceHolder: "head:after",
            aoColumns: [
                {
                    type: "date-range",
                    bRegex: true,
                    bSmart: true
                },
                {
                    type: "number-range"
                },
                { type: "text" },

                { type: "text" }, { type: "text" }

            ]
        });

    });

        </script>

Now add another header column to table in your html..

HTML

<table id="myDataTable" class="display">
       <thead>
           <tr>
               <th>ID</th>
               <th>ID</th>
               <th>Company name</th>
               <th>Address</th>
               <th>Town</th>
           </tr>
       </thead>
       <tbody>
       </tbody>
   </table>

fnRender giving issue in datatable ? mvc4

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us