Questions on UI for ASP.NET MVC Forum

4 answers

189 views

Using MVC - Kendo lacks compared to AJAX, which will not work

I was using ASP.NET AJAX but switched to MVC for device and windowing reasons. I wrote a tool to create forms using ASP Rad controls that works very nice. I need to be able to the create all the controls in C# code and then feed them into the page for the user to use. I can find nothing that shows me how I would create controls in C# with Kendo. My guess at the moment is to create Kendo ui in server code using strings. That does not work with Rad, it requires objects to be created and added to collections which is a much better coding practice then creating strings (which does save memory and processing verses objects).

My preference, since I already have working Rad generating code, is to get Rad controls working in my ASP MVC 5 project, Visual Studio 2013.

I have an asax file that is loaded in a cshtml file using RenderPartial

@model SignupList.Models.FormGroupViewModel

@{

ViewBag.Title = "FormGroup";

}

<h2>Group Form </h2>

<div>

@{

Html.RenderPartial("GroupForm");

}

</div>

which loads

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GroupForm.ascx.cs" Inherits="SignupList.Views.Group.GroupForm" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI.ComboBox" tagprefix="cc1" %>

<h2>Join Form</h2>

<p>Create the membership form.</p>

<form id="form1" runat="server">

<telerik:RadTextBox ID="InputDateTimeWidth" InputType="Number" EmptyMessage="Pixels" Columns="12" MaxLength="10" RunAt="server"></telerik:RadTextBox>

</form>

This gives an error page from authentication providing an HTTP Exception caused by an unhandled exception

{"Error executing child request for handler 'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerWrapper'."}

Instead trying to put a RadTextBox in a form in a cshtml page without a runat results in nothing showing with no errors - just blank.

So, Rad does not seem to work at all and seems to be discouraged anyway. Browsing the forums seem to show Rad working in MVC, I do wonder what I need to do. Every time the question is asked the answer is don't use Rad even though there are clearly people using Rad controls.

I could use Kendo if I could create controls in server code AND if the Kendo editor was as good as the Rad one. The Rad ones seems to keep getting better while Kendo promises may be happening but are not shown in the demos. HTML View was promised several versions ago but is still not in any demo.

The Rad Editor has two very important features I require. An edit HTML view and the ability to download images and pick them for the document. Interesting that the Kendo controls are being pushed so much when the Rad ones are so much better. If you give me a way to do the HTML view, please provide actual instructions rather than a reference that does not really show how to do it. It is amazing how often code is given in partial solutions without instructions on where to put it.

Thanks,
George

General Discussions

answered on 12 Feb 2015

1 answer

176 views

Culture JS disappeared in 2014.3.1411

I've been using this script to get around errors with the grid saving Australian dates. In the latest release this file has disappeared and the problems are back.

<script src="@Url.Content("~/Scripts/kendo/2014.3.1411/cultures/kendo.culture.en-AU.min.js")"></script>

<script>
@{
var culture = System.Threading.Thread.CurrentThread.CurrentCulture.ToString();
}
kendo.culture("@culture");
var culture = kendo.culture();
culture.calendar.patterns.F = "dd MMM yyyy";
</script>

Grid

answered on 12 Feb 2015

6 answers

689 views

Strange behavior of kendo controls inside a window after reload from Telerik Asp.Net Ajax call

Hi there,
I've got the content of my kendo window not rendered correctly the first time after a reload of the usercontrol where the window is defined.
When I open this window a second time ( only from the client without any ajax call!) the content is rendered correctly.

So let me explain the structure of my software:
The existing project was initially developed with Telerik Asp.Net Ajax components. I follows an SPA approach where UserControls are loaded into an RADSplitter Pane.
Meanwhile we decided to replace RadControls with ASP.NET MVC Kendo UI controls. So we added ASP.NET MVC 5 to our project and defined an Area where all our new Pages/Controls are located.
The MVC code is injected into an Asp.Net ascx UserControl with this piece of code:

