Questions on UI for ASP.NET MVC Forum

1 answer

326 views

Unable to get message error from dropdownlist

Hi,

Since we update to Kendo UI Complete v2012.3.1304 we start to have a problem on the data grids. The error message is always a empty string when the is a dropdownlist.

Inside the grid:

<select data-bind="value: GroupId" data-val="true" data-val-required="Erro message." id="GroupId" name="GroupId" class="k-invalid valid" aria-invalid="true">
<option>[Selecione]</option><option value="13">item1</option><option value="47">item2</option>
</select>
<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error"
style="margin: 0.5em;" data-for="GroupId" data-val-msg-for="GroupId" id="GroupId_validationMessage" role="alert"><span class="k-icon k-warning">
</span><div class="k-callout k-callout-n"></div>
</div>

function to get the list of erros:

var validator = $(this).kendoValidator().data("kendoValidator");
var val = validator.validate();
if (!val) {
var errors = validator.errors();
var errorList = [];
$.each(errors, function (key, value) {
errorList.push({ message: value });
return errorList;
});
}

function from kendo.web.min.js ->

_extractMessage: function (t, n) {
var i = this,
r = i.options.messages[n],
o = t.attr(g);
return r = e.isFunction(r) ? r(t) : r, a.format(t.attr(a.attr(n + "-msg")) || t.attr("validationMessage") || t.attr("title") || r || "", o, t.attr(n))
},

We start to debug kendo to identify the problem. We find out that executing this function, _extractMessage: , it returns a empty string because it generates a
attribute name like "data-val-number". To bybass the problem we change the attribute name from data-val-required" to "data-val-number" with jquery.

Before call $(this).kendoValidator().data("kendoValidator"); we run this this code:

$(this).find("select[data-val-required]").each(function (index) {

var message = $(this).attr("data-val-required");

$(this).removeAttr("data-val-required");

$(this).attr("data-val-number", message);
});

Can you help to find a better solution?

DropDownList

answered on 10 Jan 2013

2 answers

263 views

Unusual Grid use case

I have a particular use case / pattern for a grid in mind. I would like some input on if it is even possible, the best way to go about it or alternative approaches that might work. I'm asking this even though I know the answer is probably going to be 'No, the grid is not designed for that and can't be adapted to do so'; I'm asking because our back end data service is already set up to provide data and accept inputs in this way.

I have a customer management system which allows multiple profiles per customer. The profiles control the type and amount of products they will recieve as said products come into supply. There are numerous collections of sub-objects managed at the profile level (one-profile to many sub-configurations). The profile management data services already have a lot of logic in place for updating and audit logging - that is to say, every modification to a profile actually copies the whole profile, archives the old one and sets the new one up. This is so that customers and account managers both have visibility on who made what changes and when. Also, not all aspects of the profile are under direct control of the customer: discounts, promotions, advanced settings etc. can only be controlled by our account managers (essentially administrator level users).

So what I would like the grid to do is this:

Display a collection of sub-configurations (this part is trivial and already working)
When adding/creating new additions to the list, do not allow free-form input, only allow the user to select from a pre-approved list of objects. The list also needs to only show options which haven't already been added to the profile. I would prefer this to be displayed in a modal dialog that allows multi-selection. Need some help here.
When finished selecting new additions, display them in the grid without telling the server yet. (This is essentially batch editing and looks to be compatible with existing grid options.)
Some, but not all, fields are editable here. (I think I have this configured correctly via datasource options.)
Entire sub-configuration objects can be removed here. I know how to make this work, but it conflicts with the next requirement.
When saving changes, the entire collection needs to be posted back to the server as a whole. There needs to be only one action for this and it needs to send the entire collection with the most up-to-date entries the user has typed in the UI each time. Need some help here.

Regarding 2:
I can make a Kendo UI pop-up, load its content from an ajax controller with the correct entries in it. I can enable multi-select with a ListView or a Grid, get the selected rows and data items back etc. but I can't make it add the selected items to the current grid listing. Attempts to do so conflict with the datasource only wanting to use data actually from the server. Is there a way to dynamically add items to a datasource without them being part of the server response?

