Telerik Forums
Kendo UI for jQuery Forum
3 answers
1.3K+ views
Hey,

In one of those columns I have a custom editor in the form of a dropdown list. The first value of the list is "Please select a function" with value 0.
When the user creates a row and does not select a function it should give an error. The function field is required and I want validation on it. 

I have it "working" but I think that this is not the way it should be. And however it works I still can't add z-index or any style to my tooltip because the syle get overriden when the message is shown in the grid.

The code is:

 
001.<script id="tooltip" type="text/x-kendo-template"> //Custom Tooltip created by me
002.       <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" data-for="#= Key #" role="alert">
003.           <span class="k-icon k-warning"> </span>
004.           #= Message #
005.           <div class="k-callout k-callout-n"></div>
006.       </div>
007.   </script>
008.   <script>
009.       var tooltip = new kendo.template($("#tooltip").html());
010. 
011.       $(document).ready(function () {
012.           $("#grid").kendoGrid({
013.               dataSource: new kendo.data.DataSource({
014.                   transport: {
015.                       create: {
016.                           url: "/Beheer/Medewerker/CreateJson",
017.                           type: "POST",
018.                           dataType: "json"
019.                       },
020.                       read: {
021.                           url: "/Beheer/Medewerker/ListJson",
022.                           dataType: "json"
023.                       },
024.                       update: {
025.                           url: "/Beheer/Medewerker/UpdateJson",
026.                           type: "PUT",
027.                           dataType: "json"
028.                       },
029.                       destroy: {
030.                           url: "/Beheer/Medewerker/DestroyJson",
031.                           type: "DELETE",
032.                           dataType: "json"
033.                       }
034.                   },
035.                   schema: {
036.                       model: {
037.                           id: "Id",
038.                           fields: {
039.                               Id: {
040.                                   editable: false
041.                               },
042.                               Naam: {
043.                                   validation: {
044.                                       required: {message: "De naam is verplicht."}
045.                                   }
046.                               },
047.                               Actief: {
048.                                   defaultValue: true,
049.                                   validation: {
050.                                       required: false
051.                                   }
052.                               },
053.                               FunctieId: {
054.                                   defaultValue: 0,
055.                                   validation: {
056.                                       required: true,
057.                                        //Custom validation rule
058.                                       customFunctieId: function (input) {
059.                                           if (input.attr("data-bind") == "value:FunctieId" && input.val() == 0) {
060.                                               input.attr("data-customFunctieId-msg", "Geen functie geselecteerd.");
061.                                               input.parents("td").append(tooltip(Message = "", Key = "sl" + input.attr("data-bind").split(":")[1]));
062.                                               return false;
063.                                           }
064.                                           return true;
065.                                       }
066.                                   }
067.                               },
068.                               Functie: {
069.                                   validation: {
070.                                       required: false
071.                                   }
072.                               },
073.                               AfdelingId: {
074.                                   defaultValue: 0,
075.                                   validation: {
076.                                       required: true,
077.                                        //Custom validation rule
078.                                       customAfdelingId: function (input) {
079.                                           if (input.attr("data-bind") == "value:AfdelingId" && input.val() == 0) {
080.                                               input.attr("data-customAfdelingId-msg", "Geen afdeling geselecteerd.");
081.                                               input.parents("td").append(tooltip(Message = "", Key = "sl" + input.attr("data-bind").split(":")[1]));
082.                                               return false;
083.                                           }
084.                                           return true;
085.                                       }
086.                                   }
087.                               },
088.                               Afdeling: {
089.                                   validation: {
090.                                       required: false
091.                                   }
092.                               }
093.                           }
094.                       }
095.                   },
096.                   sort: {
097.                       field: "Naam", dir: "asc"
098.                   }
099.               }),
100.               sortable: true,
101.               scrollable: true,
102.               editable: "inline",
103.               toolbar: [
104.                   { name: "create", text: "Voeg medewerker toe" }
105.               ],
106.               columns: [
107.               {
108.                   field: "Naam",
109.                   template: "<a href=\"/Beheer/Medewerker/Details/#= Id #\">#= Naam #</a>"
110.               },
111.               {
112.                   field: "FunctieId",
113.                   title: "Functie",
114.                   template: "#= Functie #",
115.                    //Custom editor for dropdown
116.                   editor: FunctieDropDownEditor
117.               },
118.               {
119.                   field: "AfdelingId",
120.                   title: "Afdeling",
121.                   template: "#= Afdeling #",
122.                  //Custom editor for dropdown
123.                   editor: AfdelingDropDownEditor
124.               },
125.               {
126.                   field: "Actief",
127.                   title: "Actief",
128.                   template: "<input name='Actief' type='checkbox' data-bind='checked: Actief' #= Actief ? checked='checked' : '' # disabled />",
129.                   editor: "<input name='Actief' type='checkbox' data-bind='checked: Actief' #= Actief ? checked='checked' : '' # />",
130.                   width: 70
131.               },
132.               {
133.                   command: [{ name: "edit", text: "Wijzig" }, { name: "destroy", text: "Verwijder" }]
134.               }
135.               ]
136.           });
137.       });
138. 
139.       function FunctieDropDownEditor(container, options) {
140.           $('<input data-text-field="Naam" data-value-field="Id" name="sl' + options.field + '" data-bind="value:' + options.field + '" />')
141.               .appendTo(container)
142.               .kendoDropDownList({
143.                   autoBind: false,
144.                   dataSource: {
145.                       type: "json",
146.                       transport: {
147.                           read: "/Beheer/Functie/ListJson",
148.                       }
149.                   }
150.               });
151.       }
152. 
153.       function AfdelingDropDownEditor(container, options) {
154.           $('<input data-text-field="Naam" data-value-field="Id" name="sl' + options.field + '" data-bind="value:' + options.field + '" />')
155.               .appendTo(container)
156.               .kendoDropDownList({
157.                   autoBind: false,
158.                   dataSource: {
159.                       type: "json",
160.                       transport: {
161.                           read: "/Beheer/Afdeling/ListJson",
162.                       }
163.                   }
164.               });
165.       }
166.   </script>
Is there a simple way to create validation rules + error messages for a custom editor, like in this case a dropdownlist.
I want an "error" message if a user does not select a function or he/she selects the first value (which is "Please select a function" with value 0).

