Questions on UI for ASP.NET MVC Forum

1 answer

441 views

I am using the Kendo.EditorFor() control to display editors as I loop through a List of objects. I have server-side validation in play and when I submit the form, it correctly identifies that the fields are not filled in. However, the appropriate classes are not added to any of the HTML elements that are returned back to the browser, and therefore there is no visual indicator of which editor(s) have not been filled in.

Here's a copy of my HTML:

    @using (Html.BeginForm("SaveSelfAssessment", "Accreditation", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(false, "The following errors occurred:", new { @class = "error_box" })

        <input type="hidden" id="Id" name="Id" value="@Model.Id" />
        <input type="hidden" id="StartingId" name="StartingId" value="@Model.StartingId" />

        for (int i=0; i<Model.ApplicationSelfAssessments.Count; i++)
        {
            @Html.HiddenFor(m => m.ApplicationSelfAssessments[i].Id)
            @Html.HiddenFor(m => m.ApplicationSelfAssessments[i].Type)

            <div class="@Model.ApplicationSelfAssessments[i].Type">
            @if (Model.ApplicationSelfAssessments[i].Type == "supplementalinformation")
            {
                <h2>Supplemental Information</h2>
            }
                @Html.Raw(Model.ApplicationSelfAssessments[i].Text)
            </div>

            if (Model.ApplicationSelfAssessments[i].Type == "question")
            {
                <div>@(Html.Kendo().EditorFor(m => m.ApplicationSelfAssessments[i].Answer)
                          .Encode(false)
                          .Tools(tools => tools
                                  .Clear()
                                  .Bold()
                                  .Italic()
                                  .Underline()
                                  .InsertUnorderedList()
                                  .InsertOrderedList()
                                  .Indent()
                                  .Outdent()
                            )
                        )
                </div>
            }
        }

        <p>
            <input type="button" class="k-button k-button-icontext" value="Previous" onclick="window.location = '@Model.PreviousUrl';" />
            <input type="submit" class="k-button k-button-icontext" value="Next" />
        </p>
    }

And my model contains the following Validate method:

        public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
        {
            if (Type == SelfAssessmentType.Question.ToString().ToLower() && String.IsNullOrWhiteSpace(Answer))
            {
                yield return new ValidationResult("Answer is required", new [] { "Answer" });
            }
        }

If I turn the editor into a textarea, the input-validation-error class is added to the textarea. Is there a way I can get this to work using the Kendo.EditorFor tool?

Thank you,

Rachael

Editor

answered on 10 Jun 2014

2 answers

85 views

Problems with Q1 2014 upgrade

I just installed Q1 2014 of the MVC controls. Ran the wizard to update my project and received no errors. (the app was previously running Q2 2013)
When I run the app the grids do not render correctly, and the Html.Kendo().Menu() gives the error:

Error: Object doesn't support property or method 'kendoMenu'

Dan

Installer and VS Extensions

answered on 10 Jun 2014

3 answers

1.2K+ views

AutoComplete in grid column

I use AutoComplete in grid column
But i can't send AutoComplete value to server
Please help me.

@(Html.Kendo().Grid<MvcApplication10.Models.Product>()

.Name("Customers")

.ToolBar(tb => tb.Create())

.Pageable()

.Columns(cols =>

{

cols.Bound(c => c.Name).EditorTemplateName("products");

cols.Bound(c => c.Number);

cols.Command(cmd =>

{

cmd.Edit();

cmd.Destroy();

});

})

.DataSource(dataSource => dataSource.Ajax()

.Model(model => model.Id(c => c.ProductID))

.Read("GetCustomers", "Product")

.Update("UpdateCustomer", "Product")

.Create("InsertCustomer", "Product")

.Destroy("DeleteCustomer", "Product"))

)

and AutoComplete file(products.cshtml) is placed in EditorTemplate folder in this view

@(Html.Kendo().AutoComplete()

.Name("products")

.DataTextField("Name")

.Filter("contains")

.MinLength(3)

.HtmlAttributes(new { style = "width:250px" })

.DataSource(source => {

source.Read(read =>

{

read.Action("GetProducts", "AutoComplate");

})

.ServerFiltering(false);

})

)

AutoComplete

answered on 10 Jun 2014

1 answer

81 views

Groups doesn't work for grid with VS 2013

Hi guys,

I simply modified the last version of samples (grid/index.chtml), in order to test a grouping configuration as described in documentation.
But the Groups property does not exist.
Here the code below:

@model Kendo.Mvc.Examples.Models.HeaderTemplateViewModel
@{using (Html.BeginForm())
{
    @(Html.Kendo().Grid(Model.Products)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Template(@<text>
                     <input name="selectedProducts" type="checkbox" title="select product" value="@item.ProductID"
                     @{
                         if (Model.SelectedProducts.Any(p => p.ProductID == item.ProductID))
                         {
                            @("checked=checked")
                         }
                     }/>
                    </text>)
                .HeaderTemplate(@<text>
                        <input id="selectAllProducts" type="checkbox" title="select all"
                          @{
                              if (Model.SelectedProducts.Any())
                              {
                                @("checked=checked")
                              }
                           } />
                    </text>)
                .Width(50)
                .HtmlAttributes(new { style = "text-align:center" })
                .HeaderHtmlAttributes(new { style = "text-align:center" });
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice);
            columns.Bound(p => p.UnitsInStock);
        })
        .Pageable()
                                      .Groupable(grouping => grouping
                                            .Groups(groups =>
                                            {
                                                groups.Add(p => p.ProductName);
                                            })
                                      )
    )
    <p>
        <button class="k-button">
            Display selected products</button>
    </p>
}
}