I have also tried to use the built in pop-up editing to add the items to the grid. This bypasses the problems in the previous approach - items that are being edited are displayed in the grid, waiting to be added to the server collection; so they're part of the datasource object without being part of the service call. But there are two other problems with this approach:

1) I can't get the service editor to select a whole object. I can get it to select part of the objects from the approved list using a foreign key setup, but that essentially lets the user mix-and-match pieces from different items on the pre-approved list.

2) I can't get the popup editor to allow multi-selection.

Is there an example I perchance overlooked? Or should I fall back on a single-item editor template (so the user is essentially just selecting the 'ID' of the object they want to add)? Is there multi-add available anywhere?

Regarding 6:
I can get the grid to batch its updates no problem. But I need them done in one call. Currently there is a call to the 'Create' action with just the new items followed by a call to the 'Destroy' action with just the deleted items. Handling these separately would result in two audit log entries being created because there is no way for the server to tie them together. Also, since they are fired one after another asynchronously, handling the on the server would result in a race condition as follows:

Create receives the list of items to add. It has to retrieve the current list, add the new items to the collection, save the collection with the items included which are about to be removed in the destroy call.
Destroy receives the list of items to remove. It retrieves the current list, almost always before the save operation has completed, it removes the items needing removal, saves the collection almost always without the items that were added in the create call.

Is there anyway to put the grid in an all-together batch edit mode? I realize this is bandwidth inefficient, but we gladly trade that off for the auditing and accountability provided by our backend data service.

Any help at all is appreciated.

Grid

answered on 09 Jan 2013

4 answers

414 views

problem with mvc crud grid examples : destroy function

Hello,

I can't get failure of delete action to work correctly in the crud grid examples

If I return an error from the server (usually because foreign key relation prevents delete):

public ActionResult DeleteModel([DataSourceRequest] DataSourceRequest request, tb_model_list model)
{
...
...
ModelState.AddModelError("modelcode", "Can't Delete.");
return Json(ModelState.ToDataSourceResult());
}

then the row is still deleted from the grid ?

Marcel

Grid

answered on 09 Jan 2013

3 answers

659 views

Detail Template example

Hello again,
I tried to make the Detail Template example from the local installed examples and it gives me this message

The following sections have been defined but have not been rendered for the layout page "~/Views/Shared/_Layout.cshtml": "HeadContent".

this is the cshtml

@{
    ViewBag.Title = "DetailGrid";
}

<h2>DetailGrid</h2>

@model IEnumerable<KendoUIMvcApplication2.ViewModels.EmployeeViewModel>

@{ Html.Kendo().Grid(Model)
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title).Width(200);
        columns.Bound(e => e.Country).Width(200);
        columns.Bound(e => e.City);
    })
    .DetailTemplate(e =>
    {
            Html.Kendo().TabStrip()
                    .Name("TabStrip_" + e.EmployeeID)
                    .SelectedIndex(0)
                    .Items(items =>
                    {
                        items.Add().Text("Orders").Content(@<text>

                                @(Html.Kendo().Grid(e.Orders)
                                        .Name("Orders_" + e.EmployeeID)
                                        .Columns(columns =>
                                        {
                                            columns.Bound(o => o.OrderID).Width(101);
                                            columns.Bound(o => o.ShipCountry).Width(140);
                                            columns.Bound(o => o.ShipAddress).Width(200);
                                            columns.Bound(o => o.ShipName).Width(200);
                                            columns.Bound(o => o.ShippedDate).Format("{0:d}");
                                        })
                                        .Pageable()
                                        .Sortable()
                                )

                        </text>);
                        items.Add().Text("Contact Information").Content(
                                @<div class="employee-details">
                                    <ul>
                                        <li>
                                            <label>Birth Date:</label>@e.BirthDate.Value.ToString("d")
                                        </li>
                                        <li>
                                            <label>Country:</label>@e.Country
                                        </li>
                                        <li>
                                            <label>City:</label>@e.City
                                        </li>
                                        <li>
                                            <label>Address:</label>@e.Address
                                        </li>
                                        <li>
                                            <label>Home Phone:</label>@e.HomePhone
                                        </li>
                                    </ul>
                                </div>);

                    })
                    .Render();
    })
    .RowAction(row =>
    {
        if (row.Index == 0)
        {
            row.DetailRow.Expanded = true;
        }
    })
    .Pageable()
    .DataSource(dataSource => dataSource.Server().PageSize(5))
    .Sortable()
    .Render();
}

