Questions on UI for ASP.NET MVC Forum

3 answers

1.0K+ views

Model not initialized in grid popup editor.

I am having an issue trying to render a check listbox in a grid popup custom editor.
The popup renders with no problem but I get an error when trying to iterate through my collection to render the check boxes.

Custom editor code.

@model Smartrail.UI.ViewModels.DisplayPanelViewModel

<div id="columnsList" style="height: 110px; overflow: auto;border:solid; width:150px;">

@if (Model.Columns != null)

{

foreach (var column in Model.Columns)

{

var checkBoxId = "chk" + column.Id;

var tdId = "td" + column.Id;

<table width="100%">

<tr >

<td width="20px">

<input type="checkbox" id="@checkBoxId" value="@column.Id" />

</td>

<td id="@tdId" width="100px">

@column.ColumnCode

</td>

</tr>

</table>

}

</div>

Error Message

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

Line 4:

Line 5: <div id="columnsList" style="height: 110px; overflow: auto;border:solid; width:150px;">

Line 6: @foreach (var names in Model.Columns)

Line 7: {

Line 8: var checkBoxId = "chk" + names.Id;

Source File: d:\Dev\Accutrak\Smartrail02\SourceCode\trunk\SmartrailWeb\Areas\DisplayPanel\Views\Setup\_ColumnsTab.cshtml    Line: 6

The Model in the foreach loop is not initialized and the related collections are null. The above error is because Model.Columns is null.
I can see everything fine in the grid, and if I comment out the above code (to prevent the error), all my other controls render fine showing values from the same Model. I am not understanding why my Model is not initialized when trying to look through the collection.

Do I somehow need to pass the Columns collection from the grid to the popup when it renders? If so - how?

I have sat for 3 hours trying to figure this out as I try to not use the forums if I can help it (due to long times taken to respond, and most of the time responses just ending in "please post a working example" when the code is already self explanatory). I am however stuck in a corner and starting to take flack for late delivery. I literally consume many many hours trying to get KendoUI to work as I need it to, with almost no help from support ): I just don't have time to also have to create examples when the supplied code should be sufficient.

TIA

Grid

answered on 04 Oct 2013

6 answers

3.0K+ views

change row background color on change event

I'm using a Kendo UI Grid that is changing the bg color of each row due to a condition in the databound event like this:

function onDataBound(e) {

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

var gridData = grid.dataSource.view();

for (var i = 0; i < gridData.length; i++) {

var currentUid = gridData[i].uid;

if (gridData[i].CategoryID == 1) {

var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");

$(currenRow).addClass("green");

}

else if (gridData[i].CategoryID == 2 ){

var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");

$(currenRow).addClass("red");

}

else {

var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");

$(currenRow).addClass("yellow");

}

I have a custom column where 3 buttons are given to categorize. What I want to do now, is to change the background color of a row immideately, when one of these buttons is clicked. The background color changes, when the grid is reloaded, but this takes far too long 'cause the grid is filled with a lot of data. I only want to add e.g. the css class "green" to the affected row.
For example:

function SetGreen(sid, cid) {

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

cid =1;

var url = '@Url.Action("SetMethod","SetController")';

$.post(url, { SID: sid, CID: cid });

grid.saveChanges();

//right here I want to set the bg color for the affected row

}

thanks in advance

Grid

answered on 04 Oct 2013

2 answers

378 views

Keep ListView in edit mode after server-side error

I am using server-side validation for some model properties when editing in a ListView with an editor template. The errors are generated from a custom ValidationAttribute. The errors are generated properly, and I am able to display them when the Update button is pressed, but the ListView exits the edit mode, and I would like to prevent this so that the user can update the values.

Sample model property:

[CompareValues("PEEP", CompareValues.GreatThanOrEqualTo, ErrorMessageResourceName = "MAPGreaterThanPEEP", ErrorMessageResourceType = typeof(VentSettingStrings))]

public decimal? MAP { get; set; }

The ListView declaration in the view file:

@(Html.Kendo().ListView<VentSetting>(Model.VentSettingsList)

.Name("listView")

.TagName("div")

.ClientTemplateId("ventTemplate")

.Editable()

.DataSource(datasource => datasource

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

.Model(model => model.Id(m => m.VentSettingId))

.Read(read => read.Action("ReadVentSettings", "RunDetail"))

.Create(create => create.Action("CreateVentSetting", "RunDetail"))

.Update(update => update.Action("UpdateVentSetting", "RunDetail"))

.Destroy(destroy => destroy.Action("DeleteVentSetting", "RunDetail"))

)

The relevant parts of the EditorTemplate:

@using ELSORegistry.Helpers

@using Kendo.Mvc.UI

@model ELSORegistry.Areas.ECLS.Models.VentSetting

<div style="padding:10px">

<span>@Html.LabelWithTooltipFor(model => model.MAP)</span>

<span>@Html.TextBoxFor(model => model.MAP, new { @class = "k-textbox", style = "width:50px"})</span>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-update-button"><span class="k-icon k-update"></span>Save</a>

<a class="k-button k-button-icontext k-cancel-button"><span class="k-icon k-cancel"></span>Cancel</a>

</div

</div>

I borrowed the following scripts from an example using the Grid control, and modified (possibly not correctly) for the ListView:

$(function () {

var listView = $("#listView").data("kendoListView");

$(".k-add-button").click(function (e) {

listView.add();

e.preventDefault();

});

function handleError(args) {

if (args.errors) {

var list = $("#listView").data("kendoListView");

var validationTemplate = kendo.template($("#validationMessageTemplate").html());

list.one("dataBinding", function (e) {

e.preventDefault();

$.each(args.errors, function (propertyName) {

var renderedTemplate = validationTemplate({ field: propertyName, messages: this.errors });

document.getElementById("errorList").innerHTML += renderedTemplate;

});

}

};

According to the Grid example, the preventDefault() method should keep it in edit mode, but this does not work for me in ListView. Any help on this, or any other approach to the problem, would be appreciated. Another goal is to provide this as client-side validation as well, but I can save that for another post.

ListView

answered on 03 Oct 2013

2 answers

260 views

Find item in datasource from button click in template

I have a databound listview with the data being displayed via template. In my template I have a button. How can I get the associated data item when the button is clicked?

ListView

answered on 03 Oct 2013

4 answers

300 views

ComboBox: onchange event does not fired for Numeric Values

Hi,

The attached sample project is based on your combo box sample post along with other elements.

In this project combo box onchange event does not fired if it has numeric value. Below are details for the same.

             1. I have 2 combo boxes and 1 label in the attached project: Alphabet Combo, Numeric Combo and Selected Value:  Alphabet Combo has values: A-1, B-2, C-3, D-4 and Number Combo has values: 1-A, 2-B, 3-C, 4-D
             2. Select Alphabet combo by pressing letter 'A' or 'B' or 'C' or 'D' by using keyboard, onchange event fired and selected value and selected text will show on label control (working fine)

3. But I have done for Numeric Combo same as above, but it won't show selected value and selected text due to onchange event does not fired.

For testing,
    - Alphabet Combo:  Press 'A' by using keyboard and press Tab, it will show the selected value and text
    - Numberic Combo: Press '1' by using keyboard and press Tab, it wont show the selected value and text

Code for above requirement:
1) Alphabet Combo:
     @(Html.Kendo().ComboBox()
                      .Name("AlphabetCombo")
                      .Suggest(true)
                      .Filter("StartsWith").MinLength(0)
                      .HighlightFirst(true)
                      .Placeholder("Select fabric...")
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .BindTo(new List<SelectListItem>() {
                           new SelectListItem() {
                            Text = "Select", Value = "0"
                          },
                          new SelectListItem() {
                            Text = "A-1", Value = "1"
                          },
                          new SelectListItem() {
                            Text = "B-2", Value = "2"
                          },
                          new SelectListItem() {
                            Text = "C-3", Value = "3"
                          },
                          new SelectListItem() {
                            Text = "D-4", Value = "4"
                          }
                      })
                     .SelectedIndex(0)
                     .Events(events =>
                      {
                          events.Change("Combo_Change");
                      })
                )

2) Numeric Combo:
      @(Html.Kendo().ComboBox()
                              .Name("SampleData2")
                      .Suggest(true)
                      .Filter("StartsWith").MinLength(0)
                      .HighlightFirst(true)
                      //.Placeholder("Select fabric...")
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .BindTo(new List<SelectListItem>() {
                           new SelectListItem() {
                            Text = "Select", Value = "0"
                          },
                          new SelectListItem() {
                            Text = "1-A", Value = "1"
                          },
                          new SelectListItem() {
                            Text = "2-B", Value = "2"
                          },
                          new SelectListItem() {
                            Text = "3-C", Value = "3"
                          },
                          new SelectListItem() {
                            Text = "4-D", Value = "4"
                          }
                      })
                     .SelectedIndex(0)
                     .Events(events =>
                      {
                          events.Change("Combo_Change");
                      })
                )

3) Label to show selected value and text
   <b>Selected Value is : </b> <label id="lblSelectedValue" runat="server"></label>

4) OnChange Event: JavaScript code
      <script language="javascript" type="text/javascript">
        function Combo_Change(e) {
            var combo = e.sender;
            $('#lblSelectedValue').text(combo.value() + ', ' + combo.text());
        }
    </script>

Please help me to resolve the issue. Thanks in advance.

.

ComboBox

answered on 03 Oct 2013

1 answer

211 views

The editor loses the formatting when saving

Hello,

I have an issue with the Kendo Editor. I save some html using the ViewHtml options as in the screenshot (BeforeSaving). The data gets saved and when reloading it looks like screenshot ( AfterSaving ).

Can I do anything to get the editor to save as I type it with all the formatting ? Otherwise the html editor is pretty much unusable

Editor

answered on 03 Oct 2013

6 answers

609 views

Handling special characters in foreign key combo boxes

I am having an issue with combo boxes in my Kendo grid when the text includes special characters.

I have this setup...

// Grid column definition

columns.ForeignKey(b => b.OreSourceId, (System.Collections.IEnumerable)ViewData["OreSources"], "Id", "Description")

// Foreign key editor template

@using System.Collections

@using Kendo.Mvc.UI

@(Html.Kendo().DropDownList()

.Name("OreSourceId")

.DataTextField("Description")

.DataValueField("Id")

//.Value(Model)

.SelectedIndex(0)

.OptionLabel(">> Select <<")

.BindTo((IEnumerable) ViewData["OreSources"]))

// Filling of the ViewData

var dbDataService = GetService<IDBDataService>();

ViewData["OreSources"] = dbDataService.ToLookUp<OreSource>();

This generally works perfectly and no issues.
Then suddenly the entire grid stopped functioning properly (after user edits). All combos (there are many in the grid) stopped working, edit mode would not work, and the delete button generated an error (not important what the error is - just saying).

I tracked it down to being a dodgy text value in one of the records being used by the combobox.
This text "21 Central Reef BH 1#*" caused the page to break. If I updated the database and removed the #* then everything works perfectly again.
It is however a requirement by the client that they are able to use special characters as part of their naming conventions so I have to find a way to work around this.

Any ideas please?

Grid

answered on 03 Oct 2013

1 answer

126 views

change color of unselected tabs

Hi,

In the previous version of the controls I have used the theme builder to set the foreground and border color of tabstrip tabs, but this has stopped working since I have upgaded to the current version of the controls.

I have tried to import and edit my previous css in the theme builder on the telerik website, but I cannot find any option that changes these colors now?

Thank you

TabStrip

answered on 02 Oct 2013

1 answer

219 views

Scheduler and Google, MS etc.

Hi,

I have a question - maybe something simple and not really linked to Kendo, but to be honest, I just do not know: We want to integrate the scheduler in our web app, so that customers can use this calendar (all together) and then sync it to their mobile devices. I guess this needs to be done via google calendar, windows live or whatever.

Can you point me in some direction? Or is this not possible at all?

Thanks,
Volker

Scheduler

answered on 02 Oct 2013

5 answers

925 views

Cancelling grid data read ajax request

Hi,

I'm using Kendo grid within div and while reading data I'm blocking to prevent user activity on it. I need to put long process cancellation button in order to cancel ajax grid request.

$('#div').block({

message: '<h1 style="color:blue;">אנא המתן...</h1><br><input type="button" value="CANCEL" onclick="cancelSemHours()"/>'

});

On server side I'm supposed to implement following in data read action :

if (!Response.IsClientConnected)

{

Response.End();

}

How do I implement the client-side cancellation with kendo grid? (cancelSemHours function)

Thank you in advance,
Waiting for your kind and prompt reply
Shabtai

Grid

answered on 02 Oct 2013