Version: 2014.1.528.545 Dev

Thanks for helping

Grid

answered on 10 Jun 2014

1 answer

116 views

Four grids on Page

Hi everyone.
I have question
I created four grids on one page.

@(Html.Kendo().Grid<SupplierModel>()

.Name("SubmittedGrid")

.Columns(columns =>

{

columns.Bound(p => p.SupplierId).Title("ID");

columns.Bound(p => p.ClientName);

columns.Bound(p => p.Name).Title("Supplier");

columns.Bound(p => p.SupplierGroupName).Title("Group");

columns.Bound(p => p.ShortName);

columns.Bound(p => p.Address1);

columns.Bound(p => p.Address2);

columns.Bound(p => p.RejectReason).Title("Reason");

columns.Bound(p => p.SupplierId).Title(" ").Template(@<text>

@Html.ActionLink("Review", "Edit", new { supplierId = @item.SupplierId.Value })

</text>);

//columns.Command(command => command.Edit()).Title(" ");

})

.Pageable()

.Sortable()

.Selectable()

.DataSource(dataSource => dataSource.Server()

.PageSize(GlobalVariables.DefaultPageSize)

.Model(model =>

{

model.Id(p => p.SupplierId);

})

.Read(read => read.Action("GetNewSuppliers", "Requestor"))

.Update(update => update.Action("Edit", "Requestor"))

).Resizable(resize => resize.Columns(true))

)

@(Html.Kendo().Grid<SupplierModel>()

.Name("SubmittedGrid")

.Columns(columns =>

{

columns.Bound(p => p.SupplierId).Title("ID");

columns.Bound(p => p.ClientName);

columns.Bound(p => p.Name).Title("Supplier");

columns.Bound(p => p.SupplierGroupName).Title("Group");

columns.Bound(p => p.ShortName);

columns.Bound(p => p.Address1);

columns.Bound(p => p.Address2);

columns.Bound(p => p.RejectReason).Title("Reason");

columns.Bound(p => p.SupplierId).Title(" ").Template(@<text>

@Html.ActionLink("Review", "Edit", new { supplierId = @item.SupplierId.Value })

</text>);

//columns.Command(command => command.Edit()).Title(" ");

})

.Pageable()

.Sortable()

.Selectable()

.DataSource(dataSource => dataSource.Server()

.PageSize(GlobalVariables.DefaultPageSize)

.Model(model =>

{

model.Id(p => p.SupplierId);

})

.Read(read => read.Action("GetSubmittedSuppliers", "Requestor"))

.Update(update => update.Action("Edit", "Requestor"))

).Resizable(resize => resize.Columns(true))

)

