Telerik Forums
Kendo UI for jQuery Forum
1 answer
97 views
Hi,

I am using kendo date picker in couple of places in my application, and it is appearing differently in some places. Some places these are having shadow around them while some places these are fine.
Please see the attached file to see the appearances.

Please le me know why these are having shadow around them.

Regards,

Poonam


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 




At another place the
kendo datepicker


 


 

Iliana Dyankova
Telerik team
 answered on 25 Apr 2013
2 answers
224 views
Edited to add - I just realized I didn't put this post in the MVC specific forum.  I'm going to post it there as well, feel free to delete this if necessary.

Greetings, I've been trying to set up a modal popup Window that contains a treeview from which a user can select a single item and then close the window.  

I basically took the code we use all over our site for modal popup windows (without errors) and then just tried putting a treeview in it.   In Firefox the error is not explicitly thrown, the tree itself renders, but anything you tried to put in the window underneath the treeview does not render at all.  In Chrome, the window renders but not the tree and no error is thrown (i.e. you get an empty window).  In IE you get an error in jQuery-1.8.2.min.js as soon as you try to open the window.  The error says "0x80020101 Microsoft JScript Runtime Error:  could not complete the operation due to error 80020101" (useful, I know).  The window never opens at all.

I created a dummy test page on my site that includes only the kendo and jQuery libraries/css/js files in the layout and removes everything not involved with housing the treeview in the window and I still get the same error.

The error occurs before calling the controller method to get the data to populate the tree (and I have another treeview that is NOT in a window using the same controller method which one works properly, and if I run in firefox it does actually call the method and populate the tree, just nothing below the tree like buttons - so I am positive the problem is not the controller method).  You can substitute any data you want if you try to repro this since the code below is data agnostic, just give it's type a property called TagName or substitute your own value of DataTextField.

If I remove the code defining the treeview and replace it with a simple "hi", I do not get the error, which proves the problem is the tree + window combination (because remember, the exact same tree works perfectly outside of the window).  

My code is below, distilled down to the absolute simplest case, still throwing the same error in IE9:
(I even got rid of the select handler and the confirm/cancel buttons just to try to get rid of the error)

The versions of jQuery & jQueryUI we include are the full downloaded library from jQuery - we have not customized them in any way.  The specific version number that we are using are ones we've had to upgrade to because of error conflicts with other between other Kendo controls and jQuery.  I suspect something similar is at play here.

If there is a specific way I need to set up the window to support this functionality please let me know, or if there is a problem with the interaction of the window + tree + jQuery that needs to be fixed can we please get a patch for it ASAP?  There are a bunch of places in our app where we'll need to have a tree in a popup window like this.

Thanks in advance, please let me know if you need anything else from me to diagnose the issue!

@model NeedleFinder.WebUI.Areas.CaseMgmt.Models.Tag.ManageTagsViewModel
@using Kendo.Mvc.UI
@{
    ViewBag.Title = "TreeWindowPopup";
    Layout = "~/Views/Shared/_TestLayout.cshtml";
}
<div>  <input type="button" name="btnChooseParent" value="Select" onclick="openParentTagList();" />
</div>
<script id="parentTagSelection" type="text/x-kendo-template">

  @(Html.Kendo().TreeView()
        .Name("trvParentTag")
        .DataTextField("TagName")
       .DataSource(dataSource => dataSource
                                      .Read(read => read
                                                        .Action("GetTagsForTree", "Tag", new { area = "CaseMgmt" }))
        )
   )  

     
</script>
  
<script type="text/javascript">

    function openParentTagList() {
        var kendoWindow = $("<div />").kendoWindow({
            title: "Select parent tag",
            resizable: false,
            modal: true,
            height: 500,
            width: 400
        });

        kendoWindow.data("kendoWindow")
            .content($("#parentTagSelection").html())
            .center().open();

       
        return false;
    }
   
    </script>


My layout looks like this:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/redmond/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <!-- PROTOTYPE CSS -->

    <link href="@Url.Content("~/Content/Kendo/2013.1.319.340/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Kendo/2013.1.319.340/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Kendo/2013.1.319.340/kendo.web.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Kendo/2013.1.319.340/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jQuery.Validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

    @if (false)
    {
        <script src="@Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")" type="text/javascript"></script>
    }
</head>

    <body>
       
        @RenderBody()
</body>
</html>
Anye
Top achievements
Rank 1
 answered on 25 Apr 2013
2 answers
184 views
I'm using the following code for my transport options of a kendo grid
transport: {
    create: {
        // get the rid off of the model object that
        // kendo ui automatically passes to the url function
        url: function () {
            return "/project/creategebouw/"
        },
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: { Project: { Id: PID } },
        complete: function () { onCreateGebouw(); },
    },
    read: {
        url: function () {
            return "/project/FindAllGebouwen/"
        },
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: { Project: { Id: PID } }
    },
    update: {
        // get the rid off of the model object that
        // kendo ui automatically passes to the url function
        url: function () {
            return "/project/editgebouw/"
        },
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: { Project: { Id: PID } },
        complete: function () { onGebouwUpdate(); }
    },
With the read option, Project { Id : 2 } is neatly added tot the JSON data that is created through the parametermap (just a JSON stringify return) but this is not the case with the update option, why? is this a bug?
I tried putting the adding of the project id in the parametermap but I can't seem to get that to work, any examples?
Sachin
Top achievements
Rank 1
 answered on 25 Apr 2013
1 answer
235 views
I have several DropDownLists on a page that all have AutoBind = false and set to query a remote data source.

The results shown in each DropDownList will be dependent on values chosen in the other DropDownLists, therefore in the change event I want to "reset" all the other dropdownlists, so that if they have already been bound the next time they are dropped down they will requery the remote dataSource. 

I've managed to get the other dropdownlists to requery, but at the moment they all requery straight away, whereas I want them to wait until the user drops them down. 

Is there a way to tell a DropDownList/DataSource that it should be cleared/reset, but not rebind yet, rather using the same behaviour as AutoBind=False?
Alex
Top achievements
Rank 1
 answered on 25 Apr 2013
1 answer
121 views
Hello. I have implemented a ListView inside an expandable area of a grid row. The preview of the list inside the expandable area is working fine. The problem is when i go on the edit mode of the List and then press cancel.
After pressing the cancel button i am not allowed to expand the row anymore.  For your information, no error is thrown.

I have created a jsFiddle example that illustrates the problem.
To reproduce the behavior written above, go through the following steps:
1) Expand a row
2) Press on "Edit" button
3) Press on "Cancel" button.