@section HeadContent {
    <style scoped="scoped">
        .employee-details ul
        {
            list-style:none;
            font-style:italic;
            margin-bottom: 20px;
        }

        .employee-details label
        {
            display:inline-block;
            width:90px;
            font-style:normal;
            font-weight:bold;
        }
    </style>

And i cannot find it in the \shared where to look for this section,or maybe is not defined,in this case where should i define this?

Online example has a different approach more clear,but it doesn't show the actions from the controller like this

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title).Width(200);
        columns.Bound(e => e.Country).Width(200);
        columns.Bound(e => e.City);
    })
    .ClientDetailTemplateId("employeesTemplate")
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
        .PageSize(5)
    )
    .Sortable()
    .Events(events => events.DataBound("dataBound"))
)

<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

<script id="employeesTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("TabStrip_#=EmployeeID#")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Orders").Content(@<text>
                    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
                        .Name("Orders_#=EmployeeID#")
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.OrderID).Width(101);
                            columns.Bound(o => o.ShipCountry).Width(140);
                            columns.Bound(o => o.ShipAddress).Width(200);
                            columns.Bound(o => o.ShipName).Width(200);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
                        )
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate())
                </text>                        
                );
                items.Add().Text("Contact Information").Content(
                    "<div class='employee-details'>" +
                        "<ul>" +
                            "<li><label>Country:</label>#= Country #</li>" +
                            "<li><label>City:</label>#= City #</li>" +
                            "<li><label>Address:</label>#= Address #</li>" +
                            "<li><label>Home Phone:</label>#= HomePhone #</li>" +
                        "</ul>" +
                    "</div>"
                );                
            })
            .ToClientTemplate())
</script>

<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

@section HeadContent {
    <style scoped="scoped">
	    .employee-details ul
        {
            list-style:none;
            font-style:italic;
            margin-bottom: 20px;
        }

        .employee-details label
        {
            display:inline-block;
            width:90px;
            font-style:normal;
            font-weight:bold;
        }
    </style>

Which version is correct or better?
and for the version using the section,where do i have to declare that section,in _layout.cshtml or where and, how?

Grid

answered on 09 Jan 2013

1 answer

191 views

[Solved] Using ClientRowTemplate causes popup editing to not work

Hi,

I have a grid that is using ClientRowTemplate and when I add a new record the popup editor does not display, it just adds a blank uneditable record in the grid. Is it possible to use ClientRowTemplate and still us popup editing/adding?

Thank you,
David A.

Grid

answered on 08 Jan 2013

1 answer

291 views

[Solved] Template cells don't sort

Hello.
I have some problem with Grid.
I have some grid with colums: Id, firstName, lastName and template YearOfBirth...
Here is my viewModels

Person = kendo.data.Model.define({

id: "",

firstName: "",

lastName: "",

age: "",

myFunc: function () {

return 2013 - this.age;

}

});

viewModel = kendo.observable({

personArr: [],

loadDataFromController: function () {

personArr = new kendo.data.ObservableArray([]);

var vm = this;

$.ajax({

dataType: 'json',

url: '/Home/GetPersons',

success: function (json) {

vm.setData(json);

}

});

},

setData: function (json) {

for (var i = 0; i < json.length; i++) {

var temp = new Person();

temp.id = json[i].Id;

temp.firstName = json[i].FirstName;

temp.lastName = json[i].LastName;

temp.age = json[i].Age;

this.get("personArr").push(temp);

}

});

viewModel.loadDataFromController();

kendo.bind($('#PersonGrid'), viewModel);

and here is my KendoGrid initialization

<div id="PersonGrid">

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

.Name("Grid")

.Columns(columns =>

{

columns.Bound("id").Groupable(false);

columns.Bound("firstName");

columns.Bound("lastName");

columns.Template(@<text></text>).ClientTemplate("#=myFunc()#").Width(120).Title("Year of birth");

})

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

)

.Pageable(page => page.PageSizes(true))

.Scrollable()

.Filterable()

.HtmlAttributes(new Dictionary<string, object>

{

{"data-bind", "source: personArr" }

})

)