@(Html.Kendo().Grid<SupplierModel>()

.Name("ApprovedGrid")

.Columns(columns =>

{

columns.Bound(p => p.SupplierId).Title("ID");

columns.Bound(p => p.ClientName);

columns.Bound(p => p.Name).Title("Supplier");

columns.Bound(p => p.SupplierGroupName).Title("Group");

columns.Bound(p => p.ShortName);

columns.Bound(p => p.Address1);

columns.Bound(p => p.Address2);

columns.Bound(p => p.RejectReason).Title("Reason");

//columns.Command(command => command.Edit()).Title(" ");

})

.ToolBar(toolBar =>

{

toolBar.Template(@<text>

<div class="toolbar-to-right">

<label>Supplier:</label>

<span class="k-textbox">

<input id="supplierFilter" />

<a href="#" class="k-icon k-i-search"> </a>

</span>

</div>

</text>);

})

.Pageable()

.Sortable()

.Filterable()

.Selectable()

.DataSource(dataSource => dataSource.Server()

.PageSize(GlobalVariables.DefaultPageSize)

.Model(model =>

{

model.Id(p => p.SupplierId);

})

.Read(read => read.Action("GetApprovedSuppliers", "Requestor"))

.Update(update => update.Action("Edit", "Requestor"))

).Resizable(resize => resize.Columns(true))

)

@(Html.Kendo().Grid<SupplierModel>()

.Name("RejectedGrid")

.Columns(columns =>

{

columns.Bound(p => p.SupplierId).Title("ID");

columns.Bound(p => p.ClientName);

columns.Bound(p => p.Name).Title("Supplier");

columns.Bound(p => p.SupplierGroupName).Title("Group");

columns.Bound(p => p.ShortName);

columns.Bound(p => p.Address1);

columns.Bound(p => p.Address2);

columns.Bound(p => p.RejectReason).Title("Reason");

columns.Bound(p => p.SupplierId).Title(" ").Template(@<text>

@Html.ActionLink("View", "Edit", new { supplierId = @item.SupplierId.Value })

</text>);

//columns.Command(command => command.Edit()).Title(" ");

})

.Pageable()

.Sortable()

.Selectable()

.DataSource(dataSource => dataSource.Server()

.PageSize(GlobalVariables.DefaultPageSize)

.Model(model =>

{

model.Id(p => p.SupplierId);

})

.Read(read => read.Action("GetRejectedSuppliers", "Requestor"))

.Update(update => update.Action("Edit", "Requestor"))

).Resizable(resize => resize.Columns(true))

)

And I have controller with four actions

public ActionResult GetNewSuppliers([DataSourceRequest] DataSourceRequest request)

{

var data = service.GetSuppliersByStatus(SupplierStatusEntity.SavedDraft).Where(s => string.Equals(s.PINUserName, User.Identity.Name, StringComparison.OrdinalIgnoreCase)).Select(SupplierConverter.Convert);

return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

public ActionResult GetSubmittedSuppliers([DataSourceRequest] DataSourceRequest request)

{

var data = service.GetSuppliersByStatus(SupplierStatusEntity.Submitted).Where(s => s.PINUserName == User.Identity.Name).Select(SupplierConverter.Convert);

return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

public ActionResult GetApprovedSuppliers([DataSourceRequest] DataSourceRequest request)

{

var data = service.GetSuppliersByStatus(SupplierStatusEntity.Approved).Where(s => string.Equals(s.PINUserName, User.Identity.Name, StringComparison.OrdinalIgnoreCase)).Select(SupplierConverter.Convert);

return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

public ActionResult GetRejectedSuppliers([DataSourceRequest] DataSourceRequest request)

{

var data = service.GetSuppliersByStatus(SupplierStatusEntity.Rejected).Where(s => s.PINUserName == User.Identity.Name).Select(SupplierConverter.Convert);

return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

But It does not work.

Is it possible to implement this variant?

Grid

answered on 10 Jun 2014

8 answers

1.4K+ views

Multiselect and form, not sending values back

Hi guys,
I have a mvc view (still a pretty standard one) to edit one of my entities..

@using (Ajax.BeginForm("Edit", "Role",

new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "ajaxRoleEditForm", OnSuccess = "OnRoleUpdated" }))

{

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

<fieldset>

<legend>ROLE_T005</legend>

@Html.HiddenFor(model => model.ID)

<div class="editor-label">

@Html.LabelFor(model => model.Name)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Description)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Description)

@Html.ValidationMessageFor(model => model.Description)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Functions)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Functions)

