Questions on UI for ASP.NET MVC Forum

5 answers

418 views

Hi,

I am using "resizable:true" in Kendo Grid, but only filterable columns can be re-sized. Non-filterable (with "filterable:false") columns can't be re-sized. I have searched it on Kendo forums, but apparently no solution.

Regards
Zaheer

Grid

answered on 11 Jun 2014

5 answers

573 views

Kendo Grid Server Side Paging With Model Binding

Hi I have a kendo grid in my partial view.
And I have bind a model as the grid data source. And mention that my grid don't have a Read method. Instead of read method I have use the model.
Here is my view..
@model Project.MVC.Areas.Razor.Models.CustomerListModel

<div id="dvResultGrid">
@(Html.Kendo().Grid<Portal.Application.BoundedContext.ScreenPop.Dtos.Customer>(Model.CustomerList)
.Name("grdWindowResults")

.Columns(columns =>
{
columns.Bound(x => x.Name1).Visible(true);
columns.Bound(x => x.Name2).Visible(true);
columns.Bound(x => x.ContactName);
columns.Bound(x => x.BillingAddress1);
})
.Pageable()
.Sortable(x => x.Enabled(false))
.Scrollable(x => x.Height("auto"))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(5)
.Model(model =>
{
model.Id(p => p.CustomerId);

})
)
)
</div>
And what I have to do is, I need to do server-side paging for my grid. How can I do that with out a read method. Is there any option?

Grid

answered on 11 Jun 2014

3 answers

258 views

Change dynamicaly Image in ImageUrl

Hello,
Is it possible to change dynamically the Image (in ImageUrl) in my Tabstip?

@( Html.Kendo().TabStrip()

.Name("TabStripMaster")

.Items(parent =>

{

parent.Add().Text("Description")

.Selected(true)

.ImageUrl("~/Content/Common/Icons/Description.png")

May I use JScript?
Regards,
Bruno

TabStrip

answered on 11 Jun 2014

1 answer

426 views

EditorFor Validation Styles

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

81 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.1K+ 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

74 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

108 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.3K+ 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

698 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