Datatables column modification after initcomplete

Datatables column modification after initcomplete

ddepuemdddepuemd Posts: 1Questions: 1Answers: 0

I have a list of projects that the controller send to the view:

[HttpGet]
        public ActionResult GetAllProjects(string userid, string stat)
        {
            return Json(new
            {
                aaData = Repository.GetAllProjects(userid).Select(x => new String[] {
                    x.ID,
                    x.ProjectNumber.ToString(),
                    x.ProjectTypeText,
                    x.SelectedProjectType,
                    x.Priority.ToString(),
                    x.StatusText,
                    x.Status,
                    x.ProjectStateText,
                    x.ProjectState,
                    x.CreatedDateForDisplay,
                    x.ProjectTitle,
                    x.Description,
                    x.CreatedBy,
                    x.AssignedUserName,
                    x.AssignedUser,
                    x.BackUpUserName,
                    x.BackUpUser,
                    x.Criticality.ToString(),
                    x.EvaluationDeadlineDateForDisplay,
                    x.SolutionDeadlineDateForDisplay,
                    x.NumberofComments.ToString(),
                    x.Notify.ToString(),
                    x.ITDRequest.ToString(),
                    x.NewFunding.ToString()
                })
            }, JsonRequestBehavior.AllowGet);
        }

The problem is that the list of statuses is different for each project type and I am trying to change the dropdown after I initialize the table. I can display ALL statuses with this:

"render": function(data, type, full, meta){
                        var typestatlist;
                        var $ddiv = $("<div class='tooltip'><span class='tooltiptext' style='font-size:x-small !important;'>Select Project Status for this project.</span></div>");
                        var $select = $("<select></select>", { 'class' : 'ctrl-status'});
                        $select.attr("id", "ddl" + full[0])
                        $.each(statuslist, function (Value, Text) {
                            var $opt = $('<option value=' + Text.Value + '>' + Text.Text + '</option>');

                            if (Text.Value === full[6]){
                                $opt.attr("selected", "selected");
                            }
                            $select.append($opt);
                        });
                        $ddiv.append($select);
                        return $ddiv.prop("outerHTML");

But I am trying to change it based on type in the initcomplete:

var tab = $("#tblProjects").DataTable();
                tab.rows().every(function (idx, tbll, rwl){
                    var dat = this.data();
                    var c = dat[3];
                    var rw = this;
                    var $ddiv = $("<div class='tooltip'><span class='tooltiptext' style='font-size:x-small !important;'>Select Project Type for this project.</span></div>");
                    var $select = $("<select></select>", { 'class' : 'ctrl-status'});
                    $.ajax({
                        type:'GET',
                        url: '@Url.Action("GetAllProjectStatusPairsByType")',
                        data: { type : c},
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(data){
                            if (data.length === 0){
                                typestatlist = { "Value" : "NONE", "Text" : "NONE"};
                            } else {
                                typestatlist = data;
                            }
                            $.each(typestatlist, function (Value, Text) {
                                var $opt = $('<option value=' + Text.Value + '>' + Text.Text + '</option>');

                                if (Text.Value === c){
                                    $opt.attr("selected", "selected");
                                }
                                $select.append($opt);
                            });
                            $ddiv.append($select);
                            dat[5] = $ddiv;
                            rw.data(dat);
                        }
                    });
                });

Answers

  • allanallan Posts: 61,716Questions: 1Answers: 10,108 Site admin

    Sorry, there is no option to change the rendering function after initialisation. Its actually slightly dangerous to use a renderer to display HTML input elements since a re-render would wipe out any changes the user has made. I'm also a little concerned about the number of Ajax requests you would be making to your table - if you have 50 rows, that's 50 Ajax requests on load. You might well DDOS your own server!

    Is it not possible to include the list of options in the JSON structure for each row?

    Allan

This discussion has been closed.