Custom Toolbar Template in MVC Grid

2 posts, 0 answers
  1. Matt Miller
    Matt Miller avatar
    23 posts
    Member since:
    Jan 2012

    Posted 13 Nov 2013 Link to this post

    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

  2. Daniel
    Admin
    Daniel avatar
    2214 posts

    Posted 15 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top