Questions on UI for ASP.NET MVC Forum

1 answer

174 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.4K+ 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

291 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

290 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

122 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

216 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

2 answers

325 views

[Solved] Non-editable column in InLine grid with dynamic items

The objects that are enumerated in my Kendo MVC Grid are of type dynamic:

@(Html.Kendo().Grid<dynamic

>()

...

I am using InLine editing. I am able to specify the editor for each of my fields as described here:

http://www.telerik.com/forums/inline-editing-mode-and-dynamic-object
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/editor-templates

I won't reiterate the approach that is described above, but in summary it involves adding a UIHint attribute to fields in the model, and then using EditorTemplateName to identify an editor template for the field (and that editor template refers to the field via the Name() method). This works.

The problem that I have is that many of my fields need to appear in non-editable columns. My hope was that I could get the grid to render those fields as is (no editor) by:

a. Omit the UIHint attribute from model properties that would not be editable
b. Not specify an EditorTemplateName for non-editable bound columns
c. Set Editable(false) when defining the model (as below):

.DataSource(d =>

{

d.Ajax()

.Model(m =>

{

m.Id("Id");

m.Field("Name", typeof(string)).Editable(false);

However, when I do this the grid fails to load and I see an exception in Fiddler:

[RuntimeBinderException: 'object' does not contain a definition for 'Name']

CallSite.Target(Closure , CallSite , Object ) +152

System.Dynamic.UpdateDelegates.UpdateAndExecute1(CallSite site, T0 arg0) +662

lambda_method(Closure , Object ) +133

Kendo.Mvc.UI.Html.GridDataCellBuilder`2.AppendCellContent(IHtmlNode td, Object dataItem) +131

Kendo.Mvc.UI.Html.GridDataCellBuilderBase.CreateCell(Object dataItem) +230

I have many fields and most of them wil be non-editable, so I would rather not, for example, create editor templates for each of them that contain disabled controls.

What is the best way to configure all my non-editable columns in an InLine grid that is bound to dynamic objects?

thanks,
Derek

Grid

answered on 06 Feb 2015

1 answer

330 views

Reference different column in grid bound to DataTable

Hi,

I'm binding my grid to a DataTable for displaying dynamic search results. I've followed the example on how to do binding with DataTable, but I was wondering if there is a way to reference a different column in the Template / ClientTemplate. I've tried what I regularly do when bound to a Model/ViewModel, but it doesn't seem to work for DataTables. I've tried both

This is what my grid looks like:

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

.Name("gridSearchResults")

.Columns(columns =>

{

foreach (System.Data.DataColumn column in Model.Result.Data.Columns)

{

if (column.ColumnName != "Id")

{

if (column.ColumnName == "Name")

{

columns.Bound("Name").Template(@<text><a href='" + Url.Action("Details", Model.Result.DataSource) + "/#= Id #'" + ">#= Name #</a></text>);

}

else

{

columns.Bound(column.ColumnName);

}

})

.DataSource(d => d

.Server()

.Model(m => {

m.Id("Id");

foreach (System.Data.DataColumn column in Model.Result.Data.Columns)

{

m.Field(column.ColumnName, column.DataType);

}

})

)

Model.Result.Data is of type DataTable. It renders all the columns fine, but I'd like the name column to be a hyperlink to the details page.. Any suggestions?

Thank you

Grid

answered on 06 Feb 2015

4 answers

210 views

Odd behavior in IE 10

All,

Please see the following video: http://www.screencast.com/t/9UbonHDdPK0 .

In this video it shows that the Drop Down list will close after the scroll bar has been clicked in order to go to a hidden portion of the list. at just past halfway in the video I changed focus to the Kendo.textarea that contains "asdf" and then went back to the drop down list and it works as expected. the exact same page will work fine in Chrome, Firefox, and IE 9. If I select the text area first and then select the dropdown list it works as expected.

Thoughts?

Regards,
Jimm

DropDownList