Insertion of a new item in grid fails due to client template existence - kendo-ui

Question

I have a Kendo UI grid which I need to be editable. I also need a client template for one of the columns.
The part from the kendo ui grid that bugs me:
.Columns(columns =>
{
columns.Bound(p => p.Author).Filterable(false).Width(100);
columns.Bound(p => p.Name).Filterable(false).Title("Idea Name");
columns.Bound(p => p.Description).Filterable(false);
columns.Bound(p => p.BeginDate).Format("{0:d}");
columns.Bound(p => p.ReleaseDate).Format("{0:d}");
columns.Bound(p => p.NextAvailableStates).ClientTemplate
(
"#for(var i = 0; i < NextAvailableStates.length; i++) {" +
"# <li>" +
" #=NextAvailableStates[i].StepName # " +
"</li> #" +
"} #"
)
.Title("Actions").IncludeInMenu(false).Visible(true)
.Sortable(false).Filterable(false);
})
My controller:
public partial class IdeaController : Controller
{
private StateMachineHelper helper = new StateMachineHelper();
public ActionResult Index(int? state)
{ //must ad to Model the next available states
var model = new List<Idea>();
model.AddRange(helper.GetIdeasByState(helper.GetStateByID(state)));
foreach (var item in model)
{
item.NextAvailableStates = helper.GetNextStates(helper.GetStateMachineInstancesByOrderID(item.ID));
}
return View(model);
}
public ActionResult NextState()
{
return View();
}
public ActionResult Read([DataSourceRequest]DataSourceRequest request, DateTime start, DateTime end)
{
var ideas = helper.GetIdeasBetweenDates(start, end);
DataSourceResult result = ideas.ToDataSourceResult(request);
return Json(result);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([DataSourceRequest] DataSourceRequest request, Idea product)
{
if (product != null && ModelState.IsValid)
{
var helper = new StateMachineHelper();
var machine = new StateMachineInstance() {
ParentID = 0,
//1 -> machineID
CurrentStateID = helper.GetFirstStateOfMachine(1).ID,
MachineID =1,
ParentStateID =0,
//OrderType: idea/command
OrderType = "Idea"
};
helper.AddNewOrder(product, machine);
product.NextAvailableStates = helper.GetNextStates(machine);
}
return Json(new[] { product }.ToDataSourceResult(request, ModelState));
}
}
public Idea()
{
this.StateMachineInstances = new HashSet<StateMachineInstance>();
}
[ScaffoldColumn(false)]
[DataMember]
public int ID { get; set; }
[Required]
[DataMember]
public string Name { get; set; }
[DataMember]
public string Description { get; set; }
[DataMember]
[Required]
public string Author { get; set; }
[DataMember]
public System.DateTime BeginDate { get; set; }
[DataMember]
public Nullable<System.DateTime> ReleaseDate { get; set; }
[DataMember]
public List<State> NextAvailableStates
{
get
{
return nextAvailableStates;
}
set
{
nextAvailableStates = value;
}
}
private List<State> nextAvailableStates = new List<State>();
public virtual ICollection<StateMachineInstance> StateMachineInstances { get; set; }
}
The grid renders just fine, with every column filled with the correct information. The problem appears when I need to add a new item to the grid. The popup window doesn't show up and I get Uncaught ReferenceError: NextAvailableStates is not defined. Which actually makes sense because the grid tries to draw before the new item gets returned.
My question: is there a way to achieve the insertion of a new item while using custom client templates?

Answer 1

You can try modifying your client template to check for the existence of NextAvailableStates before using them:
"# if (NextAvailableStates) {" +
" for(var i = 0; i < NextAvailableStates.length; i++) {" +
"# <li>" +
" #=NextAvailableStates[i].StepName # " +
"</li> #" +
" } " +
"} #"