Telerik Forums
Kendo UI for jQuery Forum
3 answers
288 views
I have a web service that returns something similar to this
{ "RowSet": {
        "Key": "7256bd2d-879f-494b-a7c0-f0d6ed2eba84",
        "Rows": [
            { "RowNum": 1, "Name": "Fred", "Value": 123 },
            { "RowNum": 2, "Name": "Mary", "Value": 323 },
            { "RowNum": 3, "Name": "John", "Value": 732 },
            { "RowNum": 4, "Name": "Sue", "Value": 895 }
        ]
    }
}

In a data source, I bind to RowSet.Rows, but I need the Key field to be part of the rows in order to enable CRUD operations.

ideally, I would like to specify something like this:

schema: {
    data: "RowSet.Rows",
    model: {
        id: "RowNum",
        fields: {
            Key: { editable: false, type: "string", path="..\Key" or path="this.parent().Key" }
            RowNum: { editable: false, type: "number" },
            Name: { editable: true, type: "string" },
            Value: { editable: true, type: "number" },
        }
    }

Is this possible in some way?

Alexander Valchev
Telerik team
 answered on 17 Apr 2012
3 answers
308 views
In your documentation I see references to Models (plural) and the function get(), but I don't see any examples of dealing with multiple models.

So, is it possible to define multiple models for a given datasource?

More importantly, can the models be bound to a property within the schema?

i.e.

If the schema has two arrays:

{ Data :
    {
        Items: [ { ... } ],
        Persons: [ { ... } ]
    }
}

Such that Schema is bound to Data, model 1 is bound to Items, and model 2 is bound to Persons.

If this is possible, could someone post an example of how to do this?
    
Alexander Valchev
Telerik team
 answered on 17 Apr 2012
0 answers
844 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
250 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
76 views
Disregard this question, I was able to determine the solution.
Nathan
Top achievements
Rank 1
 asked on 16 Apr 2012
0 answers
113 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
997 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
151 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
503 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
659 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
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?