Questions on UI for ASP.NET MVC Forum

2 answers

1.3K+ views

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

277 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

272 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

112 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

201 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

305 views

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

302 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

198 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

answered on 05 Feb 2015

1 answer

791 views

Grid Toolbar with the Excel Export and Custom Dropdownlist

How do you add a DropDownlist to Grid Toolbar that is already showing the built in Excel toolbar button.

@(Html.Kendo().Grid<Reports.ReportRow>()

.Name("grdReport")

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read

.Action("AJAX", "Report")

.Data("GetReportParms")

)

.ToolBar(tools => {

tools.Excel();

tools.Template(@<text>

<div class="toolbar">

<label class="category-label" for="category">Version:</label>

@(Html.Kendo().DropDownList()

.Name("ddlField")

.DataTextField("Text")

.DataValueField("Value")

.AutoBind(true)

.Events(e => e.Change("fieldChange"))

.DataSource(ds =>

{

ds.Read("FieldType", "Common");

})

)

</div>

</text>);

})

All the examples I can find show either a DropDownList in a Toolbar Template OR the built in Excel toolbar button. I need both.

Thanks

Grid

answered on 05 Feb 2015

2 answers

791 views

Position a context menu

I have a bunch of buttons that each bring up the same context menu. I need the context menu to position itself at the mouse click on the button.

In ASP.NET this is accomplished by using code like this.

function OpenAddRowMenu(event) {

var contextMenu = $("#AddRowMenu");

if ((!event.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), event.relatedTarget))) {

contextMenu.show(event);

    }

else {

alert("Event error");

}

}



The button



<button class="btn btn-primary" onclick="OpenAddRowMenu(event); return false;">Add Row</button>

I cannot find anything on positioning a context menu or any possible parameters to show(). The MVC documentation is really thin and the examples only show so much.

Menu

answered on 05 Feb 2015