mercredi 18 octobre 2017

How to prefill a kendo grid with dynamics columns of checkboxes

I'm using C#, MVC, telerik/Kendo and I need to have a kendo grid with columns that changes dynamically, except for the first one ('Dependent'). Each dynamic column will be a checkbox, readonly and with its initial value by default; user can change values by inline edit after click on an 'edit' command button in the last column of the grid. I have two problems:

  1. the grid doesn't displays the inital value, (as preset in the Index() action of the controller) but all checkboxes are rendered as "checked".
  2. When click on the "Edit button" for the inline edit, the checkbox remains 'readonly'

Could someone help me?

<STARTCODE - MODEL>
namespace myproject.Models
{
    public class Configurator
    {
        public Grid Grid { get; set; }
    }

    public class Grid
    {
        public List<string> Columns { get; set; }
        public List<GridRow> Rows { get; set; }
    }

    public class GridRow
    {
        public int Id { get; set; }
        public string Dependent { get; set; }
        public bool [] Available { get; set; }
    }
}
<ENDCODE>



<STARTCODE - CONTROLLER>
public class ConfiguratoreDipendentiRepartoController : Controller
{

    public ActionResult Index()
    {
        Configurator model = new Configurator();
        model.Grid = new Grid();

        // Dynamics columns, depending on the values load from database
        model.Grid.Columns = new List<string> { "Desk", "Cash", "Services", "Cleans", "Store"};

        // Each row has ONE fixed column and a certain number of boolean values depending from the number of the above dynamic columns.
        model.Grid.Rows = new List<GridRow>
        {
            new GridRow { Dependent = "Mario Rossi",    Available = new bool [] { true, false, false, true, false} },
            new GridRow { Dependent = "Giuseppe Verdi", Available = new bool [] { false, false, false, true, true} },
            new GridRow { Dependent = "Carlo Bianchi",  Available = new bool [] { false, false, true, true, false} }
        };
        return View(model);
    }

    // POST: ConfiguratoreDipendentiReparto/Read
    [HttpPost]
    public ActionResult Read(int id)
    {
        JsonResult result = new JsonResult();
        try
        {
            // Simulation of loading data from DB
            Configuratore model = new Configuratore();
            model.Grid = new Grid();
            model.Grid.Columns = new List<string> { "Desk", "Cash", "Services", "Cleans", "Store"};

            // Each row has ONE fixed column and a certain number of boolean values depending from the number of the above dynamic columns.
            model.Grid.Rows = new List<GridRow>
            {
                new GridRow { Dependent = "Mario Rossi",    Available = new bool [] { true, false, false, true, false} },
                new GridRow { Dependent = "Giuseppe Verdi", Available = new bool [] { false, false, false, true, true} },
                new GridRow { Dependent = "Carlo Bianchi",  Available = new bool [] { false, false, true, true, false} }
            };

            result.Data = Json(model, JsonRequestBehavior.AllowGet);
            return result;
        }
        catch
        {
            return null;
        }
    }

    // POST: ConfiguratoreDipendentiReparto/Update
    [HttpPost]
    public ActionResult Update(int id, FormCollection collection)
    {
        try
        {
            // TODO: Add update logic here
        }
        catch
        {
        }
    }
}   
<ENDCODE>


<STARTCODE - viewForm Index.cshtml>
@model myproject.Models.Configurator
[...]
@(Html.Kendo().Grid(Model.Grid.Rows)
    .Name("gridConfiguraDipendenti")
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Columns(columns =>
    {
        // Static column: (Dependent name)
        columns.Bound(r=>r.Dependent).Editable("editColonnaDipendente").Title("Dependent");

        // loop for add all dynamic columns
        for (int i = 0; i < Model.Grid.Columns.Count; i++)
        {
            var index = i;

            columns.Template(@<text><input type="checkbox" #= @item.Available[index] == 'True' ? checked="checked" : "" # /></text>).Title(Model.Grid.Columns[i]);
        }

        columns.Command(c => {c.Edit().HtmlAttributes(new { @class = "buttonTrasp bt9" }); });
    })
    .DataSource 
    (ds => ds
        .Server()
        .Model(m => m.Id(p => p.Id))
        .Read(read => { read.Action("Read", "ConfiguratoreDipendentiReparto"); })
        .Update(update => { update.Action("Update", "ConfiguratoreDipendentiReparto"); })
    )
    .NoRecords("<p>no dependent are present.<p>")
    .Events(e =>
    {
        e.Edit("onEdit");
    })
)   

<script>
    $(document).ready(function () {
        // set every checkbox as readonly
        $('input[type *= "checkbox"]').attr("disabled", true);
    });


    function editColonnaDipendente()
    {
        return true;
    }
    function editColonnaReparto(e) {
        return true;
    }

    function onEdit(arg)
    {
        $('input[type *= "checkbox"]').attr("disabled", false);
        $('input[name *= "Dependent"]').attr("disabled", true);
        return;
    }
</script>   
<ENDCODE>




Aucun commentaire:

Enregistrer un commentaire