After that you will notice that the row cannot be expanded again. Any suggestions ?

Thank you in advance
Nikolay Rusev
Telerik team
 answered on 25 Apr 2013
1 answer
236 views
We are trying to set specific date returns and reload the charts. Everything is working except that when the we call the chart.refresh or chart.redraw functions, the dataItem specified in the tooltip template is returning undefined. Would appreciate any help.

function updateDateRange(timelabel) {
  var prevDateRange = timelabel.text();

  var dateRange = new Date();

  switch (prevDateRange) {
    case "7 days":
      timelabel.text("30 days");
      dateRange.setDate(dateRange.getDate() - 30);
      break;
    case "30 days":
      timelabel.text("60 days");
      dateRange.setDate(dateRange.getDate() - 60);
      break;
    case "60 days":
      timelabel.text("90 days");
      dateRange.setDate(dateRange.getDate() - 90);
      break;
    case "90 days":
      timelabel.text("7 days");
      dateRange.setDate(dateRange.getDate() - 7);
      break;
  }

  var chart = timelabel.siblings(".widgetchart").data("kendoChart");

  chart.options.categoryAxis.min = dateRange;
  /* Note: For some reason, if the min value of the categoryAxis is set to a low enough  value (in my tests, less than 10 days from the current date), it rewrites the dataItem value in the tooltip template, causing it to throw a few undefined where dataItem properties are being accessed. Modifying other properties of the kendoChart data object does not cause it to break. */
  chart.redraw();
}

$("#" + id).kendoChart({
theme: "metroblack",
//autoBind: false,
dataSource: {
transport: {
read: {
url: url,
dataType: jsontype
}
},

schema: {
data: function(response) {
var data = response.data;

//remapping of data to match format
for (var i=0; i < data.length; i++) {
var item = data[i];
item.date = item.date;
item.value = item.engagement;
item.retweets = item.retweet_count;
item.replies = item.reply_count;
item.display = item.group_name;
}

return data;
},
model: {
fields: {
date: {
type: "date",
}
}
}
}
},
chartArea: {
opacity: 0
},
legend: {
position: "custom",
offsetX: $("#" + id).fromRight(100),
offsetY: 20,
},
series: [{
type: "line",
field: "value",
markers: {
border: {
width: 0
},
visible: true,
},
width: 2,
missingValues: "interpolate"
}],
dataBound: fillPoints,
categoryAxis: {
min: new Date().setDate(new Date().getDate() - 7),
baseUnitStep: "auto",
field: "date",
},
valueAxis: {
labels: {
format: "N0",
},
},
tooltip: {
visible: true,
// This item works the first time but every refresh, the dataItem is "undefined"
template: "<div style='text-align:center'>Retweets: #= dataItem.retweets #<br>Engagement: #= value.addCommas() #<br>#= category.toString('M/d') #</div>"
},
});
Hristo Germanov
Telerik team
 answered on 25 Apr 2013
1 answer
115 views
Hi,

I am using struts tags eg <s:textbox> and when I try to use the kendo validators in struts it does not work and I do not want to use <input type > tags as they are not shown properly on IE for my project but kendo validation works fine on them.

Kindly show me a workaround to use the kendoValidator in struts2.0 as the whole project is made using struts tag library and Its not very difficult to change to <input type>

Please help.

Regards and thanks in advance
Nitesh
Celinton
Top achievements
Rank 1
 answered on 25 Apr 2013
1 answer
61 views
Hi,
I'm trying to create the attached chart with Kendo UI. I'm having trouble with the stacked x-axis (categories).
The closest I've come is this fiddle, but obviously the categories aren't attached to the data.

Is it possible to achieve this with Kendo? Any direction would be appreciated.
Hristo Germanov
Telerik team
 answered on 25 Apr 2013
1 answer
131 views
I am attempting to convert my JSON data to a Kendo UI Mobile Listview. my php script outputs this data:

[{"eventID":"1","name":"test","time":"12:00:00","category":"####","subcategory":"####","description":"Event for testing purposes","locationID":"1","picturePath":"http:\/\/####\/~z3370257\/images\/1.jpg"},{"eventID":"2","name":"test2","time":"13:00:00","category":"####","subcategory":"SEIT","description":"Event for testing purposes2","locationID":"1","picturePath":"http:\/\/####\/~z3370257\/images\/1.jpg"}]


This JS Fiddle uses the same html css and javascript file that my app does. 

My question is, what do I need to put in my transport & read methods to get it to interpret the data correctly. 
Atanas Korchev
Telerik team
 answered on 25 Apr 2013
1 answer
239 views
Do you have something similar to this like the jquery mobile? im still debating if im going to use jquery mobile or your Kendo UI

http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/

Alexander Valchev
Telerik team
 answered on 25 Apr 2013
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?