Link to home
Start Free TrialLog in
Avatar of Stacey Fontenot
Stacey Fontenot

asked on

Get selected value from dropdown within MVC RadGrid

I have an MVC web application using the Telerik RadGrid. I am using inline grid editing. In the edit mode, I have dropdowns that have values for the user to select. How can I capture the selected value the user selects. I would prefer to use javascript or jquery.

 chtml with grid ----------------------------------------------
    @(Html.Kendo().Grid<npm.Models.Home.TimeEntry>
        (Model.TimeEntries)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Job_Name).EditorTemplateName("JobsDD").Title("Job Name");
            columns.Bound(c => c.Client_Name).EditorTemplateName("ClientsDD").Title("Client Name");
            columns.Bound(c => c.Project_Name).EditorTemplateName("ProjectsDD").Title("Project Name");
            columns.Bound(c => c.Product_Name).EditorTemplateName("ProductsDD").Title("Product Name").ClientFooterTemplate("Total Hours:");
            columns.Bound(c => c.Time).Title("Hours").Width(100).ClientFooterTemplate("#=sum#");
            columns.Bound(c => c.Time_Name).EditorTemplateName("TimeDescriptionsDD").Title("Task").Width("auto");
            columns.Bound(c => c.Time_Notes).Title("Notes").Width("auto");
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(225).HtmlAttributes(new { @class = "gridcolumncommand" }); ;
        })
        .Resizable(resize => resize.Columns(true))
        .ToolBar(toolbar =>
        {
            toolbar.Create().Text("Add Time Entry");
        })

        .Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(true))
        .Sortable()
        .Scrollable()
        .Filterable()
        .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5)
        )
        .DataSource(dataSource => dataSource
        .Ajax()

        .Aggregates(aggregates => aggregates.Add(p => p.Time).Sum())
        .Batch(false)
        .ServerOperation(false)
        .PageSize(20)
        .Model(model =>
        {
            model.Id(p => p.Time_ID);
            model.Field(p => p.Job_ID).Editable(true);
            model.Field(p => p.Job_Name).Editable(true);
            model.Field(p => p.Client_ID).Editable(true);
            model.Field(p => p.Product_ID).Editable(true);
            model.Field(p => p.Project_ID).Editable(true);
            model.Field(p => p.Time_Description_ID).Editable(true);
            model.Field(p => p.Time_Notes).Editable(true);
            model.Field(p => p.Time).Editable(true);
            model.Field(p => p.Employee_ID).Editable(true);
            model.Field(p => p.Date_Worked).Editable(true);
        })
        .Read(read => read.Action("TimeEntry_Read", "TimeEntry"))
        .Create(create => create.Action("TimeEntry_Create", "Home"))
        .Update(update => update.Action("TimeEntry_Update", "Home"))
        .Destroy(destroy => destroy.Action("TimeEntry_Destroy", "Home"))
        )
    )

Open in new window


 Editor Template ----------------
@(Html.Kendo().DropDownList()
    .Name("JobsDD") // The name of the widget should be the same as the name of the property.
    .DataValueField("Job_ID")
    .DataTextField("Job_Name")
    .BindTo((System.Collections.IEnumerable)ViewData["cppjDD"])
    .HtmlAttributes(new { style = "width:200px;" })
    .OptionLabel("Select")
)

Open in new window

Avatar of Zakaria Acharki
Zakaria Acharki
Flag of Morocco image

Using jQuery it must be like :

$('body').on('change', 'select[name="JobsDD"]', function(){
      alert( $(this).val() );
})

Open in new window


Pure JS solution will be :

document.querySelector('select[name="JobsDD"]').forEach(function(item){
  item.addEventListenerAll('change', DropdownChange, false);
});
function DropdownChange(){
     alert(this.options[this.selectedIndex].value);
}

Open in new window

This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.