Questions on UI for ASP.NET MVC Forum

25 answers

875 views

Latest online resources for Kendo UI for ASP.NET MVC

Using UTC time on both client and server sides.
This project shows how to keep a DateTime property in UTC format on both server and client sides when using a Grid with Ajax Binding and editing.

General Discussions

answered on 09 Feb 2017

1 answer

103 views

Bind Column to row order

I have a column ("Sequence") that will contain an integer. Is there some way to bind the column ("Sequence")'s value to the order?

I'd like to use the Sortable control with a Grid so that when they drag the row it will change the Sequence column's value to reflect the order.

How can I go about doing this?

Grid

answered on 09 Feb 2017

3 answers

135 views

jQuery Dialog popup - style to look lyke kendo grid popup?

Hi,

I am using kendo grids, and the default kendo popup works in most cases, but in some advanced cases I have to popup a modal window using jQuery dialog.

I do this like so:

<div id="popupEdit">
<div id="dataContainer">
</div>
</div>

$(function () {
$("#popupEdit").dialog({
autoOpen: false,
height: 470,
width: 650,
modal: true
});

$("#addItem")
.button()
.click(function () {
$("#popupEdit").dialog("open");
});
});

The jQuery popup doesn't look nearly as nice as the kendo grid popup window.
How can I style the jQuery dialog popup to look very similar to the kendo grid popup??
Has anybody done this before??

The dataContainer div gets loaded via ajax when something happens on the screen.
Unless there is a way to popup a kendo window that would make it look like the grid popup?

Regards.

General Discussions

answered on 09 Feb 2017

3 answers

683 views

Column editor template; textbox format option not working

Hello!

I have this editor template: @Html.Kendo().TextBoxFor(model => model).Format("{0:n3}")

When I use this editor template to create a form, the numbers get formatted according to the format string with three decimal digits.

But when I use the editor template for a grid column (in-cell / batch editing), the format option is ignored. Instead, numbers are shown exactly the way they are delivered from the server.

However, grid client templates work perfectly:
columnTest.Format("{0:n3}"); // or
columnTest.ClientTemplate("#: kendo.toString('columnTest', 'n3') #");

How can I configure the numeric formatting of the editor templates?

Best regards,

Kaan

Grid

answered on 08 Feb 2017

1 answer

323 views

ListView DataSource calling Create Action Multiple times

So we've read the docs; done all the appropriate searching; yet cannot keep the listview from repeating calls to the create service.

According to the docs the listview datasource expects the item that was added to be returned. Here is our server side controller method:

[HttpPost]

public ActionResult CreateMultiSelectItem([DataSourceRequest] DataSourceRequest request, long questionId, SurveyQuestionMultiSelectItem item)

{

if (item != null && ModelState.IsValid)

{

var vm = new SurveyQuestionMultiSelectViewModel(_surveyQuestionService.GetById(questionId));

vm.SurveyQuestionDetails.Items.Add(item);

vm.UpdateRootSurveyQuestion(_surveyQuestionService);

}

return Json(new[] {item}.ToDataSourceResult(request, ModelState));

}

as you can see we are returning the exact item being created.

The Datasource setup for the listview is as such:

<div class="demo-section k-content wide">

<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>

@(Html.Kendo().ListView<LMI.QMIMS.Business.SurveyQuestions.SurveyQuestionMultiSelectItem>()

.Name("listView")

.TagName("div")

.ClientTemplateId("template")

.DataSource(source=>source

.Model(model=>

{

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

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

}

)

.Create(create=>create.Action("CreateMultiSelectItem","SurveyQuestion", new { questionId = Model.SurveyQuestionId }))

.Read(read=>read.Action("ReadMultiSelectItem","SurveyQuestion",new { questionId = Model.SurveyQuestionId}))

.Update(update=>update.Action("UpdateMultiSelectItem", "SurveyQuestion", new { questionId = Model.SurveyQuestionId }))

.Destroy(destroy=>destroy.Action("DeleteMultiSelectItem", "SurveyQuestion",new { questionId = Model.SurveyQuestionId } ))

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

)

.Pageable()

.Editable()

)

</div>

So am I missing something totally obvious? I do this sort of behavior in the Grid control all day long without this issue.

-Scott Singleton

ListView

answered on 07 Feb 2017

2 answers

481 views

Edit button height

I always have a heck of a time trying to find the right CSS style to override for things... Right now, I need to change the height of the Edit button in the grid... I hate all that extra spacing and want to make it slimmer so my rows in my grid look good, without all that additional padding... How can I do this?

Grid

answered on 07 Feb 2017

2 answers

108 views

Hierarchy cell smaller with CSS

Hello,

I want to have the "k-hierarchy-cell" smaller then the Standard (see Pictures) - how to do this?

robert

Grid

answered on 07 Feb 2017

3 answers

83 views

Strange row/cell alignment

As you can see in the attached image, there's a weird issue where the "editable" part of the cell doesn't align with the part of a row or cell that's highlighted.

So clicking on a cell to edit the value requires that you click on the "upper" part of the cell, and is very confusing and unusable.

I have a pretty default configuration:

@Html.Kendo().Spreadsheet().Name("TestSpreadsheet")

Thoughts?

Thanks!

Spreadsheet

answered on 06 Feb 2017

5 answers

211 views

MVC 6 Custom Toolbar

We are currently updating an application to use MVC 6 with the current set of beta release from Telerik with the MVC wrappers.We are running into one sticking point that the demos do not address and I cannot find anywhere in the docs where it does either.

On out pages we have multiple grids with custom toolbars deployed using the common syntax

       .ToolBar(toolbar =>
        {
            toolbar.Template(
                @<text>
                   //Bunch of code remove for brevity
                </text>);
        })

However, this throws an error and upon further inspection the toolbar.Template method doesn't exist. We did find ClientTemplate but we cannot seem to get this to work. How are we supposed to implement a custom toolbar now? We saw that there may be a way in which we could specify a ViewComponent but it was not very clear.

If you could provide us an example this would go a long way to us getting this out the door.. So far all of the other controls seem to be working no problem.

Thanks,
AJ

Grid

answered on 06 Feb 2017

15 answers

3.2K+ views

Bind grid to list property of the model with razor syntax

Hello!

I have a set of views to edit a model similar to this:

Person
ID
Name
Contacts -> List of Contact

Contact
ID
Description
Address
Email
PhoneNumber

I would very much like to use a KendoUI grid for CRUDing the Person's Contact list (mainly because of layout and styling purposes). That I said, How can I achieve this? I need to make the grid bound to that property of the Person being edited or created as is. I mean, I would like to have only one controller (let's say PersonController) that knows how to persist my Person.

Is this possible? Having a grid without controller actions ? Has anyone been in the same situation also?

Thanks!

Grid

answered on 06 Feb 2017