Questions on UI for ASP.NET MVC Forum

1 answer

300 views

adding autocomplete to grid column

Hello
I have a grid razor as follows. How can I add auto complete to grid column and not to single text box.

@(Html.Kendo().Grid(Model)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(model => model.MEMBER_ID);

columns.Bound(model => model.R_MONTH);

columns.Bound(model => model.PRINT_YN);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

})

.ToolBar(toolbar =>

{

toolbar.Create();

})

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Events(events => events.Error("error_handler"))

.Model(p => p.Id(model => model.SR_NO))

.Create(update => update.Action("Editing_Create", "Repost"))

.Read(read => read.Action("Editing_Read", "Repost"))

.Update(update => update.Action("Editing_Update", "Repost"))

.Destroy(update => update.Action("Editing_Destroy", "Repost"))

)

AutoComplete

answered on 19 Nov 2012

1 answer

380 views

Creating a custom delete button - how do actually delete the row

I'm trying to create a custom Delete button for my grid that fires off a custom function. The only problem I'm having is actually deleting the row from the grid. How could I accomplish this?

Grid

answered on 19 Nov 2012

3 answers

567 views

[Solved] Insert with Popup template

I'm using the popup editing mode with a custom MVC template for editing, having just created an EditorTemplate with the name of my model. Within this template I have two DropDownLists, both bound using a similar method; each have a custom template and these are specified by way of UIHint metadata on my model properties. All this works fine for edits; the DDL values are posted back correctly, and I even see the background grid change dynamically as I change the values before doing the Update.

However, inserts don't work. The same edit template appears and the text fields update the background grid dynamically, but the DDLs don't. When posted back, the ID values don't have the ID values from the DDLs, but the text values. This of course causes validation to fail.

Edit: Sample project attached. Ignore the fact that the two DDL values don't show in the grid initially; they do in the full solution so I've just missed something here. But if you edit an item and select values from the two DDLs, that's fine. Not so with the Create.

Side question: when using the same template for Edit/Create can we change the title of the popup window?

Edit 2: Ok, more investigation this morning, after hacking a workaround. It looks like the request form variables come back different between Edit and Create, even though they use the same editor. I'm currently seeing the following in Request.Form:

DefaultWorkPoolId.Id
DefaultWorkPoolId.Name
DefaultWorkPoolId[Id]
DefaultWorkPoolId[Name]

Clearly the model binding can't bind these to the property, which is DefaultWorkPoolId, but the question is why the Create behaviour is different. It would be good to get an answer on this so I can remove the hacked code; this is only the first screenof many and I don't want to have to repeat this everywhere.

Grid

answered on 19 Nov 2012

0 answers

179 views

Connecting EntityFramework data with Grid IEnumerable problem.

Ok so my problem is maybe simple but I can't handle it i tried all known for me methods ...

Error looks like this:

The model item passed into the dictionary is of type 'System.Data.Objects.ObjectSet`1[Repository.Database.Book]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[Biblioteka.ViewModels.BookViewModel]'.

My Index:

@model IEnumerable<Biblioteka.ViewModels.BookViewModel>

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

@(Html.Kendo().Grid(Model)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.BookGenreId).Groupable(false);

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

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

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

)

My BookController:

namespace Biblioteka.Controllers

