using a DropDownList and CustomCommandToolBarButton within a ToolBar template.

[Toffer]

Hello all,

My newest adventure in Kendo Grid usage has led me down the path of using a custom ToolBar template.  Within this ToolBar I have a DropDownList and a CustomCommandToolBarButton (among other things, but those are the only 2 things that matter in this context).

 

The grid is populated with a bunch of rows with a column on the left hand side that has a checkbox.  The intent is for a user to check the rows they want to be affected, set the DropDownList to the status they want to set all the selected rows too, push the button and have the records update.

 

The problem I'm having is I do not know how to pass the value of the DropDownList to the CustomCommandToolBarButton.  I know...I know...it should be really easy, but I haven't found an example of anything like this anywhere.  :(  I'll include the source files in question...please look them over and let me know if there's an easy way to accomplish what I'm looking to do.

 View:

@using PhynetReporting

@{
    ViewBag.Title = "Gold List - 3rd Party Optics";
    Layout = null;
}

<script>
    function grid_error(e)
    {
        if (e.errors)
        {
            var message = "There are some errors:\n";

            // Create a message containing all errors.
            $.each(e.errors, function (key, value)
            {
                if ('errors' in value)
                {
                    $.each(value.errors, function ()
                    {
                        message += this + "\n";
                    });
                }
            });

            // Display the message
            alert(message);

            // Cancel the changes
            var grid = $("#ThirdPartyOpticsGoldListGrid").data("kendoGrid");
            grid.cancelChanges();
        }
    }

    function GetTransceiverBreakoutModeFilter(element)
    {
        element.kendoAutoComplete(
        {
            dataSource:
            {
                schema:
                {
                    data: "Data",
                    total: "Total"
                },
                transport:
                {
                    read: '@Url.Action("GetTransceiverBreakoutModesForFiltering", "ThirdPartyOpticsGoldList")'
                },
                type: "aspnetmvc-ajax"
            }
        });
    }

    function GetTransceiverCableLengthFilter(element)
    {
        element.kendoAutoComplete(
        {
            dataSource:
            {
                schema:
                {
                    data: "Data",
                    total: "Total"
                },
                transport:
                {
                    read: '@Url.Action("GetTransceiverCableLengthsForFiltering", "ThirdPartyOpticsGoldList")'
                },
                type: "aspnetmvc-ajax"
            }
        });
    }

    function GetTransceiverCompatibilityFilter(element)
    {
        element.kendoAutoComplete(
        {
            dataSource:
            {
                schema:
                {
                    data: "Data",
                    total: "Total"
                },
                transport:
                {
                    read: '@Url.Action("GetTransceiverCompatibilitiesForFiltering", "ThirdPartyOpticsGoldList")'
                },
                type: "aspnetmvc-ajax"
            }
        });
    }

    function GetTransceiverFormFactorFilter(element)
    {
        element.kendoAutoComplete(
        {
            dataSource:
            {
                schema:
                {
                    data: "Data",
                    total: "Total"
                },
                transport:
                {
                    read: '@Url.Action("GetTransceiverFormFactorsForFiltering", "ThirdPartyOpticsGoldList")'
                },
                type: "aspnetmvc-ajax"
            }
        });
    }

    function GetTransceiverLifecycleStatusFilter(element)
    {
        element.kendoAutoComplete(
        {
            dataSource:
            {
                schema:
                {
                    data: "Data",
                    total: "Total"
                },
                transport:
                {
                    read: '@Url.Action("GetTransceiverLifecycleStatusForFiltering", "ThirdPartyOpticsGoldList")'
                },
                type: "aspnetmvc-ajax"
            }
        });
    }

    function GetTransceiverRevisionFilter(element)
    {
        element.kendoAutoComplete(
        {
            dataSource:
            {
                schema:
                {
                    data: "Data",
                    total: "Total"
                },
                transport:
                {
                    read: '@Url.Action("GetTransceiverRevisionsForFiltering", "ThirdPartyOpticsGoldList")'
                },
                type: "aspnetmvc-ajax"
            }
        });
    }

    function GetTransceiverSupplierFilter(element)
    {
        element.kendoAutoComplete(
        {
            dataSource:
            {
                schema:
                {
                    data: "Data",
                    total: "Total"
                },
                transport:
                {
                    read: '@Url.Action("GetTransceiverSuppliersForFiltering", "ThirdPartyOpticsGoldList")'
                },
                type: "aspnetmvc-ajax"
            }
        });
    }

    $(function ()
    {
        $('#ThirdPartyOpticsGoldListGrid').on('click', '.chkbx', function ()
        {
            var checked = $(this).is(':checked');
            var grid = $('#ThirdPartyOpticsGoldListGrid').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('Selected', checked);
        })
    })

    function checkAll(e)
    {
        var state = $(e).is(':checked');
        var grid = $('#ThirdPartyOpticsGoldListGrid').data().kendoGrid;
        $.each(grid.dataSource.view(), function ()
        {
            if (this['Selected'] != state)
                this.dirty = true;
            this['Selected'] = state;
        });
        grid.refresh();
    }

    function TransceiverLifecycleStatusDropDownListChange(e)
    {
        tlsValue = this.value();
    }
</script>

<div>
    <h2>3rd Party Optics Gold List</h2>
    <hr size="3" />
</div>

<div>
    @{ var columnWidth = 170; }
    @{ var tlsValue = ""; }

    @(Html.Kendo().Grid<ThirdPartyOpticsGoldListModel>()
        .Columns(c =>
        {
            c.Template(@<text></text>)
                .ClientTemplate("<input type='checkbox' #= Selected ? checked='checked':'' # class='chkbx' />")
                .HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>")
                .Width(80);
            c.Bound(tpogl => tpogl.TransceiverDisplayName)
                .Filterable(false)
                .Title("Title")
                .Width(columnWidth);
            c.Bound(tpogl => tpogl.TransceiverCompatibilityName)
                .Filterable(f => f.UI("GetTransceiverCompatibilityFilter"))
                .Title("Compatibility Type")
                .Width(columnWidth);
            c.Bound(tpogl => tpogl.TransceiverFormFactorName)
                .Filterable(f => f.UI("GetTransceiverFormFactorFilter"))
                .Title("Form Factor")
                .Width(columnWidth);
            c.Bound(tpogl => tpogl.TransceiverSupplierName)
                .Filterable(f => f.UI("GetTransceiverSupplierFilter"))
                .Title("Vendor")
                .Width(columnWidth);
            c.Bound(tpogl => tpogl.TransceiverRevision)
                .Filterable(f => f.UI("GetTransceiverRevisionFilter"))
                .Title("Firmware Revision")
                .Width(columnWidth);
            c.Bound(tpogl => tpogl.TransceiverBreakoutMode)
                .ClientTemplate("#:TransceiverBreakoutMode#")
                .Filterable(f => f.UI("GetTransceiverBreakoutModeFilter"))
                .Title("Breakout Mode")
                .Width(columnWidth);
            c.Bound(tpogl => tpogl.TransceiverCableLength)
                .Filterable(f => f.UI("GetTransceiverCableLengthFilter"))
                .Title("Cable Length")
                .Width(columnWidth);
            c.Bound(tpogl => tpogl.TransceiverLifecycleStatusName)
                .EditorTemplateName("TransceiverLifecycleStatusDropDownListTemplate")
                .Filterable(f => f.UI("GetTransceiverLifecycleStatusFilter"))
                .Title("Status")
                .Width(columnWidth);
            c.Bound(tpogl => tpogl.Comments)
                .Filterable(false)
                .Title("Comments")
                .Width(columnWidth);
        })
        .DataSource(ds => ds
            .Ajax()
            .Batch(true)
            .Events(e => e.Error("grid_error"))
            .Model(m =>
            {
                m.Id(tpogl => tpogl.TransceiverID);
                m.Field(tpogl => tpogl.Selected).Editable(true);
                m.Field(tpogl => tpogl.TransceiverID).Editable(false);
                m.Field(tpogl => tpogl.TransceiverDisplayName).Editable(false);
                m.Field(tpogl => tpogl.TransceiverCompatibilityName).Editable(false);
                m.Field(tpogl => tpogl.TransceiverFormFactorName).Editable(false);
                m.Field(tpogl => tpogl.TransceiverSupplierName).Editable(false);
                m.Field(tpogl => tpogl.TransceiverRevision).Editable(false);
                m.Field(tpogl => tpogl.TransceiverBreakoutMode).Editable(false);
                m.Field(tpogl => tpogl.TransceiverCableLength).Editable(false);
            })
            .Read(r => r.Action("GetThirdPartyOpticsGoldListItems", "ThirdPartyOpticsGoldList"))
            .Update(u => u.Action("UpdateThirdPartyOpticsGoldList", "ThirdPartyOpticsGoldList")))
        .Editable(e => e.Mode(GridEditMode.InCell))
        .Excel(e => e
            .AllPages(true)
            .FileName("ThirdPartyOpticsGoldListReport.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("ExcelExportSave", "DataMaintenance")))
        .Filterable(f => f
            .Extra(false)
            .Operators(o => o
                .ForString(s => s
                    .Clear()
                    .StartsWith("Starts With")
                    .IsEqualTo("==")
                    .IsNotEqualTo("!="))))
        .HtmlAttributes(new { @class = "KendoGrid" })
        .Name("ThirdPartyOpticsGoldListGrid")
        .Navigatable()
        .Resizable(r => r.Columns(true))
        .Scrollable()
        .Selectable(s =>
        {
            s.Type(GridSelectionType.Row);
            s.Mode(GridSelectionMode.Multiple);
        })
        .Sortable()
        .ToolBar(t =>
        {
            t.Template(
                @<text>
                    <table>
                        <tr>
                            <td width="200px;" style="border: none">
                                @item.SaveButton()
                            </td>
                            <td width="170px;" style="border: none">
                                <label>Bulk set status to all selected rows:</label>
                            </td>
                            <td style="border: none">
                                @(Html.Kendo().DropDownList()
                                    .AutoBind(false)
                                    .DataSource(ds =>
                                    {
                                        ds.Custom()
                                            .Type("aspnetmvc-ajax")
                                            .Transport(tr =>
                                            {
                                                tr.Read("GetTransceiverLifeCycleStatus", "TransceiverLifeCycleStatus");
                                            })
                                            .Schema(s =>
                                            {
                                                s.Data("Data")
                                                    .Total("Total");
                                            });
                                    })
                                    .DataTextField("Name")
                                    .DataValueField("Name")
                                    .Events(e => e.Change("TransceiverLifecycleStatusDropDownListChange"))
                                    .HtmlAttributes(new { style = "width: 150px" })
                                    .Name("TransceiverLifecycleStatusDropDownList")
                                    .OptionLabel("Select Transceiver Lifecycle Status..."))
                            </td>
                            <td style="border: none">
                                @item.CustomCommandToolBarButton("BulkUpdate", "Bulk Updated Selected", "UpdateSelectedThirdPartyOpticsGoldListItems", "ThirdPartyOpticsGoldList", new { transceiverLifecycleStatusName = $("#TransceiverLifecycleStatusDropDownList").val() })
                            </td>
                            <td style="border: none">
                                <a class="k-button k-button-icontext k-grid-excel" href="#" style="float: right;"><span class="k-icon k-i-excel"></span>Export To Excel</a>
                            </td>
                        </tr>
                    </table>
                </text>);
        }))
</div>

Controller:

 

namespace TPOReports.Controllers
{
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Configuration;
    using System.Web.Mvc;
    using Kendo.Mvc.Extensions;
    using Kendo.Mvc.UI;
    using PhynetReporting;
    using Kendo.Mvc.UI.Fluent;
    using System.Linq.Expressions;

    public class ThirdPartyOpticsGoldListController : Controller
    {
        public ActionResult ThirdPartyOpticsGoldListView()
        {
            return View();
        }

        [HttpPost]
        public ActionResult GetThirdPartyOpticsGoldListItems([DataSourceRequest] DataSourceRequest request)
        {
            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

            if (!thirdPartyOpticsGoldListResult.Result)
            {
                ModelState.AddModelError("GetTransceiverGoldListItems", thirdPartyOpticsGoldListResult.Message);
            }

            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.ToDataSourceResult(request);
            return Json(result);
        }

        [HttpPost]
        public ActionResult GetTransceiverBreakoutModesForFiltering([DataSourceRequest] DataSourceRequest request)
        {
            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

            if (!thirdPartyOpticsGoldListResult.Result)
            {
                ModelState.AddModelError("GetTransceiverBreakoutModesForFiltering", thirdPartyOpticsGoldListResult.Message);
            }

            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverBreakoutMode).Distinct().ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult GetTransceiverCableLengthsForFiltering([DataSourceRequest] DataSourceRequest request)
        {
            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

            if (!thirdPartyOpticsGoldListResult.Result)
            {
                ModelState.AddModelError("GetTransceiverCableLengthsForFiltering", thirdPartyOpticsGoldListResult.Message);
            }

            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverCableLength).Distinct().ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult GetTransceiverCompatibilitiesForFiltering([DataSourceRequest] DataSourceRequest request)
        {
            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

            if (!thirdPartyOpticsGoldListResult.Result)
            {
                ModelState.AddModelError("GetTransceiverCompatibilitiesForFiltering", thirdPartyOpticsGoldListResult.Message);
            }

            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverCompatibilityName).Distinct().ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult GetTransceiverFormFactorsForFiltering([DataSourceRequest] DataSourceRequest request)
        {
            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

            if (!thirdPartyOpticsGoldListResult.Result)
            {
                ModelState.AddModelError("GetTransceiverFormFactorsForFiltering", thirdPartyOpticsGoldListResult.Message);
            }

            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverFormFactorName).Distinct().ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult GetTransceiverLifecycleStatusForFiltering([DataSourceRequest] DataSourceRequest request)
        {
            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

            if (!thirdPartyOpticsGoldListResult.Result)
            {
                ModelState.AddModelError("GetTransceiverLifecycleStatusForFiltering", thirdPartyOpticsGoldListResult.Message);
            }

            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverLifecycleStatusName).Distinct().ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult GetTransceiverRevisionsForFiltering([DataSourceRequest] DataSourceRequest request)
        {
            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

            if (!thirdPartyOpticsGoldListResult.Result)
            {
                ModelState.AddModelError("GetTransceiverRevisionsForFiltering", thirdPartyOpticsGoldListResult.Message);
            }

            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverRevision).Distinct().ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult GetTransceiverSuppliersForFiltering([DataSourceRequest] DataSourceRequest request)
        {
            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

            if (!thirdPartyOpticsGoldListResult.Result)
            {
                ModelState.AddModelError("GetTransceiverSuppliersForFiltering", thirdPartyOpticsGoldListResult.Message);
            }

            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverSupplierName).Distinct().ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult UpdateSelectedThirdPartyOpticsGoldListItems([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ThirdPartyOpticsGoldListModel> thirdPartyOpticsGoldListItems, string transceiverLifecycleStatusName)
        {
            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.UpdateSelectedThirdPartyOpticsGoldListItems(thirdPartyOpticsGoldListItems, transceiverLifecycleStatusName);

            if (!thirdPartyOpticsGoldListResult.Result)
            {
                ModelState.AddModelError("UpdateSelectedThirdPartyOpticsGoldListItems", thirdPartyOpticsGoldListResult.Message);
            }

            return Json(new[] { thirdPartyOpticsGoldListResult.Payload }.ToDataSourceResult(request, ModelState));
        }

        [HttpPost]
        public ActionResult UpdateThirdPartyOpticsGoldList([DataSourceRequest] DataSourceRequest request, [Bind(Prefix ="models")]IEnumerable<ThirdPartyOpticsGoldListModel> thirdPartyOpticsGoldListItems)
        {
            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.UpdateThirdPartyOpticsGoldList(thirdPartyOpticsGoldListItems);

            if (!thirdPartyOpticsGoldListResult.Result)
            {
                ModelState.AddModelError("UpdateThirdPartyOpticsGoldListItem", thirdPartyOpticsGoldListResult.Message);
            }

            return Json(new[] { thirdPartyOpticsGoldListResult.Payload }.ToDataSourceResult(request, ModelState));
        }
    }
}

 

Thanks in advance.  :)

[Georgi Krustev]

Hello Toffer,

If you would like to get the selected value from the dropdownlist on button click, then you will need to use JavaScript for this task. Basically, the dropdownlist can have different values, hence you will need to retrieve the value dynamically. What I would suggest you is wire the click event of the toolbar button and on click, just find the related dropdownlist and retrieve the value. That's it.

If you are experiencing any difficulties, I would suggest you accomplish this dynamic retrieval outside the toolbar. Then you can easily put it back in the toolbar later.

Regards,
Georgi Krustev
Telerik

 

 

[Toffer]

Thanks for your response Georgi,

Thanks for the suggestion...I'm currently trying to figure out the JavaScript to do that.  I'll post my solution once I get it figured out.  :)