Handling special characters in foreign key combo boxes

[DominionZA]

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?

[Vladimir Iliev]

Hi Michael,

Currently the ForeignKeyColumn default ClientTemplate doesn't support sharp symbols out-of-the-box (as this character is used by KendoUI templates), however in current scenario you can define custom ClientTemplate which will support that special symbol:

.ClientTemplate("#=loadTextById(EmployeeId)#");

function loadTextById(EmployeeId) {
     var columnIndex = 1;
     var v = $("#Grid").data("kendoGrid").columns[columnIndex].values;
     for (var idx=0,length=v.length;idx<length;idx++) {
         if (v[idx].value == EmployeeId) {
             return v[idx].text;
         }
     }
}

Kind Regards,
Vladimir Iliev
Telerik

[DominionZA]

Thanks for the help. I can't see how to implement what you suggested though.
How would I use your suggestion within the context of what I am trying to achieve?

[DominionZA]

I modified my code as follows...

columns.ForeignKey(b => b.OreSourceId, (System.Collections.IEnumerable)ViewData["OreSources"], "Id", "Description")
                         .EditorTemplateName("OreSourcesDropDownList")
                         .ClientTemplate("#=loadOreSourceById(OreSource_Id)#")
                         .Title("Ore Source").Width(175);

And the function

function loadOreSourceById(oreSourceId) {
        var columnIndex = 1;

        var v = $("#Grid").data("kendoGrid").columns[columnIndex].values;

        for (var idx = 0, length = v.length; idx < length; idx++) {
            if (v[idx].value == oreSourceId) {
                return v[idx].text;
            }
        }
    }

Still the same result. What am I doing wrong?

[Vladimir Iliev]

Hi Michael,

 
From the provided information it's not clear for us what is the exact reason for this behavior (most probably the column index is not set correctly)  - could you please provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
Telerik

[DominionZA]

I think you are missing the point. I am trying to get YOUR solution working with MY code. The initial solution was not explanatory enough in how to apply it to the code I provided in the initial post.

Please stop the generic boiler plate response of "provide a working example". I have provided enough code.
I was provided a solution with no explanation of how to implement it and responded requesting how to implement it within the context of my own code in the first post and showing my attempt at doing it.

I am so close to abandoning KendoUI and looking elsewhere as the support is just not good. I have yet to receive a quick response to anything and the first response is actually helpful enough to enable me to complete that section of code.

Just go back to post 1, read the problem, see post 2 with the partial solution, then post 3 explaining the confusion as to how to use the solution in post 2.

KendoUI has become the bottleneck in the current project I am busy with due to the amount of time it takes to find solutions to problems and is becoming the primary reason we are struggling with late delivery. All coding goes smooth until we hit the UI.

[Vladimir Iliev]

Hi Michael,

I am truly sorry that you feel this way and I'd like to apologize for the inconvenience.  

Please note however that from the example that you provide it seems that the solution is correctly implemented. Also with current information it's not clear for us what is the exact reason for current behavior (if the columnIndex variable is set with the correct index of the ForeignKeyColumn). I understand that it might be difficult to create runable example, but without a small example that isolates the problem we cannot help much.


As a bottom line I would suggest to check the following blog post which contains more information about how to get the most of KendoUI support:

• How To Get The Most Out Of Your Kendo UI Support

Kind Regards,
Vladimir Iliev
Telerik