</div>

<p>

<input type="submit" value="Save" />

</p>

</fieldset>

}

the model is a view model because the actual table (using EF) has a cross table to a child entity and I dont want to bother with it.
so my wiew model is:

public class RoleViewModel

{

public int ID { set; get; }

public string Name { set; get; }

public string Description { set; get; }

[UIHint("FunctionMultiSelectTemplate")]

public IList<FUNCTION_T008> Functions { set; get; }

}

and the custom template for the list of functions is:

@model IList<Lme.WQ2.AccessControl.Dal.FUNCTION_T008>

@(Html.Kendo().MultiSelect()

.Name("FunctionMultiSelectTemplate")

.Placeholder("Select functions...")

.BindTo(ViewBag.Functions)

.Value(Model)

.DataTextField("NAME")

.DataValueField("ID")

)

at last my action looks like:

public ActionResult Edit(int id = 0)

{

ROLE_T005 role_t005 = db.ROLE_T005

.Include(x => x.ROLE_FUNCTION_T010)

.Include(x => x.ROLE_FUNCTION_T010.Select(y => y.FUNCTION_T008))

.SingleOrDefault(x => x.ID == id);

RoleViewModel roleViewModel = new RoleViewModel()

{

ID = role_t005.ID,

Name = role_t005.NAME,

Description = role_t005.DESCRIPTION,

Functions = role_t005.ROLE_FUNCTION_T010.Select(x => x.FUNCTION_T008).ToList()

};

ViewBag.Functions = db.FUNCTION_T008.AsEnumerable();

if (role_t005 == null)

{

return HttpNotFound();

}

return View(roleViewModel);

}

now, when I hit the save button of the view, the function list is always null or empty...
What am I doing wrong?
Thanks
Fabio

MultiSelect

answered on 10 Jun 2014

1 answer

714 views

Use <span> in a grid column value

I'm trying to change the color of some column values by setting the data value of these to "<span class='redcolor'>value</span>"

This doesn't work as it just displays the span and everything as text in the column even though the table element renders as
<td role="gridcell"><span class='redcolor'>value</span></td>

Is there a different way to accomplish this? Thanks.

Dan

Grid

answered on 09 Jun 2014

3 answers

176 views

MVC Timepicker

All,

Is it possible to have a time picker with more than one column? My time selection can run all day, normally at 30-minute intervals and I would hate to have to scroll down like that. With the asp.NET version there is a property I can set, but not so here. I imagine it would be done with templating, but I am not sure how that would work.
I have the following definition:

<label for="TxtCloseTime">Close:</label>
@(Html.Kendo().TimePicker().Name("TxtCloseTime")
.Events(e => e.Change("VerifySelection"))
.Interval(30)
.Animation(a => a.Open(o => o.Expand(ExpandDirection.Vertical))))

Thanks,

Sean~

DatePicker

answered on 09 Jun 2014

1 answer

125 views

How to always show Upload control grid even when empty

My UI folks don't like the initial view of the Upload control with just the two offset "Select File" and "Upload File" buttons offset on a blank background. They would prefer that the file grid shows all the time from the beginning. So even before a file is selected, an empty row in the grid would be preferable. What is the simplest way to do this? Is there a Display attribute for "tr.t-no-data" class to accomplish this?

Thanks!
-Bob

Upload

answered on 09 Jun 2014

1 answer

565 views

kendogrid.datasource is undefined in Js file

I am not able to use kendo.data.datasource and also not kendogrid.datasource

Grid

answered on 06 Jun 2014