Telerik Forums
Kendo UI for jQuery Forum
0 answers
940 views
I am having some trouble trying to get the autocomplete to work as I need it to.

My autocomplete is setup like

$("#customer").kendoAutoComplete({
          minLength: 2,
          dataTextField: "CustomerId",
          animation: {
              open: {
                  effects: "fadeIn",
                  duration: 300,
                  show: true
              }
          },
          filter: "contains",
          change: onChange,
          select: onSelect,
          placeholder: "Search.....",
          template: '<div><div class="arrow"></div>' +
          //            '<span>#=FirstName# #=LastName#</span> <span>#=CustomerId#</span>'
          '<span>#=FirstName# #=LastName#</span>'
          +
          '</div>',
          dataSource: {
              serverFiltering: true,
              transport: {
                  read: {
                      url: "/API/Customer/Get",
                      dataType: "json",
                      data: function () {
                          return {
                              data: $("#customer").data("kendoAutoComplete").value()
                          };
                      }
                  }
              }
          }
      });

function onSelect(e) {
           console.log("on select");
           var autocomplete = $("#customer").data("kendoAutoComplete");
           var value = autocomplete.value();
       doMyFunctionForSelect(value);//maybe its to soon to be calling this
       }
 
       function onChange(e) {
           console.log("on change");
           console.log(e);
           var autocomplete = $("#customer").data("kendoAutoComplete");
           var value = autocomplete.value();
           if (value.length > 0) {
               var last = e.sender._last;
               if (last == 13) {
                   doMyFunctionForFormSubmit();
               }
           }
       }

I want to be able to run 2 different functions based on how the function gets its data.

For example if the users select a customers name from the dropdown list I want to call doMyFunctionForSelect(); else if the user enters a customers name that doesnt exist then call doMyFunctionForFormSubmit(); 

My problem happens when I select an item from the dropdown list. The value I am seeing in my select function is only the text I added to the textbox not the CustomerId field I need.

After the select function is called the onChange() is called where I can see the actual CustomerId value using autocomplete.value();

If using the code above I enter something like test1234 and there isn't a customer with that name then autocomplete dropdown doesnt appear (as desired). The onSelect() is never called and works fine. 

Within the onChange() function is possible to tell if it has been called directly after onSelect()? this way I could do a check to see how the function has been called so I run either of the functions I need to.

Hope someone can point me in the right direction!

Thank you






Shane P
Top achievements
Rank 1
 asked on 17 Apr 2012
4 answers
271 views
We are running into issues with virtual scrolling in the kendo grid at certain numbers of total results.  We have our paging set to 10 per page and I have verified that our controller on the server is serving the correct records to the grid every time.  However, at certain levels of results there are exceptions being thrown from kendo.all.js.  These errors are "RangeError:  Maximum call stack size exceeded".  I have tested in IE7-9, FF, Chrome, and Safari and the errors are thrown in each of them (though they all point to different line numbers).  In fact, we can reliably produce a complete browser crash in FF and Safari by attempting to scroll up/down when the magic number of results is shown.

Here are the result totals returned and an explanation of what we observe (keep in mind, we have page size of 10 and we have pageable set to false):

 

  • less than 10 results = shows results as expected
  • 11 results – shows console error once on first click of down scroll, but the 11th record is never shown.
  • 12 results – shows console error on first two clicks of down scroll, but never shows the 11th or 12th records.
  • 13 results - shows two console errors for each of first two clicks of down scroll, but never shows the 11th / 12th  / 13th records.
  • 14 results – shows console errors on first two clicks of down scroll and does not move the scrollbar.  However, on the third and subsequent clicks, the grid starts showing the fetched records.
  • 15 results - shows console errors on first two clicks of down scroll and does not move the scrollbar.  On the third and subsequent clicks, the grid starts showing the fetched records.
  • 17 results - shows console error on first click only of down scroll and does not move the scrollbar.  On the second and subsequent clicks, the grid starts showing the fetched records.
  • 18 and over results – works correctly with no errors

Anyone else seeing this behavior?  This is really becoming a show stopper for us. 

Rik
Top achievements
Rank 1
 answered on 16 Apr 2012
