Telerik Forums
Kendo UI for jQuery Forum
0 answers
111 views
Hi Guys,

When I am executing splitter demo example from kendoui in Google chrome. I am not getting same layout which is in Demo. see in attachment.

then i used following references for js and styles and it worked fine.

<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.common.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.default.css" rel="stylesheet" type="text/css" />
    <!--Then paste the following for Kendo UI Web scripts-->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.web.min.js" type="text/javascript"></script>

I just want to run this demo in mobile. I have one question that How can i use same layout for iphone and i pad as the size for both the phones are different.

I got some info from forum that the Kendo UI Web Splitter can not be fully used in Kendo UI Mobile apps.

Could you please anyone suggest which layout can i use which will run on iphone and i pad.

thanks,
prashant
Prashant
Top achievements
Rank 1
 asked on 17 Apr 2012
3 answers
281 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
302 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
828 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
249 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
73 views
Disregard this question, I was able to determine the solution.
Nathan
Top achievements
Rank 1
 asked on 16 Apr 2012
0 answers
110 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
981 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
147 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
492 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?