<telerik:RadScriptBlock ID="RadCodeBlockCompanyAdministrationPermissions" runat="server">

<script type="text/javascript">

$telerik.$(document).ready(function () {

var url = "/MVC/Permission/Index/<%=ParentObject.Id %>";

$.ajax(

{

type: "GET",

url: url,

success: function (msg) {

$("#mvcpartial").html(msg);

},

error: function (state, err) {

alert('ERROR: ' +state + ' - ' + err);

}

});

</script>

</telerik:RadScriptBlock>

This works just fine and for i.e. displaying data with kendo grid we don't have any problems.
In this case however, I want to open a kendo window from a custom command inside a kendo grid.

This is my grid :

@(Html.Kendo()

.Grid(Model)

.Name("grdPermissionGroup")

.Columns(column =>

{

column.Bound(p => p.Id).HtmlAttributes(new { @class = "permissionGroupId" }).Hidden(true);

column.Bound(p => p.CompanyId).HtmlAttributes(new { @class = "companyId" }).Hidden(true);

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

column.Command(cmd =>

{

cmd.Edit().Text(" ").UpdateText(" ").CancelText(" ").HtmlAttributes(new { title = ViewBag.Edit });

cmd.Destroy().Text(" ").HtmlAttributes(new { title = ViewBag.Delete });

cmd.Custom("ShowRoles").Text(" ").Click("addRole");

});

})

.ClientDetailTemplateId("roleDetails")

.DataSource(ds => ds

.Ajax()

.Model(model =>

{

model.Id("Id");

model.Field(f => f.Id).DefaultValue(Guid.NewGuid());

model.Field(f => f.CompanyId).DefaultValue(@Model.First().CompanyId);

})

.Create(create => create.Action("PermissionGroupCreate", "Permission"))

.Update(update => update.Action("PermissionGroupUpdate", "Permission"))

.Read(read => read.Action("PermissionGroups", "Permission").Data("additionalData"))

.Destroy(destroy => destroy.Action("PermissionGroupDelete", "Permission"))

.Events(e =>

{

e.Error("permissionGroupGrid_errorHandler");

})

)

.ToolBar(commands => commands.Create().Text("Neue Berechtigungsgruppe"))

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

.Selectable()

.Scrollable(builder => builder.Height(368))

.Sortable()

.Events(ev =>

{

ev.DataBound("onPermissionGroupGridRowBound");

ev.Edit("pgEdit");

ev.Change("pgChange");

ev.Cancel("pgCancel");

ev.Remove("pgRemove");

ev.Save("pgSave");

})

)

My window is opend through javascript in function addRole:

function addRole(e) {

var row = this.select();

permissionGroupId = row.find('.permissionGroupId').html();

var childGridName = 'grdRoleDetails_' + permissionGroupId;

if (!permissionGroupId) {

alert('Please select permissiongroup!');

return;

}

var childGrid = $("#" + childGridName).data("kendoGrid");

if (childGrid == null) {

this.expandRow(row);

}

childGrid = $("#" + childGridName).data("kendoGrid");

if (childGrid != null) {

var window = $('#wndAddRole').data("kendoWindow");

if (window == null) {

window = $("#wndAddRole").kendoWindow({

actions: ["Close"],

content: '/MVC/Permission/GetRoleWindowContent/' + permissionGroupId,

draggable: true,

height: "240px",

width: "425px",

resizable: false,

title: "AssignRole",

close: onRoleWindowClose,

}).data("kendoWindow");

}

window.center();

window.open();

} else {

_pendingAddItem = true;

}

The content of the window is this:

@model CargoGuard.WebPortal.Neu.Areas.MVC.Models.RoleViewModel

@{

var pgId = ViewBag.PermissionGroupId;

}

<div class="roleEditContainer">

@Html.HiddenFor(m => m.Id)

<div class="editor-row">

<div class="editor-label">

@Html.Label("Roles")

</div>

<div class="editor-field role-edit-field">

@(Html.Kendo().DropDownList()

.Name("drpRoleSelection")

.AutoBind(true)

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

.DataTextField("Name")

.DataValueField("Id")

.DataSource(ds => ds.Read(read => read.Action("GetAllRoles", "Permission", new{id=pgId})))

.OptionLabel(HttpContext.GetGlobalResourceObject("GlobalMVC", "OptionSelectRole"))

.SelectedIndex(0).Events(evt => evt.Change("onRoleDropDownChange"))

)

</div>

<div class="editor-row">

<div class="editor-label">

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

</div>

<div class="editor-field role-edit-field">

@Html.Kendo().TextBoxFor(m => m.Name).HtmlAttributes(new { style = "width:250px;" })

</div>

<div class="editor-row">

<div class="editor-label">

@Html.LabelFor(m => m.Description)

</div>

<div class="editor-field role-edit-field">

@Html.TextAreaFor(m => m.Description, new { @class = "k-textbox", style = "height:100px; width:200px;" })

</div>

<div class="k-edit-form-container">

<div class="k-edit-buttons k-state-default">

<a id="btnAssignRole" class="k-button k-button-icontext k-primary k-grid-update" href="#" title="Bearbeiten">

<span class="k-icon k-update"></span>

</a>

<a id="btnCancleAssignRole" class="k-button k-button-icontext k-grid-cancel" href="#" title="Bearbeiten">

<span class="k-icon k-cancel"></span>

</a>

</div>

<script>

$(document).ready(function () {

var dropDownList = $('#drpRoleSelection').data('kendoDropDownList');

dropDownList.dataSource.read();

dropDownList.refresh();

$('#btnAssignRole').click(function() {

var id = $('#Id').val();

var name = $('#Name').val();

if(name == null )

var url = '/MVC/Permission/AssignRole?id=' + id + '&permissionGrpId=' + '@pgId';

$.ajax(

{

type: "POST",

url: url,

success: function (msg) {

alert(msg);

var gridGroup = $("#grdPermissionGroup").data("kendoGrid");

var selectedRow = gridGroup.select();

var dataItem = gridGroup.dataItem(selectedRow);

var Id = dataItem.Id;

var grdRoleDetails = $('#grdRoleDetails_' + Id).data("kendoGrid");

grdRoleDetails.dataSource.read();

var window = $("#wndAddRole").data("kendoWindow");

window.close();

},

error: function (state, err) {

alert('ERROR: ' + state + ' - ' + err);

}

});

$('#btnCancleAssignRole').click(function () {

var window = $("#wndAddRole").data("kendoWindow");

window.close();

});

})

</script>

The first time this page is loaded and I click the button to open the window everything is rendered as expected: see Attachment CorrectWindow.png
When reloading the usercontrol from outside via an ajax call defined by RadAjaxManager, the window will be opened and centered, but the content is not rendered the kendo way as you see in BrokenWindow.png. If I then close the window and click the button a second time without any reload (only client side actions) the content is rendered correctly again.
I have googled a long time and found some postings that this could come from jquery defined twice. So I checked my project for this issue and took care that jquery is loaded only once, but the problem still exists.
I suppose, that this may derive from a timing problem, but this is hard to find out.
Thanks in advance for your support!

General Discussions

answered on 12 Feb 2015

1 answer

117 views

Reload the grid, but don't move the scrollbar

I would like to reload the grid without moving the scrollbar. Currently, if a user sorts the grid by clicking the columnheader, or hits the refresh button, the grid scrolls back to the start and the user needs to scroll back to see their data.

Grid

answered on 12 Feb 2015

1 answer

161 views

Sortable with Grid in Batch mode issues

I have a Grid that I want to edit in Batch mode. This all works as it should as in code below.

@(Html.Kendo().Grid<field>()

.Name("myGrid")

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

.ToolBar(toolbar =>

{

if (pnlViewUserAccess == PageViewType.Edit || pnlViewUserAccess == PageViewType.Create)

{

toolbar.Create().HtmlAttributes(new { @class = "ignoreDirty" });

toolbar.Save();

}

})

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

.Scrollable(s => s.Height("auto"))

.Columns(columns =>

{

columns.Bound(p => p.key).Title("Key");

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

columns.ForeignKey(p => p.fieldType, (System.Collections.IEnumerable)ViewData["FieldTypes"], "Value", "Text").Title("Field Type");

columns.Bound(p => p.valueLength).Title("Field Length");

columns.ForeignKey(p => p.searchable, (System.Collections.IEnumerable)ViewData["TrueFalse"], "Value", "Text").Title("Searchable");

columns.ForeignKey(p => p.access, (System.Collections.IEnumerable)ViewData["Access"], "Value", "Text").Title("Access");

columns.ForeignKey(p => p.active, (System.Collections.IEnumerable)ViewData["TrueFalse"], "Value", "Text").Title("Enabled");

columns.Bound(p => p.order).Title("Order");

})

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.PageSize(40)

.Model(model =>

{

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

model.Field(x => x.key).Editable(false);

model.Field(x => x.active).DefaultValue(true);

model.Field(x => x.searchable).DefaultValue(false);

model.Field(x => x.access).DefaultValue(3);

})

.Events(e => e.Error("handleAjaxError"))

.Update(update => update.Action("FieldDef_Update", "Forms"))

.Create(update => update.Action("FieldDef_Create", "Forms"))

.Read(read => read.Action("FieldDef_Read", "Forms", new { recordTypeOid = Model.Entity.Oid }))

)

I then had a requirement to be able to 'order' and save the order of the rows. I decided to use the Sortable - again this was fine I could drag the rows and then on the onChange event of Sortable I updated the Grid datasource Order numbers. All good!
However when I attempt to edit a cell I run into problems which I'll detail below:

String\Text cell:
1. dosnt retain the updated value or have the 'dirty' graphi iin top left of cell
2. wont allow me to mouse click the right of the cell text - i have to use the arrow keys to append to the text.
Numeric cell: cant use the spinners to update the number

On the Sortable widget I tried different variations of .Filter(), .Handler() etc.. but couldnt get it working properly. My Sortable code is below:

@(Html.Kendo().Sortable()

.For("#myGrid")

.ContainerSelector("#myGrid tbody")

.Filter("table > tbody > tr")

.Cursor("move")

//.Handler(".isSortable")

//.HintHandler("noHint")

.PlaceholderHandler("myGrid_placeHolder")

.Events(events => events.Change("myGrid_onChange"))

)

Sortable

answered on 11 Feb 2015

2 answers

1.3K+ views

DateTimePicker with seconds

We use the DateTimePicker for the DateTimePickerFor() method in our Asp.net MVC 5 web application. And it requires that the user can enter a date and time including seconds, however by default the Telerik UI only shows date and time until minutes. I cannot find a way for the text input box to show the seconds or allow the input of seconds. If I set TimeFormat to CultureInfo.CurrentUICulture.DateTimeFormat.LongTimePattern then I'll only show the seconds in the drop down, but the text input won't show it.

Is there a way to have this done?

DatePicker

answered on 11 Feb 2015

1 answer

282 views

Problem with DropDownList in a client template of a Grid after sorting by a column

Hello.
I use a grid. One of its columns is using client template which is building a DropDownList in the column. I have two problems:
1. When the user sorts the grid the grid is being reinitialized(refreshed) and therefore the client templates are being executed one more time. The input fields are shown, the js function attachDropDown() is executed but the DropDownList is not attached to the input fields. Have i made any mistake or there is more convenient way?
2. When the user selects something in some dropdowns and then he/she decides to sort the column the input data from these DropDownLists is lost because of the reinitialization of the grid.

This is the code for my view.

@{

var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

string fundsJson = serializer.Serialize(Model.Funds);

}

<script id="dropdown-template" type="x-tmpl-mustache">

<input type="hidden" name="[{{index}}].IndexInXml" value="{{indexInXml}}" />

<input id="_{{index}}__FundId" name="[{{index}}].FundId" style="width: 300px" type="text" />

{{attachComboBox}}

</script>

<script>

var currentDropDownIndex = 0;

var fundsJson =@Html.Raw(fundsJson)@(";")

function attachDropDown(dropDownIndex) {

jQuery("#_" + dropDownIndex + "__FundId").kendoDropDownList(

{

"dataSource": fundsJson,

"dataTextField": "FundName",

"height": 250,

"headerTemplate":

"<div class=\"dropdown-header\"><span class=\"k-widget k-header\">Fund</span><span class=\"k-widget k-header\">Reg</span></div>"

,

"template": "<span class=\"k-state-default\">#: data.FundName #</span><span class=\"k-state-default\">#: data.Reg #</span>",

"valueTemplate": "<span>#:data.FundName#</span>",

"dataValueField": "FundId",

});

}

function getDropDown(indexInXml) {

var view = {

index: currentDropDownIndex, indexInXml: indexInXml,

attachComboBox: function () {

(function (currentDropDownIndex) {

jQuery(function () {

console.log(currentDropDownIndex);

attachDropDown(currentDropDownIndex);

});

})(currentDropDownIndex);

}

};

var template = $('#dropdown-template').html();

Mustache.parse(template);

var rendered = Mustache.render(template, view);

currentDropDownIndex++;

return rendered;

}

function init() {

currentDropDownIndex = 0;

}

</script>

@(Html.Kendo().Grid<Administration.ViewModels.UnmappedFundInfoViewModel>(Model.ImportedFundData)

.Name("funds-mapping")

.Sortable()

.Columns(columns =>

{

columns.Bound(c => c.ImportedFundName)

.Title("Imported fund name");

columns.Bound(c => c.FundId).Title("Fund ID").Width(100);

columns.Template(@<text> </text>).Title("Linked fund").ClientTemplate("#= getDropDown(data.IndexInXml)#");

})

.Scrollable(x => x.Enabled(true).Height("250px"))

.DataSource(dataSource =>

dataSource.Ajax().ServerOperation(false)

)

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

)

<script>

$(document).ready(function () {

var grid = $("#funds-mapping").data("kendoGrid");

grid.bind("dataBinding", function () {

init();

});

</script>

DropDownList

answered on 11 Feb 2015

2 answers

275 views

Placeholder encding icon

with an input tag I can use a fontawesome icon in the placeholder use the following " find your school"
but with autocomplete this does not show as an icon.
I assume there is some sort of encoding going on, how can I get around this? thanks

AutoComplete

answered on 11 Feb 2015

1 answer

115 views

Show Lines Images

I'm trying to enable the ShowLineImages property for ASP.NET MVC TreeView.

How can I do this?

TreeView

answered on 11 Feb 2015

1 answer

207 views

Image / File Browser problems

I am implementing Kendo Editor with image and file browser capabilities.

I have followed the example in demos, and have run into a problem.

Image browser works fine when I use gif or jpeg files, but if I try to use a bmp file, I get a 403 error.

For file browser, I am unable to get a simple xls file to upload without a 403 error.

I know the code is working, as I can upload gif and xls files. Is there another configuration change or other piece of code that is not included in the Demo that needs to be added for me to change the file types accepted by the browser?

I tried the following:
.FileTypes(".bmp,.jpg,.jpeg,.gif,.png")

While that does restrict what the user can attempt, it doesn't allow me to use the file types I need.

Editor

answered on 09 Feb 2015