0 answers
94 views
Disregard this question, I was able to determine the solution.
Nathan
Top achievements
Rank 1
 asked on 16 Apr 2012
0 answers
135 views
I have a listView bound to a dataSource (external JSON).

I would like to trigger the following actions:
 - On an external trigger event
1. clear the existing listView
2. read a new dataSource

Can anyone advise on how to do this...?
Mike
Top achievements
Rank 1
 asked on 16 Apr 2012
7 answers
1.0K+ views
please help
I used the date range demo in my code
but when I submit the form the date input is not in the input list
my code is:

<script type="text/javascript">
$().ready(function() {

	function startChange() {
		var startDate = start.value();

		if (startDate) {
			startDate = new Date(startDate);
			startDate.setDate(startDate.getDate() + 1);
			end.min(startDate);
		}
	}

	function endChange() {
		var endDate = end.value();

		if (endDate) {
			endDate = new Date(endDate);
			endDate.setDate(endDate.getDate() - 1);
			start.max(endDate);
		}
	}

	var start = $("#valid_from").width(200).kendoDatePicker({
		change: startChange,
		format: "dd-MM-yyyy"
	}).data("kendoDatePicker");

	var end = $("#valid_to").width(200).kendoDatePicker({
		change: endChange,
		format: "dd-MM-yyyy"
	}).data("kendoDatePicker");

	start.max(end.value());
	end.min(start.value());		
});
</script>

<form action="xxx" method="post">
<input type="hidden" name="request_id" value="9" />
<input type="hidden" name="product_id" value="19" />
<table>
<tr>
	<td><strong>Valid From</strong></td>
	<td> : 
		<input type="text" name="valid_from" value="21-02-2012" id="valid_from" readonly="readonly" maxlength="20" size="20"  />
	</td>
	<td><strong>Valid To</strong></td>
	<td> : 
		<input type="text" name="valid_to" value="21-02-2012" id="valid_to" readonly="readonly" maxlength="20" size="20"  />
	</td>
</tr>
<tr>
	<td colspan="3">
		<input type="submit" name="btnSave" value="Save"  />
		<input type="button" id="btnBack" value="Back" onclick="window.history.back()" />
	</td>
</tr>
</table>
</form>
and when I submit the form the valid_from and valid_to is missing in the POST 
array(6) {
  ["request_id"]=>
  string(1) "9"
  ["product_id"]=>
  string(2) "19"
  ["btnSave"]=>
  string(4) "Save"
}
wizmagister
Top achievements
Rank 2
 answered on 16 Apr 2012
1 answer
178 views
I'm using the Bar Chart and I have a Score Distribution. I want  Median bar color to be unique. So I want all bar in my bar chart to have the same color and I and to endorphin the bar which represents the median using a different color. 

See the attached image of the chart I'm replacing.
Rodney
Top achievements
Rank 2
 answered on 16 Apr 2012
1 answer
542 views
i use the restful mode in the server,when i update the object,the url must be '/demo/{id}' and submit type must be "put".

but the update url was definition 
                    transport: {
                        update: {
                            url: "/demo/{id}"
                        }
    }
how can i change url when i need update.
For example,when i update the record,the id is "abcdefg",i need change the url become '/demo/abcdefg' .
Alexander Valchev
Telerik team
 answered on 16 Apr 2012
3 answers
684 views
What is the best approach to getting the value of a column or cell in the selected row?
I can't seem to find a clear and easy way to make this happen. Any help would be appreciated.
Brian
Top achievements
Rank 1
 answered on 16 Apr 2012
1 answer
176 views
How do I intercept both Edit and create on the grid so I can forward it to another page? Is there a way to add custom commands?
Alexander Valchev
Telerik team
 answered on 16 Apr 2012
8 answers
223 views
I have an AJAX call, which updates a Highcharts chart and is supposed to update a Kendo Grid, as well. The data returned from AJAX is updated, but the grid doesn't refresh.

