Telerik Forums
Kendo UI for jQuery Forum
6 answers
4.1K+ views

Hi!

Im getting an "invalid template" exception when initializing a grid.

This is the JS code:

jQuery("#uipoc_readwrite_messagelist_table").kendoGrid();

This is the complete exception message:

Invalid template:'<tr><td>#=Betreff#</td><td>#=Absender#</td><td>#=Erhalten#</td><td>#=#</td><td>#=#</td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<tr><td>'+(Betreff)+'</td><td>'+(Absender)+'</td><td>'+(Erhalten)+'</td><td>'+()+'</td><td>'+()+'</td></tr>';}return o;'

This is the html at the time the code is executed:

<TABLE id=uipoc_readwrite_messagelist_table>
<THEAD>
<TR>
<TH>Betreff</TH>
<TH>Absender</TH>
<TH>Erhalten</TH>
<TH></TH>
<TH></TH></TR></THEAD>
<TBODY>
<TR>
<TD><A id=uipoc_readwrite_messagelist_b0ca6719-1984-4f3f-8be4-9d4c5eaba774 href="#uipoc_readwrite_messagelist_b0ca6719-1984-4f3f-8be4-9d4c5eaba774" jQuery171046139815295798753="5">dad about ship hot light ill keys something smoke

something</A></TD>
<TD>Karen Mayer</TD>
<TD>07.02.2012 02:58:22</TD>
<TD><BUTTON id=uipoc_readwrite_messagelist_answerMessage_b0ca6719-1984-4f3f-8be4-9d4c5eaba774 type=button jQuery171046139815295798753="6">Antworten</BUTTON></TD>
<TD></TD></TR>
<TR>
<TD><A id=uipoc_readwrite_messagelist_08dda71c-e777-4436-82c8-634a779bfed0 href="#uipoc_readwrite_messagelist_08dda71c-e777-4436-82c8-634a779bfed0" jQuery171046139815295798753="7">out worn wicket on generated rabbit many ball to

rescue</A></TD>
<TD>Karen Mayer</TD>
<TD>09.03.2012 20:50:01</TD>
<TD><BUTTON id=uipoc_readwrite_messagelist_answerMessage_08dda71c-e777-4436-82c8-634a779bfed0 type=button jQuery171046139815295798753="8">Antworten</BUTTON></TD>
<TD></TD></TR>
<TR>
<TD><A id=uipoc_readwrite_messagelist_e7d8b8f6-708d-4547-bd31-8c05d3be2a2e href="#uipoc_readwrite_messagelist_e7d8b8f6-708d-4547-bd31-8c05d3be2a2e" jQuery171046139815295798753="9">library are words always plane days to computer

will</A></TD>
<TD>Lindsey Craft</TD>
<TD>11.01.2012 14:40:45</TD>
<TD><BUTTON id=uipoc_readwrite_messagelist_answerMessage_e7d8b8f6-708d-4547-bd31-8c05d3be2a2e type=button jQuery171046139815295798753="10">Antworten</BUTTON></TD>
<TD></TD></TR>
<TR>
<TD><A id=uipoc_readwrite_messagelist_5e64f31f-9cf1-413f-ae47-33816435e655 href="#uipoc_readwrite_messagelist_5e64f31f-9cf1-413f-ae47-33816435e655" jQuery171046139815295798753="11">smoke much many window this text of suspense died

of</A></TD>
<TD>Karen Mayer</TD>
<TD>17.12.2011 17:26:42</TD>
<TD><BUTTON id=uipoc_readwrite_messagelist_answerMessage_5e64f31f-9cf1-413f-ae47-33816435e655 type=button jQuery171046139815295798753="12">Antworten</BUTTON></TD>
<TD></TD></TR>
<TR>
<TD><A id=uipoc_readwrite_messagelist_eb2b1d0b-6071-456b-a675-bed1a3055fd6 href="#uipoc_readwrite_messagelist_eb2b1d0b-6071-456b-a675-bed1a3055fd6" jQuery171046139815295798753="13">rescue asked leader pique to handled always

captain</A></TD>
<TD>Chasity Conway</TD>
<TD>03.03.2012 19:41:40</TD>
<TD><BUTTON id=uipoc_readwrite_messagelist_answerMessage_eb2b1d0b-6071-456b-a675-bed1a3055fd6 type=button jQuery171046139815295798753="14">Antworten</BUTTON></TD>
<TD></TD></TR>
<TR>
<TD><A id=uipoc_readwrite_messagelist_311625ac-6b95-4c35-a6e0-79dbad0f62b3 href="#uipoc_readwrite_messagelist_311625ac-6b95-4c35-a6e0-79dbad0f62b3" jQuery171046139815295798753="15">others had constantly smoke will should worn when

