'#' in Drop down list data can invalidate generated kendo template

[Jark Monster]

I have a drop down in a grid.  Some of my data contains the pound character '#'.

When I have an even number of occurrences of the '#' in my drop down choice data, there is no issue.  I assume this is because the characters cancel out.

However, when I have an odd number of choices, I get an Invalid Template error.  I assume that this is most likely me screwing something up, but I am also aware that the '#' character is used to help mark the beginning and end of kendo template logic.

Also, along with this issue, even if I avoid the meltdown of the template, I do get a a weird rendering of drop down values that have a '#' character when I exit that cell's edit mode.  I believe the garbled replacement for the pound sign is part of the generated template code (See attached image for this).

Grid code - Not that my drop down list is a ForeignKey column (Not sure if that's relevant, but I thought I'd point it out):

@(Html.Kendo().Grid(Model.EnterpriseModel.EnterpriseReferenceBook)
    .Name("EnterpriseReferenceTypeDictionaryGrid")
    .Columns(columns =>
    {
        columns.Bound(item => item.Value);
        columns.ForeignKey(i => i.RefReferenceTypeID,
            (System.Collections.IEnumerable)ViewBag.RefReferenceTypeFamilyListing, "RefReferenceTypeID", "Type");
        columns.Command(command =>
        {
            command.Destroy();
        }).Width(100);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
    .Navigatable(navigatable => navigatable.Enabled(true))
    .Pageable(pageAction =>
    {
        pageAction.PageSizes(new int[] { 25, 50 });
    })
    .Sortable()
    .Scrollable()
    .Filterable()
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events =>
        {
            events.Error("EnterpriseReferenceTypeDictionaryGrid_ErrorHandler");
        })
        .Model(model =>
        {
            model.Id(i => i.EnterpriseReferenceTypeID);
        })
        .Read(read => read.Action("GetEnterpriseReferences", "ReferenceGrid"))
        .Create(create => create.Action("CreateEnterpriseReferences", "ReferenceGrid"))
        .Update(update => update.Action("UpdateEnterpriseReferences", "ReferenceGrid"))
        .Destroy(delete => delete.Action("DeleteEnterpriseReferences", "ReferenceGrid"))
    )
)

Please let me know if there is anything else I can provide.

[Kiril Nikolov]

Hello Mark,

 
This behaviour is caused by the fact that Kendo UI Templates use "#"  as part of its syntax. As you already pointed out, when you have "#" in your data this can cause an unexpected behaviour. This is why you must escape that value. You can escape any literal "#" in JavaScript strings using "\\#" and in HTML script templates using "\#".

For more information about Templates, please follow this link:

http://docs.kendoui.com/getting-started/framework/templates/overview

Regards,
Kiril Nikolov
Telerik

[Jark Monster]

Thanks for the quick reply Kiril!

However, I am a bit concerned by this.  I completely understand the need to escape a '#' sign when it is part of a templates syntax, but I'd think that '#' symbols in data would be detected by kendo during template creation time. 

When our users create new options for this drop down in the future, they will not wish to have to remember if that if they want a value, say BLAH##, then they have to enter that into the system as BLAH\\#\\#.

Though it's possible I could detect this when the option is created and programmatically inset the escaping sequence, but this definitely appears to be something that should be handled by kendo natively.

Please let me know if there is a way (or something currently in development) that will allow data to be just that, data, such that it wouldn't be interpreted erroneously as syntax.

Thanks again!

best,
-mark

[Kiril Nikolov]

Hello Mark,

 
I tried to reproduce the problem, but using "#" in my Grid DropDown menu, did not break the template and the data was displayed correctly.

I posted the code in a JSBin - could you please check it out and reproduce the problem there, so we can investigate it?

Regards,
Kiril Nikolov
Telerik

[Jark Monster]

Kiril,

Thanks for putting together that example.

I believe the issue lies in that you are using a drop down template whereas I am using a Foreign Key column (which generated a Dropdown in the grid).

I have edited the JSBin to now show the error by switching it to mirror the Foreign Key column syntax in the FK Column example for the grid.

I have also prepared a small project using mvc that shows the error, but I am unable to upload it because of the file size.  Please let me know if you would like that as well, and what the best way to submit it would be.

Thanks!
-mark

[Kiril Nikolov]

Hello Mark,


The problem that you have is not related to the templates component in Kendo UI. The Grid works with the data provided by the DataSource. In this case the "categories" array is not part of the DataSource and the grid cannot read data outside if it. This is why -  "values:categories", will not work.

I would suggest you to concatenate the two arrays into one and then use this new array in your DataSource, so it can be accessed from inside the grid.

 

Regards,
Kiril Nikolov
Telerik

[Jark Monster]

Kiril,

That's fine if the issue isn't in the template per se, but just because the data is outside the grid isn't entirely the issue.

This data works fine if it has 0 or an even number of '#' present within the data.  It only breaks if an odd number of '#' are present within the data.  To me, this is definitely still an issue within kendo because data should never be misinterpreted as syntax.

That being said, with my implementation requirements, I can't add the options of the grid as a child to the row object (effectively moving it into the datasource.  E.g.  Product.Categories).  It must remain separate (I store it in the ViewBag) because of its use elsewhere in the application (not just used in this grid) and storing it there rather than in each place it's used cuts our memory use dramatically.  Please let me know if this is not what you had in mind with regards to your comment about concatenating the data.

Also, based off of the Kendo web examples, utilizing the ViewBag to store list options is common and has the appearance of being fully supported, save for this issue.

I do still have a asp.net mvc example waiting on my end if you'd like me to email it, I would be more than happy to do so.

best,
-mark

[Kiril Nikolov]

Hello Mark,

First of all I apologize for the delayed answer.

The natural cause of the problem is not the DropDown widget, but the Grid itself. And as we already discussed, the problem is that the "#" symbol is used in Kendo UI Templates. I have prepared a custom solution, that you can try in your project. 

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

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

Using the loadTextById() function you do not need to escape the "#" symbol in your data and it will be automatically loaded in the grid. 

Please try this solution and do not hesitate contact us again.
 
Regards,
Kiril Nikolov
Telerik

[Jark Monster]

Kiril,

I apologize for my delayed response as well.  I was taken off to another task, and I just got back to this.

I just wanted to confirm that this does resolve my issue.  Thank you for working with me on it, and have a great day!

[Jim]

Values in "lookup" lists often come from a database where # signs are perfectly valid, so this makes almost all grids with foreign key columns susceptible to this problem.   

Is it possible for Kendo to protect itself from the # sign and whatever else it is vulnerable to when it creates its internal JSON array of the foreign key lookup items?
if not, then we will all have to remember that and fashion our own way of dealing with this one special case.  

Are there other string characters that are incompatible with Kendo? 

Thanks,
Jim

[Kiril Nikolov]

Hello Jim,

I agree with you that this can cause some overhead and could be implemented by default in Kendo UI. This is why I would like to ask you to go to our uservoice section and open a thread there, so it can be considered for implementation in a future release.

There are no other symbols that should be escaped, the problem is that the "#" is used as part of the Kendo UI Template engine and this is why it is causing the misbehavior.
 
Regards,
Kiril Nikolov
Telerik