Questions on UI for ASP.NET MVC Forum

1 answer

89 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

104 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

469 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

306 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

141 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

135 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

150 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

841 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 =>

{

source.Read(read =>

{

read.Action("SuggestionSearch", "Search").Data("onAdditionalData");

})

.ServerFiltering(true);

})

.Template("#:results.Replace(dcfSearchBox.val(),\"<span style='font-weight: bold;'>#:dcfSearchBox.val()</span>\")#")

)

<br />

@(Html.Kendo().Button()

.Name("btnSubmit")

.HtmlAttributes(new { type = "submit" })

.Content("Search")

)

}

</div>

<script>

function onAdditionalData() {

return {

text: $("#dcfSearchBox").val()//,

//checkFilter: $("#dcfCheckFilter").is(':checked'),

//filterText: $("#dcfFilterText").val()

};

}

</script>

AutoComplete

answered on 23 Sep 2014

1 answer

606 views

ClientRowTemplate Double and Decimal Formatting

.Columns(columns =>

{

columns.Template(e => { }).ClientTemplate(" ").Title("Store Name");

columns.Bound(c => c.Value).Format("R {0:n2}");

columns.Bound(c => c.Quantity).Format("{0:n0}");

columns.Bound(c => c.ASP).Format("R {0:n2}");

})

.HtmlAttributes(new { style = "height: 900px;" })

.Events(ev => ev.DataBound("onDataBound"))

.ClientRowTemplate(

"<tr data-uid='#: uid #'>" +

"<td ><a href='/Dashboard/Store/#= StoreId #'>" +

"#: Element #" +

"</a></td>" +

"<td class='text-right' >R " +

"#: Value #" +

"</td>" +

"<td class='text-right'>" +

"#: Quantity #" +

"</td>" +

"<td class='text-right' >R " +

"#: ASP #" +

"</td>"+

"</tr>"

)

Hello

I would like to know how to format the #: ASP # for it to format to decimal with 2 digits ({0:n2})
Regards

Grid

answered on 23 Sep 2014

1 answer

199 views

Kendo Slider Tooltips works in one case not the other

If you see the attached images you'll notice that the slider on the right with the square drag handle has a working tooltip, but the slider on the left doesn't have a tooltip when dragged as you can see in the second image.

I compared the two MVVM based implementations, stripped out the unnecessary information and came up with this:

<input id="..." name="..." class="post-retirement" data-show-buttons="false" data-role="slider" data-min="0" data-max="2" data-small-step="0.01" value="" data-value="" data-bind="visible: isVisible, events: { change: onChange }" data-index="@i" data-tooltip="{format: '{0:p0}'}" data-toggle="tooltip" />

<input id="..." name="..." class="weight-split" data-show-buttons="false" data-role="slider" data-min="0" data-max="1" data-small-step="0.01" value="" data-value="" data-bind="visible: isVisible, events: { change: onChange }" data-index="@i" data-tooltip="{format: '{0:p0}'}" data-toggle="tooltip" />

As you can see they're almost identical apart from class names which are used only to style the drag handles differently.

The JavaScript that activates the tooltip and binds the MVVM objects looks like this:

//activate tooltips

$("[data-toggle=\"tooltip\"]").tooltip();

var postRetirementViewModel = kendo.observable({

isEnabled: true,

isVisible: true,

onChange: function (e)

{

//get the index for this row

var index = $(e.sender.element).data("index");

//removed for brevity

}

});