Custom Toolbar Template in MVC Grid

[Matt Miller]

I need to create a custom toolbar template for a mvc detail grid.

here is my detail grid definition: 

<script id="incompleteTrainTemplate" type="text/kendo-tmpl">

    @(Html.Kendo().Grid<CNX.Domain.Entities.CnxRailcar>()
          .Name("IncompleteTrains_#=Id#")
          .Editable(editable => editable.Mode(GridEditMode.InCell))
          .Columns(columns =>
            {
                columns.Bound(o => o.Id).Visible(false);
                columns.Bound(o => o.TRAIN_GUID).Visible(false);
                columns.Bound(o => o.EQUIPMENT_NUMBER).Width(125);
                columns.Bound(o => o.SEQUENCE_NUMBER).Width(75) ;
                columns.Bound(o => o.PILE).Width(75);
                columns.Bound(o => o.CLASS).Width(75);
                columns.Bound(o => o.LOT).Width(75);
                columns.Bound(o => o.INBOUND_TRACK).EditorTemplateName("_inboundTrackDropDown").Width(100);
                columns.Bound(o => o.EMPTY_TRACK).EditorTemplateName("_emptyTrackDropDown").Width(100);
                columns.Bound(o => o.AS_RECEIVED_WEIGHT).Width(100);
                columns.Bound(o => o.STATUS);
            })
            .DataSource(dataSource => dataSource.Ajax()
                                                .PageSize(10)
                                                .Update(update => update.Action("CnxRailcarUpdate" , "MenuTrain" , Model))
                                                .Read(read => read.Action("CnxRailcars", "MenuTrain", new { trainGuid = "#=Id#" })
                                                .Type(HttpVerbs.Post))
                                                .Update(update => update.Action("CnxRailcarUpdate", "MenuTrain", Model).Type(HttpVerbs.Post))
                                                .Model(model => model.Id(o => o.Id)))
            .Pageable()
            .Sortable()
            .Filterable()
            .Events(ev => ev.Save("incompleteRailcars_Save"))//.DataBound("function(e){setTimeout(function(){$('\\#Lot_#=Id#').data('kendoDropDownList').dataSource.read()})}"))
            .ToolBar(tb =>
                        {
                            tb.Template(() =>
                            {
                                @Html.Kendo().DropDownList().Name("Lot_#=Id#").DataTextField("val").DataValueField("id").DataSource(dataSource => dataSource.Read(read => read.Action("GetTrainLots", "MenuTrain", new { trainGuid = "#=TRAIN_GUID#" })));
                            });
                        })
            .ToClientTemplate()
        )



</script>

Here are my controller actions : 

[HttpPost]
       public ActionResult CnxRailcars(Guid trainGuid, [DataSourceRequest] DataSourceRequest request)
       {
           return Json(cnxRailcarRepository.Railcars(trainGuid).ToDataSourceResult(request));
       }

[HttpPost]
       public JsonResult GetTrainLots(Guid trainGuid, [DataSourceRequest] DataSourceRequest request)
       {
           return Json(cnxRailcarRepository.Railcars(trainGuid).ToDataSourceResult(request));
       }

I just can figure out how to force the dropdownlist's datasource to read. Should i be reading from the datasource in the grid's databound event?

Maybe something like this 

.Events(ev => ev.Save("incompleteRailcars_Save")).DataBound("function(e){setTimeout(function(){$('\\#Lot_#=Id#').data('kendoDropDownList').dataSource.read()})}"))

Maybe i'm going completely in the wrong direction. Any ideas on what i'm doing wrong or missing here?

Thanks in advance

[Daniel]

Hello,

Is the dropdownlist rendered? The code used for the toolbar should not output a result. You should either use the function overload with the text tag:

.ToolBar(tb =>
{
    tb.Template(@<text>
        @(
            Html.Kendo().DropDownList()
                .Name("Lot_#=Id#")
                .DataTextField("val")
                .DataValueField("id")
                .DataSource(dataSource =>
                        dataSource.Read(read => read.Action("GetTrainLots", "MenuTrain", new { trainGuid = "#=TRAIN_GUID#" }))
                )
        )
    </text>);
})

or the string overload and return the dropdownlist string.
Regards,
Daniel
Telerik