{

public class BooksController : Controller

{

//

// GET: /Books/

public ActionResult Index()

{

return View(GetData());

}

private IEnumerable<dynamic> GetData()

{

LibraryEntities ctx;

ctx = new LibraryEntities();

return ctx.Book;

}

private JsonResult GetView()

{

return Json(GetData());

}

And for help my class:

namespace Biblioteka.ViewModels

{

public class BookViewModel

{

public int BookId { get; set; }

public string Author { get; set; }

public string Title { get; set; }

public Nullable<System.DateTime> ReleaseDate { get; set; }

public string ISBN { get; set; }

public int BookGenreId { get; set; }

public int Count { get; set; }

public System.DateTime AddDate { get; set; }

public Nullable<System.DateTime> ModifiedDate { get; set; }

public BookViewModel()

{

}

public BookViewModel(Book book)

{

this.BookId = book.BookId;

this.Author = book.Author;

this.Title = book.Title;

this.ReleaseDate = book.ReleaseDate;

this.ISBN = book.ISBN;

this.BookGenreId = book.BookGenreId;

this.Count = book.Count;

this.AddDate = book.AddDate;

this.ModifiedDate = book.ModifiedDate;

}

public void Update(Book book)

{

book.BookId = this.BookId;

book.Author = this.Author;

book.Title = this.Title;

book.ReleaseDate = this.ReleaseDate;

book.ISBN = this.ISBN;

book.BookGenreId = this.BookGenreId;

book.Count = this.Count;

book.AddDate = this.AddDate;

book.ModifiedDate = this.ModifiedDate;

}

Grid

asked on 19 Nov 2012

0 answers

231 views

Kendo UI Grid different detail templates depending on condition

I have such grid defined

@(Html.Kendo().Grid<FieldViewModel>(Model.Fields)
    .HtmlAttributes(new { @class = "fullScreen" })
    .Name("formFields")
    .ClientDetailTemplateId("formFieldsTemplate")
    .Columns(columns =>
        {
            columns.Bound(e => e.Key);
            columns.Bound(e => e.DisplayName);
            columns.Bound(e => e.FieldTypeName);
            columns.Bound(e => e.Order);
            columns.Bound(e => e.IsMandatory);
            columns.Bound(e => e.Type);
        })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Selectable()
    .Resizable(resize => resize.Columns(true))
    .Groupable()
    .Filterable()
      .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Model(model => model.Id(e => e.Key))))

and details template

<script id="formFieldsTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<FieldViewModel>()
        .Name("FormField_#=Key#")
        .ClientDetailTemplateId("formFieldsTemplate")
        .Columns(columns =>
            {
                columns.Bound(e => e.Key);
                columns.Bound(e => e.DisplayName);
                columns.Bound(e => e.FieldTypeName);
                columns.Bound(e => e.Order);
                columns.Bound(e => e.IsMandatory);
                columns.Bound(e => e.Type);
            })
        .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("LoadFieldDetails", "Forms", new { formPath = Model.Schema, rootElementName = Model.Root ,fieldKey = "#=Key#" })))
        .Pageable()
        .Sortable()
        .Selectable()
        .ToClientTemplate())
</script>

As you can see I have Type property, so what I want to do is not to show any details view and no arrow on the entire row when Type property is set to the specific value. How can I achieve it?

Grid

asked on 19 Nov 2012

1 answer

154 views

AutoComplete occasionally just... doesn't work

I have 3 Kendo MVC AutoCompletes on a page, and they occasionally just decide not to work. I can't figure it out.

First of all, if I add a Change event, like so:

@(Html.Kendo().AutoCompleteFor(m => m.NewIssue.Responsible)

.MinLength(3)

.HtmlAttributes(new { @class="autocomplete" })

.Events(e => e.Change("removeTitle"))

.DataSource(ds => ds.Read(r => r.Action("GetUserNames", "Ajax"))

.ServerFiltering(true)))

It no longer calls my Ajax function to return user names. And of course, it doesn't drop down with values.

If I take out the Change event, sometimes it works and sometimes it doesn't. Sometimes it calls my Ajax function, gets a JSON list of users, but then doesn't dropdown with any values.

Here's another issue.

@(Html.Kendo().AutoCompleteFor(m => m.NewIssue.SiteNumber)

.MinLength(3)

.HtmlAttributes(new { @data_url = Url.Action("PopulateSite"), @class="autocomplete" })

.Events(e => e.Select("selectSite"))

.DataSource(ds => ds.Read(r => r.Action("GetSites", "Ajax"))

.ServerFiltering(true)))

This one calls it's Select event correctly when I select an item, but it also calls it's select event when I post the form using a regular Input Submit button. This one just blows my mind. I don't know how to fix this.

My project has 3 or 4 Kendo controls in it, and out of all of them, AutoComplete seems to be the most half-baked. It just doesn't seem reliable. I'm not doing anything crazy with them. I have 3 AutoCompletes in a form, one of them has a Select event, and I'm trying to add change events to the rest. I wonder if I should be using javascript to create these instead of the MVC wrapper, maybe that's causing issues? I really don't know.

