Telerik Forums
UI for ASP.NET MVC Forum
6 answers
1.4K+ views
I am using asp.net mvc grid with server wrappers and have 4 cascading dropdowns by utilizing custom editors.  I am using inline editing with the grid.  The grid is ajax and the dropdowns also get their data via ajax/json.

I am experiencing 2 symptoms which may or may not be related to the same problem:

1) When a change is made to the first dropdown, it's value is updated correctly in the database but the grid does not refresh.  I found this article but it didn't correct my issue. Simply hitting refresh on the page shows the new/correct value.  

2) The dropdowns are cascading correctly (ie when one is changed, the others get the correct choices).  However, only the first dropdown (not the cascaded ones) are updated correctly in the database.  The other's values are not updated.

Here's the Controller code that does the update:
01.public ActionResult UpdateUnitListItemViewModel([DataSourceRequest] DataSourceRequest request, UnitListItemViewModel unitListItemViewModel)
02.        {
03.            if (ModelState.IsValid)
04.            {
05.                // Map a unit and save it
06.                Unit unit = UnitRepository.GetUnit(unitListItemViewModel.UnitID);
07.                
08.                unit.Property.StatusID = unitListItemViewModel.PropertyStatusID;
09.                unit.Property.SubStatusID = unitListItemViewModel.PropertySubStatusID;
10. 
11.                unit.StatusID = unitListItemViewModel.UnitStatusID;
12.                unit.SubStatusID = unitListItemViewModel.UnitSubStatusID;
13. 
14.          
15.                    PropertyRepository.Update(unit.Property, LoggedInUser.UserID);
16.                    UnitRepository.Update(unit, LoggedInUser.UserID);
17.               
18.            }
19.            return Json(new[] { unitListItemViewModel }.ToDataSourceResult(request, ModelState));
20.  
21.        }
Here's the grid cshtml:
01.@(Html.Kendo().Grid<ARPS.OpsPortal.Models.UnitListItemViewModel>()
02.      .Name("Grid")
03.      .DataSource(datasource => datasource
04.            .Ajax()
05.            .Group( group => group.Add(c => c.MarketName))
06.            .Sort( sort => sort.Add("FormattedAddress").Ascending())
07.            .Read(read => read.Action("GetUnitListItemViewModels", "Property"))
08.            .Update(update => update.Action("UpdateUnitListItemViewModel","Property"))
09.            .Model(model => model.Field(p => p.FormattedAddress).Editable(false))
10.            .Model(model => model.Field(p => p.Name).Editable(false))
11.            .Model(model => model.Id(u => u.UnitID))
12.      )
13.      .Columns(columns =>
14.      {
15.          columns.Bound(u => u.FormattedAddress).Title("Address");
16.          columns.Bound(u => u.Name).Title("Unit");
17.          columns.Bound(u => u.PropertyStatusName).Title("Property Status");
18.          columns.Bound(u => u.PropertySubStatusName).Title("Property Sub Status");
19.          columns.Bound(u => u.UnitStatusName).Title("Unit Status");
20.          columns.Bound(u => u.UnitSubStatusName).Title("Unit Sub Status");
21.          columns.Bound(u => u.AssignedUserInitials).Title("User");
22.          columns.Command(command => command.Edit());
23.      })
24.     .Editable(editable => editable.Mode(GridEditMode.InLine))
25.     .Pageable()
26.     .Sortable()
27.)
Here's custom editor along with javascript:

01.@(Html.Kendo().DropDownList()
02.        .Name("PropertySubStatusID")
03.        .HtmlAttributes(new { style = "width:150px" })
04.                   
05.        .DataTextField("Name")
06.        .DataValueField("StatusID")
07.        .DataSource(source => {
08.            source.Read(read =>
09.            {
10.                read.Action("GetActiveSubStatuses", "Status")
11.                    .Data("filterPropertySubStatuses");
12.            })
13.            .ServerFiltering(true);
14.        })
15.        .Enable(true)
16.        .SelectedIndex(0)
17.        .AutoBind(false)
18.        .CascadeFrom("PropertyStatusID")
19.         
20.)
21. 
22.<script type="text/javascript">
23. 
24.    function filterPropertySubStatuses() {
25.        return {
26.            StatusID: $("#PropertyStatusID").val()
27.        };
28.    }
29. 
30.</script>
Petur Subev
Telerik team
 answered on 02 May 2014
1 answer
490 views

I have the following code to bind a DropDownList for the Status property of a User Model. The Status is an enum.

The DropDownList for the first user (row 1 in the table) is rendered correctly - however subsequent rows the DropDownList is not rendered - it is rendered as an empty text box. If I use 'Vanilla Razor' DropDownList then the controls are rendered correctly - what is wrong?

