Questions on UI for ASP.NET MVC Forum

0 answers

182 views

Adding custom ActionLink in MVC Hierarchy Grid

Hi,

I have a working Kendo MVC Hierarchy Grid. In that, When the user clicks on link button to show up the child grid, then i need to show up an Actionlink with currently selected ID and following the child grid. I am able to create an Action Link before the child grid. But not ActionLink with Id which currently selected. Creating a new record in the child table through the parent Id should be possible when using Hierarchy grid. Is there any possibility to do this. Any help can be appreciated.

Grid

asked on 24 Sep 2012

5 answers

340 views

Warning: the VStudio2012 Extensions and new project wizard currently don't work for MVC4

I've reported this as a bug via a support ticket, but just wanted to warn anyone else who might be, or might be thinking of using the current extensions to Visual Studio 2012, either to create a new MVC4 project with KendoUI, or to use the "Telerik, KendoUI for ASP.NET MVC, Configure project" menu to configure a standard MVC4 project to use KendoUI:

My advice is don't until these problems have been fixed!

The new project wizard does not produce an MVC4 project when you ask it to, it produces an MVC3 one instead.
The configure project wizard does not currently do its job properly for MVC4 projects. (I have wasted hours on trying to find out why my project wouldn't work before realising that this was the reason, not something I had done in my code!). It seems to follow steps recommended for manual configuration of an MVC3 project and not those for an MVC4 one (e.g. if doesn't amend the bundles, seems to include jquery twice).

Until the bugs in these extensions/wizards are correct, if my own experience is anything to go by, you are likely to find your project is plagued with error messages that will send you off on wild goose chases (because actually they aren't closely related to the problem at all!) like:

"This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet"
(this can be a genuine error in some situations, but here it wasn't, it was caused by the kendoGrid method not being recognised in javascript) Moral [something which I'm not used to, having programmed server side for as long as possible]: keep the Javascript console open and watch out for any red warnings/error messages!

- when I scrolled my grid horizontally, the headings didn't move ...

Overall, I'm only about 30% happy with the way KendoUI has been trumpeted with great fanfare, whilst only half working with MVC4. In many cases the documentation has been wrong (I've had to point out corrections several times) and it is still very incomplete, and these extensions don't seem to have been tested much before release.
Rant over, but this is disappointing from Telerik, who seem to have such great products otherwise.

Installer and VS Extensions

answered on 24 Sep 2012

1 answer

255 views

Cascading DropDownList Child not updating

I have attempted to make my code as close to the example provided in the demos:
http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html

In the demo, when an item is selected from the parent I notice a server call is made to fill child DropDownList.
In my code, when an item is selected from the parent nothing happens. No call to the server is made. What is even stranger is that if I decide to click on the child DropDownList it then decides to make a call to the server. However, when that happens it does not send up the parent's ID as a parameter.

What am I doing wrong? Thoughts on how to debug this?

<div style="float: left; margin-right: 10px">

<input id="calendars" />

</div>

<div style="float: left; margin-right: 10px">

<input id="periods" />

</div>

<div class="clearfix"></div>

