Inline Editing with Editor for different column number.

tarudian · October 2018

Hi,
I am considering purchesing Editor, for its inline editing features, however I am wondering if it will solve my problem.

Basicly i have a table, which lenght is determined by the returned data.

Based on the specific case. we can have table for one or multiple years.

Columns for example are like :

Name, Year, Jan, Feb, Mar, Apr ....... Year, Jan, Feb, Mar, Apr ....

So basicly i create columns based on the year count, and then fill it with grouped values using data from a model. I haven't found a way to fill table from dt ajax call.

I need to be able to edit each month values (best if it can be done inline).
From the editor examples i have seen, all table configuration is specefied in the js part. So i am not sure if the inline functionality will work for me.

Can someone advise me if this requirment can be achived with Editor pluign ?

table columns length will be different based on the case

inline editing for month values

                 <table id="TempTable"class="display row-border" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                             <th>type></th>
                            @foreach (var Year in Model.Years)
                            {

                                <th>Jan-@Year</th>
                                <th>Feb-@Year</th>
                                <th>Mar-@Year</th>
                                <th>Apr-@Year</th>
                                <th>May-@Year</th>
                                <th>Jul-@Year</th>
                                <th>Jun-@Year</th>
                                <th>Aug-@Year</th>
                                <th>Sep-@Year</th>
                                <th>Oct-@Year</th>
                                <th>Nov-@Year</th>
                                <th>Dec-@Year</th>
                            }
                        </tr>
                    </thead>
                            <tbody>
                                @foreach (var item in Model.Data)
                                {
                                    <tr>
                                        <td>@item.[0].Values.Name</td>
                                        <td>@item.[0].Values.Type</td>
                                        @foreach (var item2 in item.Values)
                                        {
                                            <td>@item2.Jan</td>
                                            <td>@item2.Feb</td>
                                            <td>@item2.Mar</td>
                                            <td>@item2.Apr</td>
                                            <td>@item2.May</td>
                                            <td>@item2.July</td>
                                            <td>@item2.June</td>
                                            <td>@item2.Aug</td>
                                            <td>@item2.Sep</td>
                                            <td>@item2.Oct</td>
                                            <td>@item2.Nov</td>
                                            <td>@item2.Dec</td>
                                        }
                                    </tr>                          
                                }
                            </tbody>
                        </table>

$(document).ready(function () {
    $('#TempTable').DataTable({
        "dom": 'rti'
    });

colin · October 2018

Note, duplicate of this thread here, but more info on this one so best to use this.

allan · October 2018

Can someone advise me if this requirment can be achived with Editor pluign ?

Yes it can. You are right that the examples focus on static field construction, but it is also quite possible to dynamically add fields to an Editor instance using the add() method. For example:

    var editor = new $.fn.dataTable.Editor( {
        table: "#myTable",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }
        ]
    } );

could be rewritten as:

var editor = new $.fn.dataTable.Editor({
  table: "#myTable"
});

editor.add({
  label: "First name:",
  name: "first_name"
});

editor.add({
  label: "Last name:",
  name: "last_name"
});

From there it is just one more step to use add() in a loop (assuming you have the information about the fields you want to be editable in an array or object somewhere).

Allan

tarudian · October 2018

Thank you Allan, that helps. Will test this after i get the Editor

tarudian · November 2018

Can you advice me how Object for this should look like, since columns name can change depending on the case time period ?

sometime it will me from jan 2018 - april 2018
and sometime from mar 2018 to dec 2019 ....

tarudian · November 2018

For example, can i use nested objects.... like this

data {
              Name: test,
              Type : green
              Years {
                   2018 {
                             jan: 14
                             feb: 4
                             mar: 5
                             apr: 6
                             may : 8
                             june: 9
                             july: 15
                             aug :12
                             sep : 23
                             oct : 322
                             nov: 23
                             dec: 45
                            }
                    2019 {
                             jan: 14
                             feb: 4
                             mar: 5
                             apr: 6
                             may : 8
                             june: 9
                             july: 15
                             aug :12
                             sep : 23
                             oct : 322
                             nov: 23
                             dec: 45
                            }
}

    var editor = new $.fn.dataTable.Editor({
      table: "#myTable"
    });


    // some loop to determine from which to which month & year
    editor.add({
      label: "",
      name: "Years[i].[j]"
    });

allan · November 2018

You would use name: 'Years.2018.jan for example. You could create the fields in a loop.

Allan

plareszka · November 2018

Thanks @allan for your suggestion, i have aquired editor, but not sure now how to build controller for this since from what i have learned so far. Editor requires exact models from datatables to be used, and to achive nested object like above I had to group my data from different sources.

Is there a way to build my custom object in a controller, and then pass it to Editor response, and upon editing a cell have a custom behavior to point which table should be updated ?

allan · November 2018

Editor requires exact models from datatables to be used

Do you mean in .NET? Actually it doesn't need a model at all. Similar to how I commented on your other thread you can built up the Editor instance in .NET with a loop, adding the fields as you need. A model in .NET is actually just used to iterate over the properties to add the fields based on the property names.

Allan

Inline Editing with Editor for different column number.

Inline Editing with Editor for different column number.

Answers

Howdy, Stranger!

Categories

DataTables

Inline Editing with Editor for different column number.

Inline Editing with Editor for different column number.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables