Questions on UI for ASP.NET MVC Forum

1 answer

148 views

I have a grid with a change event. When the change event is invoked a redirect takes place towards another page.
I want to add a column with a checkbox which does not cause the change event to be fired. The other columns must still cause the change event to be fired.
How can this be done?

The same is valid for the listview. I have a listview with a client template and I need to show a checkbox which doesn't cause the change event to be fired.

Grid

answered on 17 Jul 2013

1 answer

386 views

Mvc helper and datasource event

Hi,
I couldn't find any example of how to attach datasource events such as requestStart, requestEnd, or error using the Mvc Grid Helper. Can it be done?

General Discussions

answered on 17 Jul 2013

1 answer

1.9K+ views

Expand and Select Node with ID in TreeView

Hi,

I'm almost done with the code from the subject. The tree expands already to the given ID, but unfortunately it does not select the node given by ID

Edit: Just to clarify, because I read a few threads regarding this issue - I don't get any error messages nor do I get 'undefined' for any variables. The node just doesn't get selected.

function expandAndSelectNode(id, treeViewName) {

// get the Kendo TreeView widget by it's ID given by treeviewName

var treeView = $(treeViewName).data('kendoTreeView');

// find node with data-id = id

var item = $(treeViewName).find("li[data-id='" + id + "']").find(".k-in");

// expand all parent nodes

$(item).parentsUntil('.k-treeview').filter('.k-item').each(

function (index, element) {

$(treeViewName).data('kendoTreeView').expand($(this));

}

);

// get DataSourceItem by given id

var nodeDataItem = treeView.dataSource.get(id);

//get node within treeview widget by uid

var node = treeView.findByUid(nodeDataItem.uid);

$(treeView).select(node);

//treeView.select(".k-item:last");

}

I also tried $(treeView).select(item), since it should already point to the <span> item I want to select anyway. This didn't work.
Then I tried tried $(treeView).select(item.closest('.k-item')), since it points to the parent <li> element, but this didn't work either.
The uncommented line (treeView.select(".k-item:last")) was just for testing and works.

I'm a little bit stuck and glad about any hints.

TreeView

answered on 16 Jul 2013

1 answer

507 views

Creating a dropdownlist with a Guid as id

Hi,

I'am trying to create a dropdownlist with a guid as id :

Dim dropDownListFor = _htmlHelper.Kendo().DropDownListFor(Of Integer)(_expression) _
.BindTo(New SelectList(_collectionValeur, "Id", "Name")) _
.HtmlAttributes(_attributsHtml)

Id is a Guid
Name is a String

But I'm having the following error :

System.InvalidOperationException: Templates can be used only with field access, property access, single dimension array index, or single-parameter custom indexer expressions.

Any help please ?

DropDownList

answered on 15 Jul 2013

1 answer

107 views

Self-Referential Foreign Key field in Grid

I have a grid for a model Departments. Departments has a foreign key field ParentDepartmentKey. The foreign key field correctly generates a dropdown list with Departmens listed. However, if you add a new department, it is added to the grid, but the dropdown in the foreign key field is not updated and does not update.

Is it possible to have the foreign key field update when an item is added to the grid?

Grid

answered on 15 Jul 2013

1 answer

1.7K+ views

Applying .Format("{0:N}") to a ClientFooterTemplate in MVC

In my attempts to right align, and apply a {0:N} format to the Sum on a ClientFooterTemplate in MVC, I've got this far, but the format is not applied:

columns.Bound(e => e.BookValue).Title("Book Value ($)")

.ClientFooterTemplate("<div class=aright>#=sum#</div>").Format("{0:N}")

It's right aligned now, but still the sum is showing 7 decimal places.

Should I be doing anything to the Aggregate instead of in the ClientFooterTemplate ?

Ideas?

Grid

answered on 15 Jul 2013

4 answers

280 views

Editing a foreign key Grid Column shows a correct dropdown but does not select the correct value

Hi,

I'm having an issue with the Kendo Grid, using the MVC extensions.

I have a foreign key column defined which displays perfectly when the grid is shown. However, on edit, the dropdown (provided by a copy of the GridForeignKey.cshtml editor template) does not select the correct value for the record. This is the case whether we're using InCell, InLine or Popup editing.

To clarify, the dropdown shows all the correct available values, but the default is selected instead of the value in the record.

ViewModels:

public class BranchesViewModel

{

public IQueryable<BranchViewModel> Branches { get; set; }

public IEnumerable<RegionViewModel> Regions { get; set; }

}

public class BranchViewModel

{

[Editable(false, AllowInitialValue = true)]

[Required]

[Display(Name="Id")]

[HiddenInput(DisplayValue = false)]

public int BranchId { get; set; }

[Display(Name="GL Code", Order=2)]

[Required]

public string GLCode { get; set; }

[Display(Name="Region", Order=3)]

[Required]

[UIHint("RegionForeignKey")]

public int RegionId { get; set; }

[Display(Name="Branch Name", Order=1)]

[Required]

public string BranchName { get; set; }

}

public class RegionViewModel

{

public int RegionId { get; set; }

public string RegionName { get; set; }

}

Index View:

<h2>Branches</h2>

@(Html.Kendo().Grid<BranchViewModel>()

.Name("Branch")

.Columns(col =>

{

col.Bound(m => m.BranchName);

col.Bound(m => m.GLCode).Width(200);

col.ForeignKey(m => m.RegionId, Model.Regions, "RegionId", "RegionName").Width(180);

col.Command(cmd => { cmd.Edit(); cmd.Destroy(); }).Width(180);

})

.ToolBar(toolBar => toolBar.Create().Text("New Branch"))

.Editable(edit =>

{

edit.Mode(GridEditMode.InLine);

edit.DisplayDeleteConfirmation(true);

})

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

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

.Model(model => model.Id(b => b.BranchId))

.Read(read => read.Action("Branch_Read", "Branch"))

.Create(create => create.Action("Branch_Create", "Branch"))

.Update(update => update.Action("Branch_Update", "Branch"))

.Destroy(destroy => destroy.Action("Branch_Delete", "Branch"))

)

RegionForeignKey Partial (in Views/Branch/EditorTemplates/):
Note: this is what I'm using now, however if I revert to the GridForeignKey editor template the behaviour is the same.

@model int

@(Html.Kendo().DropDownListFor(m => m)

.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])

)

Controller Actions:

public ActionResult Index()

{

var model = new BranchesViewModel

{

Branches = _branchRepository.Get().Select(

b => new BranchViewModel

{

BranchId = b.Id,

GLCode = b.GLCode,

BranchName = b.BranchName,

RegionId = b.RegionId

}

),

Regions = _regionRepository.Get().Select(

r => new RegionViewModel

{

RegionId = r.Id,

RegionName = r.RegionName

}

).ToList()

};

return View(model);

}

// Ajax for branches

public ActionResult Branch_Read([DataSourceRequest] DataSourceRequest request)

{

var branches = _branchRepository.Get().Select(

b => new BranchViewModel

{

BranchId = b.Id,

GLCode = b.GLCode,

BranchName = b.BranchName,

RegionId = b.RegionId

}

);

return Json(branches.ToDataSourceResult(request));

}

I've scoured a number of other forum posts and haven't been able to find an answer. Any help you could give would be very welcome.

Grid

answered on 15 Jul 2013

0 answers

399 views

Editor Template with JavaScript/JQuery not working quite right

I am using an editor template to provide custom behavior in my grid when a user edits a record. The editor template .cshtml file is as follows:

@model string
@Html.TextBoxFor(s => s, new { id ="gradingSubItemGrade", @class="k-textbox" })
<script type="text/javascript">
$(document).ready(function () {
$('#gradingSubItemGrade').bind('keypress', function (e) {
if (e.keyCode == 13) {
var barcode = e.currentTarget.value;
GetJSON('/API/CoinReferenceInformation/ByBarcode?barcode=' + barcode,
function (data) {
$('#gradingSubItemGrade').val(data.Grade + data.GradeNumber);
},
function () { });
}
});
})
</script>

As you can probably see from the code sample, I am trying to send the text of the TextBox to a service (when [Enter] is pressed), then, upon receiving a response, override it with the results.

This almost works...the response comes back correctly, and the results are displayed in the TextBox. However, what is saved is what the user entered, not what is returned by the service.

Are there additional steps I need to do to notify the grid that the text has changed?

*** EDIT ***

Sorry, I found my answer a few posts below here

Grid

asked on 13 Jul 2013

4 answers

117 views

Ajax code not called correctly

I'm trying to add a new record using GridEditMode.PopUp, but my methods are called incorrectly and sometimes not called at all.
My grid is declared like this:

@(Html.Kendo().Grid<DigiBob.AppServices.ViewModels.Governance.Duties.AdhocTaskViewModel>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.ShortDescription).Width(50);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);

})

.ToolBar(toolbar =>

{

toolbar.Create();

})

.Editable(ed=>ed.Mode(GridEditMode.PopUp).TemplateName("AdhocTask"))

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

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

.Model(model => model.Id(c => c.ID))

.Create(update => update.Action("CreateAdhocTask", "Home"))

.Read(read => read.Action("GetAllAdhocTasks", "Home"))

.Update(update => update.Action("UpdateAdhocTask", "Home"))

.Destroy(update => update.Action("DestroyAdhocTask", "Home"))

)

With the Create method like this:

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult CreateAdhocTask([DataSourceRequest] DataSourceRequest request, AdhocTaskViewModel item)

{

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

{

_adhocTaskRepository = new AdhocTaskRepository(_context);

AdhocTask target = new AdhocTask();

target.ShortDescription = item.ShortDescription;

_adhocTaskRepository.Insert(target);

_adhocTaskRepository.Save();

item.ID = target.ID;

}

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

}

When I try to debug it, the code in the CreateAdhocTask method is not called consequtively. Instead the debugger jumps up and down between the lines until it finally reaches the last }
Debugging it again makes it jump around again, but in a different order. It seems to have a mind of it's own. It's working fine for the Read method.

More confusing is that it also calls the CreateAdhocTask method for the Update method, although a different method is supposed to be called there.
Also, the DestroyAdhocTask is completely ignored.

What would cause this?

Grid

answered on 13 Jul 2013

3 answers

111 views

Stop Combobox drop-down after value is removed

Hi,

Is it possible to stop the combo-box drop down from dropping down when a value is removed?

It can be reproduced on here http://demos.kendoui.com/web/combobox/api.html by selecting a value, highlighting it and pressing the delete key. The drop-down drops down, I would like to prevent that.

Because I have several drop-downs appearing above eachother and when the user is emptying the values, and trying to move to the next one down they are accidently selecting the values again. They can of course use tab and delete but I was curious as to whether this behaviour could be disabled.

Thanks
Emma

ComboBox

answered on 12 Jul 2013