$(document).ready(function () {

$("#calendars").kendoDropDownList({

optionLabel: "Select calendar...",

dataTextField: "CalendarText",

dataValueField: "CalendarCode",

dataSource: {

type: "json",

serverFiltering: true,

transport: {

read: "http://www.someurl.com/AppName/SomeArea/SomeController/GetCalendars"

}

});

var periods = $("#periods").kendoDropDownList({

autoBind: false,

cascadeFrom: "calendars",

optionLabel: "Select period...",

dataTextField: "PeriodCode",

dataValueField: "PeriodCode",

dataSource: {

type: "json",

serverFiltering: true,

transport: {

read: "http://www.someurl.com/AppName/SomeArea/SomeController/GetPeriods"

}

}).data("kendoDropDownList");

});

DropDownList

answered on 21 Sep 2012

0 answers

153 views

Event after a Create/Update/Destroy

I want to know when a Create/Update/Destroy has successfully completed. Is there an event or some way to do that (it appears the Change event is a bit too generic for my needs)?

OK, I think I have it - use the RequestEnd and then check the 'type' on the event parameter.

Grid

asked on 21 Sep 2012

0 answers

109 views

Edit the date in the table

Has difficulty

in the table include editing and adding. But after adding the date of checking the writes that need a date! But the date of a?

Here is the code
Html.Telerik().Grid<Predlogenie>()
.Name("Orders_<#= ZaprosId #>")
.DataKeys(keys =>
{
 keys.Add(p => p.PredlogenieId);
})
.Columns(columns =>
{
    columns.Bound(o => o.Predlogau).Width(200).Title("Предлогаю");
 
    columns.Bound(o => o.DateIn).Title("Заезд").Width(100);
    columns.Bound(o => o.DateOut).Title("Выезд").Width(100);
 
    columns.Bound(o => o.Comment).Title("Комментарий");
    columns.Command(commands =>
    {
        commands.Edit().ButtonType(GridButtonType.Image);
        commands.Delete().ButtonType(GridButtonType.Image);
    }).Width(100);
})
.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text).ImageHtmlAttributes(new { style = "margin-left:0" }))
   .DataBinding(dataBinding => dataBinding.Ajax()
   .Select("_OrdersForEmployeeDetailsAjax", "Home", new { id = "<#= ZaprosId #>" })
   .Insert("_InsertAjaxEditing", "Home")
   .Update("_SaveAjaxEditing", "Home")
   .Delete("_DeleteAjaxEditing", "Home")
)
.Pageable()
.Editable(editing => editing.Mode(GridEditMode.InForm).InsertRowPosition(GridInsertRowPosition.Top))
.Sortable()
.Filterable()
.ToHtmlString());
Tell me where the defeathering?
Here's an example where I collected myhttp://demos.telerik.com/aspnet-mvc/razor/grid/editingajax

Grid

asked on 21 Sep 2012

1 answer

256 views

Binding Create action, null model

Hello I am tryint to bind create action from Kendo Grid:

@(Html.Kendo().Grid<CPSkla.Models.GlobalProperties>().Name("GlobalProperties")

.Columns(columns =>

{

columns.Bound(p => p.Id).Hidden();

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

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

columns.Command(command => command.Destroy());

})

.DataSource(dataSource => dataSource.Ajax().Batch(true)

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

.Create("GlobalProperty_Create", "Admin")

.Read("GlobalProperty_Read", "Admin")

.Update("GlobalProperty_Editing_Update", "Admin")

.Destroy("GlobalProperty_Editing_Destroy", "Admin")

)

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Save();

})

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

)

This is supposed to send Create action to my Admin controller (this works)

public ActionResult GlobalProperty_Create(List<GlobalProperties> models)