</div>

Everything is fine, but I can't sort my last column with template myFunc
How I can fix this ?

Grid

answered on 08 Jan 2013

3 answers

682 views

How to refresh grid from client?

I am trying

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

grid.dataSource.read();

but it doesn't work. I found another post in the non-mvc forum where somebody had to set "cache" to false. Is this required? If so, how do I set this cache setting using the MVC Helper?

Grid

answered on 07 Jan 2013

6 answers

446 views

Editing custom editor example

I would like to see the complete functional code for the "Editing custom Editor" for Grid ,because something is missing there(in the online example).
there is a line:

columns.Bound(p => p.Employee).ClientTemplate("#=Employee.EmployeeName#");

but who is ("#=Employee.employeeName") and also is correct that syntax? .i supose it should be a template.but where it is?

I would like to add inside the grid also the Category of the product(which means a Dropdownlist with all the categories), just like in the example,but the code is for Order-Employee case.either way is still missing something there that template and how is bound to that list of that FK in our case, CategoryID.
Or again,if i can get an complete functional example for MVC(cshtml file and the code from the controller) with Northwind database just like in the online example.
Again i mention that in the \Program files(x86)\Telerik\Kendo UI for ASP.MVC there is NO \Examples folder with the examples,it would be nice to have all those examples,if they work.

thanks in advance.

Grid

answered on 07 Jan 2013

9 answers

165 views

Grid sends obsolete data on update

Hi,

I am trying to buil a customer detail page with MVC4. On thisdetail page I have the grid listing all adresses of the customer. So far so good. When a user edits the data in the address grid and clicks "Save", the controller receives only the data which was valid before the user edited the address.

Html.Kendo().Grid(Model.Adresses).Name("AddressGrid")

.Columns(columns =>

{

columns.Bound(a => a.Name).Width(100);

columns.Bound(a => a.StreetLine1).Width(100);

columns.Bound(a => a.StreetLine2).Width(100);

columns.Bound(a => a.ZipCode).Width(100);

columns.Bound(a => a.City).Width(100);

columns.Bound(a => a.Country).Width(100);

columns.Bound(a => a.Type).Width(100);

columns.Command(cmd => { cmd.Edit(); }).Width(100);

})

.ToolBar(commands =>

{

commands.Save();

})

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

.DataSource(ds => ds.Ajax()

.Batch(true)

.ServerOperation(false)

.Model(m =>

{

m.Id(i => i.Id);

m.Field(i => i.Id).Editable(false);

m.Field(i => i.Name).Editable(true);

m.Field(i => i.StreetLine1).Editable(true);

m.Field(i => i.StreetLine2).Editable(true);

m.Field(i => i.ZipCode).Editable(true);

m.Field(i => i.City).Editable(true);

m.Field(i => i.Country).Editable(true);

m.Field(i => i.Type).Editable(true);

})

.Update(update => update.Action("Customer_Update", "Customer",new { Command = "Update" }))

)

Grid

answered on 07 Jan 2013

1 answer

91 views

Query for a field but dusplay another

Dear all,
What I wish to do is the following,
imagine having a feed that has two fields for example city, postcode and I wish in the autocomplete when someone types the city on select to autocoplete the postcode.

is it possible?

AutoComplete

answered on 07 Jan 2013