ending</A></TD>
<TD>Nancy Stevens</TD>
<TD>18.02.2012 07:47:57</TD>
<TD><BUTTON id=uipoc_readwrite_messagelist_answerMessage_311625ac-6b95-4c35-a6e0-79dbad0f62b3 type=button jQuery171046139815295798753="16">Antworten</BUTTON></TD>
<TD></TD></TR></TBODY></TABLE>

Stefan
Telerik team
 answered on 04 Jul 2017
1 answer
144 views

Hi,

Just wanting to ask where we could find documentation related to KendoTemplates that are rendered via server side code.

For example, I have the following mark-up:

<k:KendoTemplate runat="server" TemplateId="percentageBox">
  <Template>
    <k:TextBox runat="server" ID="txtPercentage" PropertyName="Percentage" Width="100%">
      <Bindings>
        <Disabled Path="isFormModeRead" />
        <CssClass>
          <k:CssClass Name="isDisabled" Path="isFormModeRead" />
        </CssClass>
      </Bindings>
    </k:TextBox>
  </Template>
</k:KendoTemplate>

 

I can't seem to find relevant documentation for the server side components, and how to specify values for the markup.

I see a lot of KendoUI docs, but it is mostly focused on JS/HTML client side rendering.

Thanks.

Stefan
Telerik team
 answered on 04 Jul 2017
1 answer
148 views

Hello,

We have an MVC web app and have a kendo grid with batch editing.  One of the columns is a dropdownlist. (using columns.ForeignKey())

It works perfectly in FireFox.  However, it doesn't work at all in Chrome, and you have to double click in Internet Explorer (shows a textbox on first click, then ddl after second click).

To demonstrate the behavior, I created a new telerik MVC project with a grid.  I noticed that the template uses jQuery version 1.10.2.  Our project is using jQuery version 3.1.1.  So I tried switching our project to use 1.10.2 -- and the grid dropdownlist starting working fine in all browsers.

1. Does kendo require you to use a specific (old) version of jQuery?

2. Any suggestions?  I hate switching the jQuery version and regression testing the entire app...

* I tried to reproduce in a simple application, but could not.  I'm not sure what it is about our grid that causes the issue - but I do know when I toggle between the 2 versions of jQuery, it works with 1.10.2, and not with 3.1.1.

Thanks

Stefan
Telerik team
 answered on 04 Jul 2017
3 answers
344 views
Is there a way to make some of the columns or cells be readonly?
Ivan Danchev
Telerik team
 answered on 04 Jul 2017
0 answers
385 views

This is solved and doesn't need to be answered. I just put it here in case someone runs into the same problem.

A treeview item says it has children altough there are no children by using "hasChildren":

<!DOCTYPE html>
<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
 
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.blueopal.min.css" />
 
        <script src="http://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
    </head>
 
    <script>
         
        $(document).ready(function() {
 
            // Bind dropdownlist
            $("#mytree").kendoTreeView({
                animation: false,
                dataSource: [
                    { 'id': '1', 'text': 'One child entry', 'expanded': 'true', "items": [ {'id': "2", 'text': "No child entry", "items": []} ] }
                ],
                select: function(e) {
 
                    var treeItem = this.dataItem(e.node);
 
                    if (treeItem.hasChildren) { alert ("Entry has children"); }
                    else { alert ("Entry has no children"); }
                }
            });
        });
         
    </script>
 
    <body>
        <div id="mytree" style="clear: both;"></div>
    </body>
</html>

 

You can run this code and click on the treeview entry "No child entry". It will tell you it has children! Why? The problem is on the predefinition in the datasource: ... ,"items": []

Remove that and it will work fine. I thought the Treeview Widget would take that over or replace it. But since it outputs wrong result, don't use it that way.

 

Tayger
Top achievements
Rank 1
Iron
Iron
 asked on 03 Jul 2017
1 answer
2.2K+ views

This code is driving me insane I have a click event that fires upon a radio button selection. It then executes jquery that should hide the row, however it doesn't. The code is as follow:

 document.getElementById("showSubOrgs").addEventListener("click", function () {
        ShowSubOrganisations();
    });

 function HideSubOrganisations() {
        var grid = $("#gridOrganizations").data("kendoGrid");
        var gridData = grid.dataSource.view();
        for (var i = 0; i < gridData.length; i++) {
           var currentOrgid = gridData[i]._OrganisationID;
            var ParentOrgID = gridData[i]._ParentOrganisationID;
            if (currentOrgid != ParentOrgID) {
               debugger;
               grid.table.find("tr[_OrganisationID='" + currentOrgid + "']").hide();
            }
        }
    };

 