{

using (var db = new CPSkla.Models.CPSklaEntitiesCalculation())

{

foreach (GlobalProperties model in models)

{

db.GlobalProperties.Add(model);

db.SaveChanges();

}

return View(GetViewResult());

}

Now if I try to create ne record it will trigger my breakpoint in controller but the list (although it has Count=1 for one new record) has GlobalProperty object but with all values (Id,Name,Value) null.

My firebug shows that I have
models[0][id] 0
models[0][name] test
models[0][value] testssss
as a part of my parametres, how do I serialize that to my List?

Please help I was trying to find it but without success.

This thread is copy of http://www.kendoui.com/forums/ui/grid/binding-create-action-null-model.aspx

Grid

answered on 21 Sep 2012

5 answers

1.0K+ views

Unobtrusive validation attributes not rendering

I'm new to KendoUI, so I'm probably doing something stupid. When using the MVC wrapper and creating a control:

@(Html.Kendo().DropDownListFor(m => m.CardPayment.State)

.OptionLabel("Select state...")

.BindTo(new SelectList(Model.States, "Abbreviation", "Name"))

.DataTextField("Text")

.DataValueField("Value")

.HtmlAttributes(new { value = Model.CardPayment.State })

)

I'm not getting any data-val attributes rendered on the controls. This goes for all controls that I'm creating, not just the drop down list. All of my Kendo controls are not generating data-val attributes.

<span tabindex="0" style="" unselectable="on" class="k-widget k-dropdown k-header"><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Select state...</span><span class="k-select"><span class="k-icon k-i-arrow-s">select</span></span></span><input id="CardPayment_State" name="CardPayment.State" type="text" value="" data-role="dropdownlist" style="display: none; "></span>

I'm sure my model is correct, as when adding the line:
@Html.TextBoxFor(m => m.CardPayment.State)
directly under the above control, the data-val attributes are generated correctly.

<input data-val="true" data-val-required="You must enter the billing state for the card." id="CardPayment_State" name="CardPayment.State" type="text" value="">

[Display(Name = "State")]

[Required(ErrorMessage = "You must enter the billing state for the card.")]

[DataMember]

public string State { get; set; }

Am I missing something?
Thanks.

General Discussions

answered on 20 Sep 2012

3 answers

673 views

Cascading DropDownLists with empty datasource

I'm trying to use the cascading dropdownlist but I have a strange behaviour when the second dropdown datasource is an empty list (which happens sometimes in my project). The second dropdownlist is not clear and keeps the old data previously selected.

Example :
First dropdown is loaded with some "categories"
I select "Category1" in the first dropdown => second dropdown is loaded correctly with 2 "products"
I select one product "Product1" in my second dropdown => OK
I select "Category2" in the first dropdown which contains no products (the controller return an empty list) => "Product1" is still selected in the second dropdown!! The data is not cleared!

Here's my code :

<div class="row">

<span class="editor-label">

@Html.LabelFor(model => model.Categorie, true, true)

</span><span class="editor-field">

@(Html.Kendo().DropDownListFor(model => model.IdCategorie)

.Name("CategorieDropDown")

.DataTextField("Nom")

.DataValueField("IdCategorie")

.OptionLabel("Sélectionner une catégorie")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetAllCategories", "Article");

}).ServerFiltering(true);

})

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

)

</span>

</div>

<div class="row">

<span class="editor-label">

@Html.LabelFor(model => model.SousCategorie, true, true)

</span><span class="editor-field">

@(Html.Kendo().DropDownListFor(model => model.IdSousCategorie)

.Name("SousCategorieDropDown")

.DataTextField("Nom")

.DataValueField("IdCategorie")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetAllSousCategories", "Article")

.Data("filterCategorie");

})

.ServerFiltering(true);

})

.OptionLabel("Sélectionner une sous catégorie")

.Enable(false)

.AutoBind(false)

.CascadeFrom("CategorieDropDown")

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

)

<script>

function filterCategorie() {

return {

idCategorie: $("#CategorieDropDown").val()

};

}

</script>

</span>

</div>

DropDownList

answered on 20 Sep 2012

4 answers

370 views

can't get Model in EditorTemplate

public

class UserModel

{

public

IEnumerable<RoleModel> RoleModels { get; set; }

}

public

class RoleModel

{

public int Id { get; set; }

public string Name { get; set; }

public bool InRole { get; set; }

}
~User.cshtml
@(Html.Kendo().Grid<Mrjiou.Models.UserModel>()

.Name(

"Grid")

.Editable(editable => {

editable.Mode(

GridEditMode.PopUp).TemplateName("UserEditor"); })

.Columns(columns =>

{

columns.Bound(u => u.Name);

columns.Command(command => {

command.Edit();

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(m => m.Id))

.ServerOperation(

false)

.Read(read => read.Data(

"additional_data").Action("User_Read", "User"))

.Update(update=>update.Action("User_Update", "User"))

)

~UserEditor.cshtml:
@Html.LabelFor(m => m.Name)

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

@Model.RoleModels.Count()

@Html.EditorFor(m => m.RoleModels,

"UserRoleEditor")

the problem is i can't get RoleModels in UserEditor.cshtml,it's alway null. what's the problem?

General Discussions

answered on 20 Sep 2012

0 answers

175 views

MVC Kendo UI Upload control - Display image instead of button

Hi,

I want to customize the look of the "select" button in Kendo UI MVC Upload control. I want to display Image instead of "Select.." button.

How to accomplish this?

Thanks,
Suril

Upload

asked on 19 Sep 2012