Thanks 

Ian

@model IEnumerable<CLOCS.Models.ApplicationUser>
 
@{
    ViewBag.Title = "Index";
}
 
<h2>Index</h2>
 
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.UserName)
        </th>
        <th>
 
        </th>
    </tr>
 
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.UserName)
                
                 
            </td>
            @*<td>
                @Html.EnumDropDownListFor(modelItem => item.Status)
            </td>*@
            <td>
                @Html.Kendo().DropDownListFor(modelItem => item.Status).BindTo(EnumHelper.GetSelectList(item.Status.GetType()))
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>
    }
 
</table>
Atanas Korchev
Telerik team
 answered on 02 May 2014
2 answers
314 views
I am using asp.net mvc4 using kendo ui to complete my project i have few textboxes which should is hidden and it should only be enable when there is no record for the studentID . I am using autocomplete when a user enters the studentid then it searches the existing ids but i want to customize it so that if there is a unique id then only textboxes will be enable i am new here in asp.net mvc so please help me out help would be appreciated thanks
Kumar Bharat
Top achievements
Rank 1
 answered on 02 May 2014
2 answers
294 views
I am trying to conditionally disable fields in a grid popup editortemplate based on a value in the passed in Model.  The value is correct in the model if I use an Html helper like a hidden field, but if I try to access it using razor code it is not there.  I assume this has to do with the order of how things are loading but I'mm not sure how to fix it.  Here is the editortemplate code:

@model PASSAdmin.ViewModels.ResourceReviewer.ResourceReviewViewModel
 
@{
    bool disabled = true;  
    if (Model.Status == "BLREV")
    {
        disabled = false;
    }
}
 
@Html.HiddenFor(model => model.Beamline_Request_ID, Model.Beamline_Request_ID)
@Html.HiddenFor(model => model.Status, Model.Status)
 
<div class="editor-container" style="width:700px;">
 
    <p>Please provide your recommendation of the experiment described in this Beam Time Request with regard to feasibility and safety.</p>
 
    <div>
        <div class="editor-label">
            @Html.Label("Approve")
        </div>
        <div class="editor-field">
            @if (disabled)
            {
                @Html.RadioButtonFor(model => model.Refused_By_Beamline, "N", new { disabled = true })
            }
            else
            {
                @Html.RadioButtonFor(model => model.Refused_By_Beamline, "N")
            }
        </div>
 
        <div class="editor-label">
            @Html.Label("Deny")
        </div>
        <div class="editor-field">
            @if (disabled)
            {
                @Html.RadioButtonFor(model => model.Refused_By_Beamline, "Y", new { disabled = true })
            }
            else
            {
                @Html.RadioButtonFor(model => model.Refused_By_Beamline, "Y")
            }
        </div>
    </div>
 
    <br class="clear" />
    <br />
    <br />
 
    <p>By selecting Approve you are signifying the Experiment is feasible and can be performed safely on the indicated Beamline. If you select to Deny any of the above, please provide an explanation in the Comments area below. In addition to any specific comments, it is suggested you make note of any particular beamline equipment to be used during this experiment.  Other staff may not have access to the full proposal information, but will have access to these comments.</p>
 
    @*
    <div class="editor-label">
        @Html.Label("Comments")
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Refused_By_Beamline, "N")
        @Html.ValidationMessageFor(model => model.Refused_By_Beamline)
    </div>
    *@         
    <p>Note: comments entered here are visible to the Principal Investigator</p>
 
</div>

When I view the source I can see that the hidden for Model.Status has the correct value but when I try to set the razor variable so I can use it to display the fields disabled, it does not have the value at all.

What am I missing? 








Stephen
Top achievements
Rank 1
 answered on 01 May 2014
1 answer
548 views
Good afternoon. My Kendo Grid allows me to create new records, but when I try to update a record I get the following error:

"No parameterless constructor defined for this object"

I should note that if I do not change anything when the update popup appears and just click the update button, it works fine. Only if I change something and then click update do I get the error.

Here is my grid code:

@(Html.Kendo().Grid<ExpenseReport.MVC.Models.ExpenseReportModel>()
        .Name("Grid")
            .Columns(columns =>
            {               
                columns.Bound(p => p.ExpenseReportId).Visible(true);
                columns.Bound(p => p.ExpenseLineItemId).Visible(true);
                columns.Bound(p => p.ExpenseTypeDesc).Title("Expense Type");
                columns.Bound(p => p.City).Title("City");
                columns.Bound(p => p.StateName).Title("State");
                columns.Bound(p => p.Date).Format("{0:d}").Title("Date");
                columns.Bound(p => p.Amount).Title("Amount");
                columns.Bound(p => p.EndingMileage).Title("Ending Mileage");
                columns.Bound(p => p.BeginningMileage).Title("Beginning Mileage");
                columns.Command(command => { command.Edit(); command.Destroy(); });
            })
            .ToolBar(toolbar => toolbar.Create().HtmlAttributes(new { id = "btnAdd" }))
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("NewExpense").Window(w => w.Width(500)))
            .Pageable()           
            .Scrollable()           
            .HtmlAttributes(new { style = "height:430px; width=100%" })           
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.ExpenseReportId);
                    model.Id(p => p.ExpenseLineItemId);
                })
                .Create(create => create
                    .Action("EditingPopup_Create", "ExpenseReport")
                    .Data("erLineItemsCreateData"))
                //.Read(read => read
                //    .Action("EditingPopup_Read", "ExpenseReport")
                //    .Data("erLineItemsReadData"))
                .Update(update => update
                    .Action("EditingPopup_Update", "ExpenseReport").Type(HttpVerbs.Post)
                    .Data("erLineItemsUpdateData"))
                .Destroy(update => update
                    .Action("EditingPopup_Destroy", "ExpenseReport").Type(HttpVerbs.Post)))          
    )
    <script>
        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }       
 
        //pass additional data to the READ action method
        function erLineItemsReadData() {
            return {
                expenseReportId: "@ViewBag.ExpenseReportId"
                };
        }
 
        function erLineItemsCreateData() {
            return {
                expenseReportId: "@ViewBag.ExpenseReportId"
                };
        }
 
        function erLineItemsUpdateData() {
            return {
                expenseReportId: "@ViewBag.ExpenseReportId",
                expenseLineItemId: "@ViewBag.ExpenseLineItemId"
                };
        }


Here is the controller code:


[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingPopup_Update([DataSourceRequest] DataSourceRequest request, ExpenseReportModel erLineItem, int expenseReportId, int expenseLineItemId)
        {
            if (erLineItem != null && ModelState.IsValid)
            {
                globalKip.UpdateExpenseReportLineItem(expenseReportId, erLineItem.ExpenseTypeDesc, erLineItem.Date, erLineItem.Amount, erLineItem.City, erLineItem.StateName, erLineItem.EndingMileage, erLineItem.BeginningMileage);
            }
             
            return Json(new[] { erLineItem }.ToDataSourceResult(request, ModelState));
        }


Does anyone know what's going on here? 
Vladimir Iliev
Telerik team
 answered on 01 May 2014
2 answers
596 views
Hi,

I need to attach an autocomplete to  "ManagerName" and selected manager employeeId should be populated to "EmployeeId".

CSHTML
---------
@Html.TextBoxFor(m => m.ManagerName)
@Html.TextBoxFor(m => m.EmployeeId)

JavaScript
---------------
 $(function () {

 var GetManagerURL = '@Url.Action("GetManager", "Employee", new { Area = "Employee" })';

$("#ManagerName").kendoAutoComplete({
            placeholder: "Enter your manager name",
            minLength: 3,
            dataTextField: "EmployeeName",            
            dataSource: {
                transport: {
                    read: GetManagerURL,
                    parameterMap: function (data) {
                        return {
                            input: $("#ManagerName").val(),
                            take: data.take,
                            skip: data.skip
                        };
                    }
                },               
                select: onManager_select,               
                serverFiltering: true,
                serverPaging: true,
                pageSize: 10
            }
        });

});

  function onManager_select(e) { // debugger is not hitting this function
        alert("select");
        //debugger;
        var selectedOne = $("#ManagerName").dataItem(e.item.index());
        $("#EmployeeId").val(selectedOne.EmployeeId);

    }


Controller
-------------

public JsonResult GetManager(string input, int take, int skip)
       {
            List<EmployeeViewModel> mgrList = new List<EmployeeViewModel>();
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 1, EmployeeName = "Prashad" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 2, EmployeeName = "Ashreewad" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 3, EmployeeName = "Sathish" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 11, EmployeeName = "Prashad1" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 21, EmployeeName = "Ashreewad1" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 31, EmployeeName = "Sathish1" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 12, EmployeeName = "Prashad2" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 22, EmployeeName = "Ashreewad2" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 32, EmployeeName = "Sathish2" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 13, EmployeeName = "Prashad3" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 23, EmployeeName = "Ashreewad3" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 33, EmployeeName = "Sathish3" });
            try
            {
                if (!string.IsNullOrWhiteSpace(input))
                {

                    if (mgrList != null)
                    {
                        mgrList = mgrList.Where(e => e.EmployeeName.ToLower().StartsWith(input.ToLower())).Take(take).ToList();
                    }
                }
            }
            catch (Exception ex)
            {
                //
                return null;
            }
            return Json(mgrList, JsonRequestBehavior.AllowGet);
        }