This is the setup for the grid's dataSource:
var smry_data = [{
   mean          : rtrn_data.SUMMARY["Mean"]
,   std_deviation : rtrn_data.SUMMARY["Std. Deviation"]
,   median        : rtrn_data.SUMMARY["Median"]
,   mode          : rtrn_data.SUMMARY["Mode"]
,   range         : rtrn_data.SUMMARY["Range"]
,   minimum       : rtrn_data.SUMMARY["Minimum"]
,   maximum       : rtrn_data.SUMMARY["Maximum"]
,   count         : rtrn_data.SUMMARY["Count"]
,   quintile20    : rtrn_data.SUMMARY["Quintile 20%"]
,   quintile40    : rtrn_data.SUMMARY["Quintile 40%"]
,   quintile60    : rtrn_data.SUMMARY["Quintile 60%"]
,   quintile80    : rtrn_data.SUMMARY["Quintile 80%"]
,   quintile100   : rtrn_data.SUMMARY["Quintile 100%"]
}];

And this is the JS for the Kendo Grid:
   if(!$("#cntr-smry").data("kendoGrid")) {
    dtsc_smry_data = new kendo.data.DataSource({
        data   : smry_data
    ,   schema : {
            model : {
                fields : {
                    mean          : {type : "number"}
                ,   std_deviation : {type : "number"}
                ,   median        : {type : "number"}
                ,   mode          : {type : "number"}
                ,   range         : {type : "number"}
                ,   minimum       : {type : "number"}
                ,   maximum       : {type : "number"}
                ,   count         : {type : "number"}
                ,   quintile20    : {type : "number"}
                ,   quintile40    : {type : "number"}
                ,   quintile60    : {type : "number"}
                ,   quintile80    : {type : "number"}
                ,   quintile100   : {type : "number"}
                }
            }
        }
    });
 
    $("#cntr-smry").kendoGrid({
        dataSource  : dtsc_smry_data
    ,   columns     : [
            {field : "mean",          title : "Mean",           template : '<span style="float:right;" class="fontBold">#=kendo.toString(mean, "n1")#</span>'}
        ,   {field : "std_deviation", title : "Std. Deviation", template : '<span style="float:right;" class="fontBold">#=kendo.toString(std_deviation, "n1")#</span>'}
        ,   {field : "median",        title : "Median",         template : '<span style="float:right;" class="fontBold">#=kendo.toString(median, "n1")#</span>'}
        ,   {field : "mode",          title : "Mode",           template : '<span style="float:right;" class="fontBold">#=kendo.toString(mode, "n0")#</span>'}
        ,   {field : "range",         title : "Range",          template : '<span style="float:right;" class="fontBold">#=kendo.toString(range, "n1")#</span>'}
        ,   {field : "minimum",       title : "Minimum",        template : '<span style="float:right;" class="fontBold">#=kendo.toString(minimum, "n1")#</span>'}
        ,   {field : "maximum",       title : "Maximum",        template : '<span style="float:right;" class="fontBold">#=kendo.toString(maximum, "n1")#</span>'}
        ,   {field : "count",         title : "Count",          template : '<span style="float:right;" class="fontBold">#=kendo.toString(count, "n0")#</span>'}
        ,   {field : "quintile20",    title : "Quintile 20%",   template : '<span style="float:right;" class="fontBold">#=kendo.toString(quintile20, "n1")#</span>'}
        ,   {field : "quintile40",    title : "Quintile 40%",   template : '<span style="float:right;" class="fontBold">#=kendo.toString(quintile40, "n1")#</span>'}
        ,   {field : "quintile60",    title : "Quintile 60%",   template : '<span style="float:right;" class="fontBold">#=kendo.toString(quintile60, "n1")#</span>'}
        ,   {field : "quintile80",    title : "Quintile 80%",   template : '<span style="float:right;" class="fontBold">#=kendo.toString(quintile80, "n1")#</span>'}
        ,   {field : "quintile100",   title : "Quintile 100%",  template : '<span style="float:right;" class="fontBold">#=kendo.toString(quintile100, "n1")#</span>'}
        ]
    });
} else {
    $("#cntr-smry").data("kendoGrid").dataSource.read();
}

I had thought this would work, but the grid stays the same. I know I must be missing a command somewhere, but I'm just not seeing it.
Atanas Korchev
Telerik team
 answered on 16 Apr 2012
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
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
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?