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:
- the grid doesn't displays the inital value, (as preset in the Index() action of the controller) but all checkboxes are rendered as "checked".
- 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