-----------------------------------------------------------

AutoComplete is populated fine.
But when I select an item from the populated list it is not hitting the "select" event function.

So how can we get selected Employee Object?

Thanks & Regards,
Kumar

Dimiter Madjarov
Telerik team
 answered on 01 May 2014
5 answers
2.1K+ views
All -

I have a multiselect and I would like to clear the "selected values" and bring the control back to its default state once I click the Add button. (see images for a better understanding). When viewing the images:

1. "1-DefaultState.png" shows what the control looks like on load.
2. "2-Add Clicked.png" shows what the control looks like after I select an item and click "Add"
3. Essentially, after I click the "Add" button I want the multi select control to look like it does in the image 1-DefaultState.png" 

I have tried several options such as changing the values array to null, but nothing seems to work.

Thanks,
Andrew
Tyrone
Top achievements
Rank 1
 answered on 30 Apr 2014
1 answer
463 views
Hi,

I have a grid of records that are editable (popup). 

When I click edit and launch the popup editor template I have another grid that is populated by passing a value to a controller method. I'm trying to access this value from the ViewModel that the original selected record is built from.

I understand the editor template serialization and there has been a similar question posted here: http://www.telerik.com/forums/model-not-initialized-in-grid-popup-editor-

Does anyone know how to access the bound data from within a template?

Regards
Petur Subev
Telerik team
 answered on 30 Apr 2014
4 answers
516 views
I upgrade my kendo UI for MVC to 2014.1.415

I want to add rule to the masked text box.  So I copied the example from this page:
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/maskedtextbox/overview

Here is my view:
--------------------
@{
    ViewBag.Title = "MaskedTextWithRule";
}

<h2>MaskedTextWithRule</h2>


<div class="demo-section">
    <h2>Mask Input </h2>
    <ul id="fieldlist">
        <li>
            <label for="phone_number">Phone number:</label>
            @(Html.Kendo().MaskedTextBox()
                  .Name("phone_number")
                  .Mask("(999) 000-0000")
                  .Value("555 123 4567")
            )
        </li>

        <li>
            @(Html.Kendo().MaskedTextBox()
                  .Name("maskedtextbox")
                  .Rules(rules => {
                      rules.Add("~", "/[+-]/");
                  })
                  .Mask("~0000") //Set a mask with custom rule
            )
        </li>

    </ul>
</div>

<style>
    .demo-section {
        width: 300px;
        margin: 35px auto 50px;
        padding: 30px;
    }

    .demo-section h2 {
        text-transform: uppercase;
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    #fieldlist
    {
        margin:0;
        padding:0;
    }

    #fieldlist li
    {
        list-style:none;
        padding:10px 0;
    }

    #fieldlist label {
        display: inline-block;
        width: 130px;
        margin-right: 5px;
        text-align: right;
    }
</style>

---------------------------------------------------

I compiled the project without problem, but when I run it, I got the following error
--------------------------------------------
Server Error in '/' Application.Compilation Error Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1502: The best overloaded method match for 'Kendo.Mvc.UI.Fluent.MaskedTextBoxRulesBuilder.Add(char, string)' has some invalid arguments

Source Error:

Line 22: .Name("maskedtextbox")
Line 23: .Rules(rules => {
Line 24: rules.Add("~", "/[+-]/");
Line 25: })
Line 26: .Mask("~0000") //Set a mask with custom rule


Dongfen
Top achievements
Rank 1
 answered on 29 Apr 2014
2 answers
372 views
Message: Exception: System.InvalidCastException: Unable to cast object of type 'Kendo.Mvc.CompositeFilterDescriptor' to type 'Kendo.Mvc.FilterDescriptor'.
   at Kendo.Mvc.Infrastructure.Implementation.FilterNodeVisitor.Visit(PropertyNode propertyNode)
   at Kendo.Mvc.Infrastructure.Implementation.OrNode.Accept(IFilterNodeVisitor visitor)
   at Kendo.Mvc.UI.DataSourceRequestModelBinder.BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
   at System.Web.Mvc.ControllerActionInvoker.GetParameterValue(ControllerContext controllerContext, ParameterDescriptor parameterDescriptor)
   at System.Web.Mvc.ControllerActionInvoker.GetParameterValues(ControllerContext controllerContext, ActionDescriptor actionDescriptor)
   at System.Web.Mvc.ControllerActionInvoker.InvokeAction(ControllerContext controllerContext, String actionName)
Grahame
Top achievements
Rank 2
 answered on 29 Apr 2014
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
Licensing
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?