Georgi
Telerik team
 answered on 03 Jul 2017
17 answers
2.5K+ views
Hi All,

I am having issues with kendo grid in popup mode. When it submits the create/update request via ajax and if there is any error occurs I don't want to loose changes in the popup edit window that user has entered.  But it just closes the popup window on click of Update button.

Is there a way to not to close the popup window on press of update button in case of any error occurs on the server side.

Client side Code

    //show server errors if any
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n\n";
                    });
                }
            });
            alert(message);
        }
    }


@(Html.Kendo().Grid(Model)
    .Name("SchoolGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.SchoolID).Width("80px");
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Campus).Width("90px");
        columns.Bound(p => p.StateCode).Width("90px");
        columns.Bound(p => p.SectorCode).Width("95px");
        columns.Bound(p => p.MDISurveyStartDate).ClientTemplate("#= (MDISurveyStartDate == null) ? 'Not Set' : kendo.toString(MDISurveyStartDate, 'dd/MM/yyyy') #").Width("90px");
        columns.Bound(p => p.MDISurveyEndDate).ClientTemplate("#= (MDISurveyEndDate == null) ? 'Not Set' : kendo.toString(MDISurveyEndDate, 'dd/MM/yyyy') #").Width("90px");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width("190px").HtmlAttributes(new { style = "text-align:center" });
    })
    .ToolBar(tb => tb.Create().Text("Add New School"))
    .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("EditSchool").Window(w => w.Title("Add/Edit School Details").Name("editWindow").Width(600)))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.ClientID))
        .Events(e => e.Error("error_handler"))
        .Read("Read_Schools""School")
        .Update("Update""School")
        .Create("Create""School")
        .Destroy("Destroy""School")
    )
)


Server Side Code:-

        [HttpPost]
        public ActionResult Update([DataSourceRequestDataSourceRequest request, School school)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    string errMsg = "";
                    if (!_Service.UpdateSchool(school, out errMsg))
                        ModelState.AddModelError("UpdateSchool", errMsg);
                }
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("UpdateSchool", ex.Message);
            }
 
            return Json(ModelState.ToDataSourceResult());
        }

Thanks!
Doug
Top achievements
Rank 1
Veteran
 answered on 01 Jul 2017
4 answers
403 views

Hello 

The KendoUI Splitter would be the perfect solution for what I want to do. I ran into the follow three style problems you may know the answer:

1. The default color of the panes is white. I need to have them transparent what is ignored by the Splitter. How can I remove the defaulted white?

2. How can I change the color of the most outer frame border? (the one surrounding both panes)

3. On hovering the splitter an arrow is coming up. This is imho missleading. The arrow has only one head, should have two since you can move the splitter in two directions. How can I change that?

Greetings

Tayger
Top achievements
Rank 1
Iron
Iron
 answered on 30 Jun 2017
1 answer
484 views

Hello there

I'm wondering if it is possible to select the last item inside a node. Example:

A +             (main node)
   A1 +        (child node of A)
   A2 +        (child node of A)
B +             (main node)

The plus sign (icon) behind each item is kinda an add item functionality inside that node. F.e. if I click on the + behind the A it would create a child item inside its node, in this case A3 + :

A +            (clicked on the +)
   A1 +
   A2 +
   A3 +      (new item created)
B +

That works fine. What I want now after creating a newitem that way is to SELECT (jump) the newly created item:

A +
   A1 +
   A2 +
   A3 +    (item is selected)
B +

I'm aware of this: treeview.select(".k-item:last");

In my case it would jump to B + (always to the end of the very last item. Can I somehow (easily) restrict the "last" so it would jump to the last element inside the node I have added a new item?

Regards

Tayger
Top achievements
Rank 1
Iron
Iron
 answered on 30 Jun 2017
1 answer
602 views

Hi,

I have found a problem when having text with ampersand in the data used for a pivot grid when expanding the row or column with that ampersand in the caption.  A JavaScript exception is caused in the browser (Chrome & IE).  The exception is "Uncaught TypeError: Cannot read property 'value' of undefined at init._buildRow" in kendo.all.js:73938.  The undefined object is dataItem.

I have encoded the ampersand using &amp; within the string at the datasource and whilst that is displayed correctly I believe the & within the encoded &amp; is still causing the exception.  I have tried using the rowHeaderTemplate and the row encoded property but neither seem to stop the error from occurring.  Is there another way I should be encoding this text so that it doesn't break the JavaScript code?

My original project is Kendo UI for MVC but I have created a dojo using the JavaScript version to re-create the problem.

dojo.telerik.com/@amdenley/OkEqIV/2

Alex Hajigeorgieva
Telerik team
 answered on 30 Jun 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Drag and Drop
Application
Map
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?