Questions on UI for ASP.NET MVC Forum

1 answer

671 views

MVC Styles and Bootstrap Form-Control Class

What is the best way to get the Kendo MVC controls to honor the Bootstrap "form-control" class? I have already seen these two related resources:

http://www.telerik.com/forums/do-you-plan-to-create-bootstrap-3-compatible-theme-
http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap

I generally have no problem with the Bootstrap v.3 and the Telerik bootstrap theme working together. The key exception in my case is the "form-control" class. For example the controls (drop-downs, auto-completes, etc) do not wrap below the label as expected on a standard (non-horizontal) form. I often use the "for" Html Helper e.g. @Html.KendoDropDownFor.

MVC 5 standard For helpers are now good at allowing for the additional "{ @class = "form-control" } argument. Need to do something similar with the kendo controls

General Discussions

answered on 25 Sep 2014

1 answer

80 views

Update MVC grid with new, different columns

I have a mvc grid that is populated with a datasource generated by a datable, the problem is that when i change the datable result the columns of the grid doesnt change.

On the other hand the rows changes because i can see the number of items changed.

I would like to know how to change the columns when i change the datatable result.

Grid

answered on 25 Sep 2014

1 answer

99 views

Foreign Key Column Editable Issues

I've been fighting with the Foreign Key Colums and being able to edit them. I finally got it working, but it only saves if I click the Save Changes button.

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

If I change the editable.Mode to GridEditMode.InLine and I get An exception of type 'System.NotSupportedException' occurred in Kendo.Mvc.dll but was not handled in user code.

Any advice?

Grid

answered on 24 Sep 2014

3 answers

445 views

Local data binding with update.

I only need to show a few rows (say 5 -100) in my grid so I rather use local binding. But I need to use inline edit on a date column.
How do I go about doing this?

The current solution/examples uses ajax to read the data. I could take that approach and it would result in one extra unnecessary request. The bigger problem is, the query to read the data is a bit complex so I am using Native SQL and I am not sure how to mix that in with Kendo's DataSourceRequest.
My current code which I know is wrong when it comes to pagination.
var enterpriseAccounts = db.Database.SqlQuery<EnterpriseAccountsVM>(enterpriseAccountsQuery, new SqlParameter("accountType", AccountType.Enterprise)).ToList();
return Json(enterpriseAccounts.ToDataSourceResult(request));

I could solve all my problems by using client side pagination but have updates call the server. Is this possible?

Grid

answered on 23 Sep 2014

7 answers

225 views

Foreignkey column sends incorrect data to server with creating new row

Grid in inline edit mode.

@(Html.Kendo().Grid<Security.UserViewModel>()

.Name("Users")

.Columns(columns =>

{

columns.Bound(c => c.UserId).Hidden();

columns.Bound(c => c.UserName).Title("Логин");

columns.Bound(c => c.FirstName).Title("Имя");

columns.Bound(c => c.LastName).Title("Фамилия");

columns.Bound(c => c.Email).Title("E-mail");

columns.ForeignKey(c => c.FirstRoleId, (System.Collections.IEnumerable)ViewData["roles"], "RoleID", "RoleName").Title("Роль");

columns.Command(command =>

{

command.Edit();

command.Destroy();

});

})

.ToolBar(toolBar => toolBar.Create())

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

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

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

.Model(model => {

model.Id(u => u.UserId);

})

.Create(update => update.Action("Create", "Users"))

.Read(read => read.Action("Read", "Users"))

.Update(update => update.Action("Update", "Users"))

.Destroy(delete => delete.Action("Delete", "Users"))

)

When I add new row grid sends to the server blank "FirstRoleName" instead of "FirstRoleId". When I update the row all works fine.
Made temporary workaround:

$(function () {

var grid = $("#Users").data("kendoGrid");

// bind to the save event

grid.bind("save", function (e) {

if (e.model.isNew()) {

e.model.FirstRoleId = $("input#FirstRoleId").val();

}

});

I think it is a bug.

Grid

answered on 23 Sep 2014

4 answers

125 views

update the parent row - based on child-template "text/kendo-tmpl -

I want to add an image to parent row depending on the value in child row.
Below is my main grid and template code

If FeedBackForm.FeedBackQA[i].Answer is not null I need image on parent row
find complete code attached.
Please guide

.ClientDetailTemplateId("template")

    <script id="template" type="text/kendo-tmpl">
        <div>
            <div class="feedbackQuestion">
                # for (var i = 0; i < FeedBackForm.FeedBackQA.length; i++) { #
                <ul>
                    <li>#= FeedBackForm.FeedBackQA[i].Question #   <span class="feedbackanswer">    #= FeedBackForm.FeedBackQA[i].Answer #</span></li>
                </ul>

                # } #
            </div>

        </div>

    </script>

Grid

answered on 23 Sep 2014

2 answers

118 views

Extended functionality for Dependencies

Hello,
we are currently evaluating the Gantt for use in a Business App and missing some points.

We are looking for following functions/features
- how can a user edit/destroy a Dependency ?
- is it possible to tell the Gantt if one task is moved on the timeline, that all depending tasks should also move.

Many thanks
Thomas

Gantt

answered on 23 Sep 2014

1 answer

137 views

Capturing events when "Editable" is false.

I am trying to use the Scheduler to display events only - I don't want to use any of the Schedulers built in editing functionality - instead I would just like to use javascript events such as "Change" or "Navigate".

This works OK if I set the scheduler to Editable(true), however I don't want to be able to do things such as drag the events or delete them. If I set Editable to false it behaves as I would like except I can no longer capture any javascript events such as clicking on an item.

I'd like to have Editable as false but capture which item was clicked on, or if a blank date is clicked on I'd like to capture the date that was clicked.

The idea is that we would then load some event related information in another Partial View or something, it's for a user to browse, not to edit.

How can I achieve this with the scheduler?

Thanks.

Scheduler

answered on 23 Sep 2014

5 answers

811 views

How to bold matched text in suggestion list?

Hi. I'm attempting to bold matched text from the autocomplete textbox in the suggestions list and am having some difficulty. I'm passing a simple list of strings to the autocomplete control not an object. I know I need to use a template to accomplish what I'm trying to do. I realize my template line is completely wrong but I put there the kind of pseudo-code to convey the idea of what I want. If someone could nudge me in the right direction as to a possible solution I would be very much appreciative.
Thanks!

<div class="DCF">

@using (Html.BeginForm("Search", "Search", FormMethod.Post,

new { enctype = "multipart/form-data" }))

{

<span>DCF DB</span>

@(Html.Kendo().AutoComplete()

.Name("dcfSearchBox")

//.DataTextField("results") //commented as the list of strings do not need a dataTextField defined to display

.Filter("contains")

.MinLength(3)

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

.DataSource(source =>