Questions on UI for ASP.NET MVC Forum

1 answer

427 views

I want to change confirmation popup from synchronous browser popup to asynchronous popup (alertify). I found some old threads in Telerik MVC Extensions (http://www.telerik.com/community/forums/aspnet-mvc/grid/delete-a-row-programmatically.aspx), but this code is not working for me.

How can I delete row programatically?
I already attached to Delete event and prevent remove row, but I can't remove it programatically on positive confirmation callback (callback was called but nothing happens).

How prevent deleting row in client side too? - return false or e.preventDefault cancel remote delete call but row was removed from view.

Here is my javascript delete handler code:

function deleteRow(e) {

/* How prevent delete row in client side too - return false or e.preventDefault cancel remote delete call but row was removed from view */

alertify.confirm("dddd", function(result) {

if (result) {

e.sender.removeRow(e.row); /* not removing row */

}

});

return false;

}

Here is grid MVC builder code:

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

.Name("franchisesGrid")

.Columns(columns =>

{

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

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

columns.Command(command =>

{

command.Edit().Text(LocalizationResources.Update).CancelText(LocalizationResources.Cancel).UpdateText(LocalizationResources.OK);

command.Destroy().Text(LocalizationResources.Remove);

});

})

.Groupable()

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.ColumnMenu()

.ToolBar(toolbar =>

{

toolbar.Template(@<text>

<div class="row control-group">

<div class="span10">

<a class="btn k-btn-add k-grid-add"><span class="k-icon k-add"></span>@LocalizationResources.Create</a>

</div>

</text>);

})

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

.Reorderable(reorder => reorder.Columns(true))

.Editable(editable =>

{

editable.Mode(GridEditMode.PopUp).Window(builder => builder.Title("Title"));

editable.DisplayDeleteConfirmation(false);

})

.Events(builder => builder.Remove("deleteRow"))

.DataSource(dataSource => dataSource

.Ajax()

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

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

.Read("Get", "Home")

.Create("Create", "Home")

.Update("Update", "Home")

.Destroy("Remove", "Home")))

Grid

answered on 27 Aug 2013

6 answers

289 views

[Solved] Ajax binding for multiple series fails

Hi,

I have an existing legacy MVC project where I use Telerik MVC extensions. I'm now trying to migrate it to Kendo UI.
I have a little problem with scatter charts with uses ajax binding. If I have a single series, it works fine. But if I have more than one, it doesn't. This was working quite well in MVC extensions.

When I put a put a breakpoint in firebug, I see that chart.options.series[].data in case of a single series has a collection of objects which represent each data point. But in case of 2 series,
each chart.options.series[].data seems to have another array of 2 objects and inside it the data points. So my chart seems to have 4 sets of data for 2 series. I'm attaching a sample project.

Secondly I'd like the Kendo equivalent for these snippets of code

1. .YAxis(y => y.Numeric().MinorTickType(ChartAxisTickType.Outside))

2.

function formatXAxis(value) {

var hr = Math.floor(value);

var min = value - hr;

var newval = hr + (min * 6 / 10);

return $.telerik.formatString('{0:N}', newval).replace('.', ':').replace(',', ':');

}

Thanks and Regards

Achilles

Chart

answered on 27 Aug 2013

3 answers

114 views

[Solved] Getting started Kendo UI for ASP.NET MVC -problems

I reffered the below link to create a asp.net mvc3 project with kendo UI
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction
I use razor view. my index page is as follows

Index.cshtml
@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<title>Index</title>
<link href="../../KendoStyles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../KendoStyles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script src="../../KendoScripts/jquery.min.js" type="text/javascript"></script>
@*<script src="../../KendoScripts/kendo.all.min.js" type="text/javascript"></script>*@
<script src="../../KendoScripts/kendo.web.min.js" type="text/javascript"></script>
<script src="../../KendoScripts/kendo.aspnetmvc.min.js" type="text/javascript"></script>

</head>
<body>
<h1>Welcome to Kendo Samples</h1>
<div>
@(Html.Kendo().DatePicker().Name("Birthday"))
</div>
</body>
</html>

when i use kendo.web.min.js i get the error "Microsoft JScript runtime error: Unable to get value of the property 'extend': object is null or undefined"
with kendo.all.min.js it works fine. I get no error message.

What is wrong with my code if any?

General Discussions

answered on 27 Aug 2013

8 answers

2.8K+ views

Dropdownlist model binding behaviour

After several hours of trying, and googling, I realised, in order for my model (in the controller, after a postback) to register the value of my dropdownlist, the .Name property has to actually match the name of my model property.

This is how my dropdownlist looks like

@(Html.Kendo().DropDownListFor(m => m.EventTrigger.EventType)
                                      .Name("EventTrigger.EventType")
                                      .DataTextField("EventType")
                                      .DataValueField("EventType")
                                      .BindTo(Model.EventDefs))

Shouldn't this:

(m => m.EventTrigger.EventType)

be sufficient to bind the dropdownlist selected value to my model? Why is the following .Name("") necessary?

What is the purpose of (m => m.EventTrigger.EventType)?

DropDownList

answered on 26 Aug 2013

4 answers

191 views

Multiselect does not work when .Event(e => e...) is applied

Not quite sure if I'm going about this wrong or it's the widget that has a bug in it.
Whenever I use the .Event() in my code, the controller does not work properly. It transforms back to a textbox, and does not display the elements at all. I've even tried this with your code, found here:
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/multiselect/overview

This is your code:

@(Html.Kendo().MultiSelect()

.Name("multiselect")

.BindTo(new string[] { "Item1", "Item2", "Item3" })

.Events(e => e

.Select("multiselect_select")

.Change("multiselect_change")

)

<script>

function multiselect_select() {

//Handle the select event

}

function multiselect_change() {

//Handle the change event

}

</script>

This is my code:

@(Html.Kendo().MultiSelect()

.Name("tags")

.Placeholder("No tags selected for this unit")

.BindTo(new SelectList(Model.TagNames))

.Value(Model.TagNames)

.Events(e => e

.Select("tags_select")

.Change("tags_change")

)

)

<script>

...

</script>

Doing this results in the widget breaking, somehow. See attached images. I should also mention that the widget, when initialized without the .Event(), works. Allthough, it flickers before the initialization is completed and the inputbox, textbox or whatever it is before the css-styling is applied to it, appears.

MultiSelect

answered on 26 Aug 2013

2 answers

327 views

Panel bar load content from clicked item

Hello,

Is it possible to build a panel bar where the content is a grid of items retrieved by an ajax call ?
it could come from loading a view. How would you go about building something like this ?

PanelBar

answered on 26 Aug 2013

1 answer

107 views

dynamic custom commands

I have a grid with another grid inside the client detail. Each grid gets it data using ajax calls.

In the second grid I need to display various buttons against each row based on a value in a status field (let's call that StatusID)
The number of buttons varies from none to 5. I was thinking to put them all inside 1 column.
How can I achieve this ?

I am using the fluent grid declaration

After playing with it for a while I noticed this :

In my second grid ( aka the grid inside the ClientDetailTemplateID, i cannot use the bound values whatever I do

My column looks like this :

columns.Bound(p => p.PublishStatusID).ClientTemplate("#= PublishStatusID #");
As you can see this is just a test to get the value to display before I move on to building a button. I am getting an error telling me that PublishStatusID does not exist. In fact none of the bound properties can be accessed at all except for the one which is basically the key passed by the parent grid.
The data in the grid itself displays fine, but I cannot access it whatever I do in a ClientTemplate

The controller is setup to return data for the grid :
public JsonResult GetSomeData([DataSourceRequest] DataSourceRequest request, int someID)
and it returns this.Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

What's going on ?

Grid

answered on 26 Aug 2013

11 answers

695 views

[Solved] ImageBrowser with images from database

I'm trying to create an implementation of the imagebrowser where the images are read from a database table.

It reads the images correctly from the database, but they are being treated as folders for some reason. So it never calls the Thumbnail controller method, it just displays the default folder thumbnail. The same thing happens when I try to select an image. It doesn't call the Image method, but instead another call to the Read method.

Any ideas?

I've attached some snippets from my code. We are currently usin gKendoUI 213.1.514.

Regards,
Jan Erik

Editor

answered on 26 Aug 2013

5 answers

121 views

[Solved] Grid keyboard navigation and saving of NumericTextBox data

Hello all,

I'm experiencing an issue with keyboard navigation and saving for grids with batch editing enabled. I'm using the Kendo editor templates for Number and Currency in my grids where appropriate based on the model. When using the tab key to navigate through and edit the cells, the values typed in to the numeric textbox columns never get saved. I dug into this a little more and noticed that the grid's Save event is not being fired. Is there something special I need to do to get this to work? Or is it not supported to use the NumericTextBox control inside a grid cell? Thanks for the help!

To reproduce this with the Kendo Demo project, just add the .Navigatable() property to the editing.cshtml file in the grid folder.

Regards,
Brian

Grid

answered on 26 Aug 2013

1 answer

198 views

Ajax forms in PanelBar item content

Hi,

I'm noticing a weird issue when I try to use "@using (Ajax.BeginForm(...)) { }" within Items' Contents. All of the form elements that end up inside of each PanelBar item are all being rendered outside of the PanelBar (placed right before the rendered PanelBar's ul element). For example, this code:

@(Html.Kendo().PanelBar()

.Name("accordion")

.Items(bar =>

{

bar.Add().Text("One")

.Content(@<div>

@using (Ajax.BeginForm("OneSuccess", "Custom", new AjaxOptions {UpdateTargetId = "resultOne"}))

{

@Html.DemoPartial("Partial")

<div id="resultOne"></div>

}

</div>);