Thanks,

Jeroen
Jeroen
Top achievements
Rank 1
 answered on 11 Dec 2013
1 answer
295 views
I am declaring a window like this...

in my html
<div id='mywin'></div>

in my js file...
        var window = $('#mywin');
        if (!window.data("kendoWindow")) {
            window.kendoWindow({
                width: winWidth + "px",
                height: winHeight + "px",
                minWidth: winWidth + "px",
                minHeight: winHeight + "px",
                title: "Place of Interest Search",
                actions: ["Close"],
                resizable: false
            });
        }

        //open identify window
        window.data("kendoWindow").center();
        window.data("kendoWindow").open();

this all works but when i attempt to reload content by...

    if ($("#mywin").data("kendoWindow")) {

        ..reload logic here


this ("#mywin").data("kendoWindow") always returns false thus recreating the window every time.

I notice in the dom there is the original div and then a duplicate div for the window at the bottom of the dom with the same id (mywin)

what am i doing wrong here? I want to reuse the original window without having to destroy it and recreate it.
Daniel
Telerik team
 answered on 11 Dec 2013
3 answers
185 views
Hello,

Is there a way to turn off the zoom and pane controls?  Ideally I just want the map to sit over a country and not be moved.

Additionally is there an easy way to display hover text in a bubble when hovering over geo polygon location?

Thanks!
T. Tsonev
Telerik team
 answered on 11 Dec 2013
7 answers
284 views
Hi all,
  I am having treeview with checkboxes on kendo window, treeview datasource bound using ajax call and having some of it's nodes in checked state while loading the treeview, if tree is in collapsed state then while i am doing empTreeview.dataSource.view() then i am not able to get the collapsed node in collection.
I want the checked checkboxes in collapsed node as well.
Please reply.
Kyle
Top achievements
Rank 2
Veteran
Iron
 answered on 11 Dec 2013
1 answer
606 views
I have a button group like the following:
<ul data-role="buttongroup" data-bind="index: selectedTabIndex, events: { select: tabSelected }">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
</ul>
However I get the following error when Kendo tries to bind my model:
"The index binding is not supported by the ButtonGroup widget"

Is it not possible to bind widget properties to a view model?
Alexander Valchev
Telerik team
 answered on 11 Dec 2013
5 answers
291 views
Hi, we had no problem with copying email contents, rich text and HTML content specially formatted HTML contents with tables, and pasting into HTML Editor in earlier version 2013.2.716 (both IE-10 and Chrome Browser were beautifully ok)!
However, as soon as we upgrade to version 2013.3.1122 yesterday, we have so many problems in pasting contents into HTML Editor.
1. In IE-10 the contents after pasting in the Editor has so many unnecessary line spacing. Also we can no longer paste contents with HTML table (editor does not show it in the table form, just show it in continuous lines with a lots of long line spacing in between lines).
2. In Chrome it's even worse, when we paste the content into the Editor, only partial of the content is being paste (NOT ALL).
Basically, the most beautiful working version of Editor in the previous version (2013.2.716), now in the new version (2013.3.1122) become practically useless!
Please do something about it, as most of our users and online customers are complaining to us on this particular issue since yesterday.
Any solution to quickly solve this tedious problem will be much appreciated.
Thank you.
Alex Gyoshev
Telerik team
 answered on 11 Dec 2013
5 answers
120 views
Hello Guys,

I have the 割 character for a multiple select. This view is populated by ajax. See screenshot attached.
It does this only on Apple devices.

Regards.
Kiril Nikolov
Telerik team
 answered on 11 Dec 2013
9 answers
181 views
We have a SplitView in our web app, that has two panes (menu on the left, content on the right).  We want to be able to direct-link to a specific view, like we do for the phone version of our web app.  For example:

http://www.ourwebsite.com/index.html#remote-view-name

This works when we don't use a splitview (like our phone app), and Kendo will automatically load the #remote-view-name and display it in the context of our application.  But, with a splitview it doesn't work the same.  It still loads the #remote-view-name and displays it in the application, but it completely ignores our splitview code and displays only that view (no left menu pane).  Since the splitview isn't loaded, much of the rest of the site is broken.

I'm assuming that Kendo just doesn't know which pane to display the #remote-view-name in, it makes no assumptions, and just displays the view only outside of a splitview?  Is there some way to do one of these direct links and tell it which pane to display the view in?  like "/index.html#remote-view-name?target=contentPane" ?
Kiril Nikolov
Telerik team
 answered on 11 Dec 2013
2 answers
318 views
I had been trying a lot to get adding filter in ajax (razor view)

Please someone helps me ... i am new and so much need your helps
Thank you so much...

i tried this one.

 $.ajax({
             contentType: "json",
             url: url,
             method: 'GET',
             success: function (d) {
                 // var dropdownpropertyvalue = $("#dropdownproperty").val(selectedIndex);
                 var grid = $("#GridProperty").data("kendoGrid");
                // grid.autoBind(false);
                 //grid.ajax();
                 grid.dataSource = new kendo.data.DataSource({ data: d });
                // grid.filter(filter.add({field: "EntityName", operator: "Contains", value: entityName}));
                 grid.dataSource.read();
                
                // grid.serverFiltering(true);
                 grid.dataSource.filter({ field: "EntityName", operator: "eq", value: dropdownpropertyvalue });
                 grid.refresh();
             }

         });
     }
(not working here    grid.dataSource.filter({ field: "EntityName", operator: "eq", value: dropdownpropertyvalue });)


In kendo, i can do like this for filter....

.DataSource(dataSource => dataSource
          .Ajax()
          .Batch(true)
          .ServerOperation(false)
          .Filter(filter => {
              filter.Add(p => p.EntityName).Contains(@ViewData["FirstEntity"].ToString());

          })
          .Model(x =>
          {
              x.Id(y => y.Id);
              x.Field(y => y.EntityName).Editable(false);
              x.Field(y => y.PropertyName).Editable(false);
              x.Field(y => y.Description).Editable(false);

          })
          .Read(read => read.Action("PropertiesRead", "Properties",new {toolId=1}))
          .Update(update => update.Action("OperationsUpdate", "Operations",new {toolId=1}))

and how to apply here tooId = (from js variable)?

Daniel
Telerik team
 answered on 11 Dec 2013
1 answer
105 views
I want to use checkbox, because it indicates that "you can click me",  customer is easy to use.
T. Tsonev
Telerik team
 answered on 11 Dec 2013
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
Application
Map
Drag and Drop
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
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
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
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?