Anyway, I'm not sure anyone can help me with the limited information I've provided, but I wanted to put it out here anyway. Thanks.

AutoComplete

answered on 19 Nov 2012

1 answer

176 views

Need to rollback to Q2 2012. Where to download?

Hi. I need to rollback to Kendo MVC Q2 2012. I lost some things by upgrading to Q3, such as my grid hover-over effects, and a dropdownlist in a Kendo modal Window is no longer able to have values selected by the mouse (not sure this is caused by the update, but I have no idea what else might cause it.)

Where can I download Q2 2012? The Telerik Control Panel doesn't seem to give me this option. Thanks!

General Discussions

answered on 19 Nov 2012

0 answers

83 views

Filter exemple for Kendo UI Grid

Hi

I'm trying to convert this example using Telerik Grid for Kendo Grid, but I had no success...
http://demos.telerik.com/aspnet-mvc/Grid/Filtering?theme=vista

How do I get the same result? After the submit, update the grid.
I have not seen anything like this in Kendo Demos.

Thanks

William

Grid

asked on 18 Nov 2012

0 answers

124 views

Read is never called, even after Save Changes

I've been trying to figure out why my Grid gets out of date and noticed that even after a Save Changes, the grid doesn't call my Read action. If I click on Cancel Changes after I save the changes then all is well (but it still never calls the Read) so I'm at a loss as to why the results end up showing 'undetermined' if I don't click on Cancel Changes and if there's a way to force the page to do whatever it is that Cancel Changes is doing after a Save.

Any ideas? My grid (which uses editor templates and a client template) is:

@model IEnumerable<Datamart.Models.ViewModels.LEAFundMap>

@{

ViewBag.Title = "CreateFundMap";

var snapshot = Session["snapshot_id"] ?? Request.Params["snapshot_id"];

}

<h2>CreateFundMap</h2>

@(Html.Kendo().Grid(Model)

.Name("Funds")

.Columns(cols =>

{

cols.Bound(p => p.entity_fund).ClientTemplate("#=entity_fund#");

cols.Bound(p => p.fund_desc).ClientTemplate("#=fund_desc.fund_desc#");

})

.ToolBar(commands =>

{

commands.Save();

})

.Editable(edit => edit.Enabled(true).Mode(GridEditMode.InCell))

.DataSource(ds => ds

.Ajax()

.Model(model =>

{

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

model.Field(p => p.entity_fund).Editable(false);

})

// Configure RU -->

.Read(read => read.Action("Fund_Read", "Draft").Data("additionalData"))

.Update(update => update.Action("Fund_Update", "Draft").Data("additionalData"))

//.ServerOperation(false)

.Batch(true)

.Events(events => events

//.Change("onChange") // commented out because it causes an infinite loop

.Error("onError")

)

// <-- Configure RU

)

<script>

function additionalData() {

return {

snapshot_id: "@snapshot"

};

}

function onError(e, status) {

if (e.errors) {

var message = "The following errors have occurred:\n";

$.each(e.errors, function (key, value) {

if (value.errors) {

message += value.errors.join("\n");

}

});

alert(message);

}

function onChange() {

var grid = $("#Funds").data("kendoGrid");

grid.dataSource.read();

}

</script>

Grid

asked on 18 Nov 2012

3 answers

257 views

AJAX AutoComplete not displaying the items

Hi. I just want to display a list of values that are retrieved serverside using AJAX. It calls the AJAX method successfully, but does not display the returned values.

Markup:

@(Html.Kendo().AutoComplete()

.Name("EditNameAutoComplete")

.DataSource(source =>

source.Read(read => read.Action("GetUsers", "Administration"))

.ServerFiltering(true)))

Method:

public JsonResult GetUsers()

{

string input = Request.Params["filter[filters][0][value]"];

var adValues = //Get names from Active Directory that start with our input

var users = adValues.Select(user => user.CommonName).ToList();

users.Sort();

return Json(users);

}

Should be simple enough, and it's calling the Ajax method, but not displaying anything afterward. It just acts like a normal textbox. I'm definitely returning strings. What am I doing wrong?

AutoComplete

answered on 16 Nov 2012