Telerik Forums
Kendo UI for jQuery Forum
3 answers
91 views
Hi

I am trying to render a series that has 2 points for a given interval (e.g. category axis times at 00:00:00). My Kendo implementation seems to "step" the line even though the value is for the same interval.

I've attached a sample excel sample which renders my desired result, and my Kendo implementation. Is this possible - can you please provide a sample.

Thanks
Kieren
$("#chart").kendoChart({
                    title: {
                        text: "Units sold"
                    },
                    seriesDefaults: {
                        width: 2,
                        markers: {
                            visible: false,
                        },
                        overlay: {
                            gradient: null
                        }
                    },
                    series: [{
                        type: "area",
                        transitions: false,
                        width: 2,
                        data: [
                            230, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 0,
                            10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 0,
                            10
                        ]
                    }, {
                        type: "line",
                        transitions: false,
                        width: 2,
                        data: [
                            250, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 250, null,
                            null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 250, null,
                            0
                        ],
                        missingValues: "interpolate"
                    }],
                        valueAxis: {
                        labels: {
                            visible: true
                        },
                        line: {
                            visible: false
                        }
                    },
                    categoryAxis: {
                        baseUnit: "hours",
                        baseUnitStep: 1,
                            majorGridLines: {
                            visible: false
                        },
                        labels: {
                                visible: true,
                                //format: "{0}",
                                skip: 12,
                                step: 24,
                                rotation: 0,
                                format: 'dd MM yyyy'
                            },
                        categories: [
new Date('06/20/2013 00:00'), new Date('06/20/2013 00:00'), new Date('06/20/2013 01:00'), new Date('06/20/2013 02:00'), new Date('06/20/2013 03:00'), new Date('06/20/2013 04:00'), new Date('06/20/2013 05:00'),
new Date('06/20/2013 06:00'), new Date('06/20/2013 07:00'), new Date('06/20/2013 08:00'), new Date('06/20/2013 09:00'), new Date('06/20/2013 10:00'), new Date('06/20/2013 11:00'), new Date('06/20/2013 12:00'),
new Date('06/20/2013 13:00'), new Date('06/20/2013 14:00'), new Date('06/20/2013 15:00'), new Date('06/20/2013 16:00'), new Date('06/20/2013 17:00'), new Date('06/20/2013 18:00'), new Date('06/20/2013 19:00'),
new Date('06/20/2013 20:00'), new Date('06/20/2013 21:00'), new Date('06/20/2013 22:00'), new Date('06/20/2013 23:00'), new Date('06/21/2013 00:00'), new Date('06/21/2013 00:00'),
 
new Date('06/21/2013 01:00'), new Date('06/21/2013 02:00'), new Date('06/21/2013 03:00'), new Date('06/21/2013 04:00'), new Date('06/21/2013 05:00'),
new Date('06/21/2013 06:00'), new Date('06/21/2013 07:00'), new Date('06/21/2013 08:00'), new Date('06/21/2013 09:00'), new Date('06/21/2013 10:00'), new Date('06/21/2013 11:00'), new Date('06/21/2013 12:00'),
new Date('06/21/2013 13:00'), new Date('06/21/2013 14:00'), new Date('06/21/2013 15:00'), new Date('06/21/2013 16:00'), new Date('06/21/2013 17:00'), new Date('06/21/2013 18:00'), new Date('06/21/2013 19:00'),
new Date('06/21/2013 20:00'), new Date('06/21/2013 21:00'), new Date('06/21/2013 22:00'), new Date('06/21/2013 23:00'), new Date('06/22/2013 00:00'), new Date('06/22/2013 00:00'),
 
new Date('06/22/2013 01:00'),
                        ],
                        majorTickType: "none"
                    }
                });
Iliana Dyankova
Telerik team
 answered on 08 Jul 2013
1 answer
386 views
I am trying to implement server side filtering using the Kendo UI Grid and ASP .NET Web API RC.  It works fine with one column, but when the user filters on a second column issues occur.  The values for the second column seem to be included in the array of values for column one.  How can I parse this on the server?

I am including the JSON format of the data being passed to the server because it is easier to read.  Normally I have to pass the values in the query string.  If the JSON format could be used that would be better (so let me know if anyone knows how):

{"take":10,"skip":0,"page":1,"pageSize":10,"filter":{"filters":[{"field":"Column1","operator":"eq","value":"val1"},{"field":"Column1","operator":"eq","value":"val2"},{"logic":"or","filters":[{"field":"Column2","operator":"eq","value":5},{"field":"Column2","operator":"eq","value":1}]}],"logic":"and"},"group":[]}

Here are the c# objects for the mapping that I found online that currently only works with one column.  PageListArguments is the object that is used as the input parameter for the Get function of the Web API Controller.

    public class GridFilter
    {
        public string Field { get; set; }
        public string Operator { get; set; }
        public string Value { get; set; }
    }

    public class GridFilters
    {
        public List<GridFilter> Filters { get; set; }
        public string Logic { get; set; }
    }

    public class GridSort
    {
        public string Field { get; set; }
        public string Dir { get; set; }
    }

    public class PageListArguments
    {
        public int Take { get; set; }
        public int Skip { get; set; }
        public int Page { get; set; }
        public int PageSize { get; set; }
        public string Group { get; set; }
        public List<GridSort> Sort { get; set; }
        public GridFilters Filter { get; set; }
    }

Everything parses fine except for the filter when more than one column is used.
Eric
Top achievements
Rank 1
 answered on 08 Jul 2013
2 answers
52 views
Hi,
 I created a new mvc 4 web application project. I then compiled and ran the project.
 Then I went to the logon page and clicked on the username textbox. All is well.
 I then stopped the project, went to the telerik menu and chose convert to kendo.
 I then ran the project again and went to the login page and clicked on the username textbox.
 This time:

Unhandled exception at line 1234, column 5 in  /Scripts/jquery.validate.js0x800a138f Microsoft JScript runtime error: Unable to get value of the property 'call': object is null or undefined


 Very easy to reproduce, very hard to understand what's going on.
 Please help ... Ed
Randy Hompesch
Top achievements
Rank 1
 answered on 08 Jul 2013
7 answers
2.1K+ views
Site had a popup window which was an iframe to a partner page.

That partner page has a "close" link which closes the popup window.

I instead loaded the url into a kendo window (clearly, looks way better)...but now the close doesn't work.

Is there some way to hook into it such that it'll close the kendo window?

**NOTE**
I do not have the ability to change the content in the iframe
Dimo
Telerik team
 answered on 08 Jul 2013
3 answers
108 views
kendo ui grid in editable mode  can't validate the input value when I cut the value from the textbox and then paste it into the  textbox again,and I find the demo for it  has the same problem,so I think my code is OK, it's a bug,who can help me to fix it???
Kiril Nikolov
Telerik team
 answered on 08 Jul 2013
1 answer
370 views
I have a treeview with databound to remote data from database. What I need is to set the image (icon) for the leaf nodes. The leaf nodes are of two different types; based on their type I need to set the icon before the text of the leaf node. I can easily set the image for parent nodes by setting the css for ".k-treeview .k-plus" and ".k-treeview .k-minus", but I do not know how to do it for leaf nodes based on their type.  I do not see any example of how to do that in the treeview demo either. It has one section that shows how to set the leaf node image, but the tree nodes are hard coded in the view with their image url hardcoded. I need something that has remote data binding and the treeview created dynamically. Any information on that will be highly appreciated. Thanks.
Iliana Dyankova
Telerik team
 answered on 08 Jul 2013
0 answers
34 views
01.<ul data-role="listview" data-type="group" id="itemListView" data-click="listViewClick" data-style="inset" class="km-listview km-listgroupinset">
02.  
03.    <li class="km-group-container words" itype="5" id="40f7eb7a426e40dbbc7ae1c3c8dc6988">
04.    <div class="km-group-title">
05.        <divclass="km-text itemTitle">Test 1</div>
06.    </div>
07.    <ul class="km-list">  
08.       <li class="checkboxlimit" cbl="1" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="402881343face3ff013fad11f93a0026">B1</label></li>  
09.    </ul>
10.    </li>
11.      
12.      
13.    <li class="km-group-container words" itype="2" id="160265eecc6148c39a818913dcaf9870">
14.    <div class="km-group-title">
15.        <div class="km-text itemTitle">test2</div>
16.    </div>
17.    <ul class="km-list">   
18.        <li class="checkboxlimit"cbl="2"ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="402881343face3ff013fad11f7460021">A1</label></li
19.        <li class="checkboxlimit"cbl="2"ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="402881343face3ff013fad11f7940022">A2</label></li>  
20.        <li class="checkboxlimit"cbl="2"ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="402881343face3ff013fad11f7d20023">A3</label></li>
21.        <li class="checkboxlimit"cbl="2"ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="402881343face3ff013fad11f85e0024">A4</label></li>
22.    </ul>
23.    </li>
24.      
25.</ul>
there are two group of inputs , 
line 3 : test1 group 
line13: test2 group 
 the same code I test in v2012.3.1315 ,  everything is ok , but in this new version , when choose from the second group , check one itemfrom the second group , the first group's only one option can checked , but the one I choose in second group not checked correctly. for example , you can choose A3 or A4, repeatly for serval times , B1 will  be checked .
mociml
Top achievements
Rank 1
 asked on 08 Jul 2013
1 answer
914 views
Hello,

I am using Grids with the pageable option. I would like to keep the selected rows when the page is changed. The standard Grid behavior is, that the selection is not kept. But I already found an approach to store the row selection in the Change event and to restore it in the DataBound event.

global var:
    var selIdsAgentsInService = {};

In change event:
            // store selected rows of AgentsInService grid in selIdsAgentsInService array
            var ids = selIdsAgentsInService[gAgentsInService.dataSource.page()] = [];
            gAgentsInService.select().each(function () {
                dataItem = gAgentsInService.dataItem($(this));
                ids.push($(this).data().uid);
            });

In DataBound event:
        // restore selection
        var selected = $();
        var ids = selIdsAgentsInService[gAgentsInService.dataSource.page()] || [];
        for (var idx = 0, length = ids.length; idx < length; idx++) {
            selected = selected.add(gAgentsInService.table.find("tr[data-uid=" + ids[idx] + "]"));
            gAgentsInService.select(selected);
        }


This is still not exactly doing what I want, and therefore I am looking for a solution to handle the following use cases:

Use case 1 (which is working with my approach):
  1. a grid displays data spread over several pages
  2. rows are selected on page 1
  3. page is changed to another page without selecting any row and back to page 1
  4. the previously selected rows should still be selected
Use case 2:
  1. a grid displays data spread over several pages
  2. rows are selected on page 1
  3. page is changed to another page
  4. a single row is selected without pressing shift or ctrl
  5. page is changed back to page 1
  6. now the previously selected row from page on should be deselected
Use case 3:
  1. a grid displays data spread over several pages
  2. rows are selected on page 1
  3. page is changed to another page
  4. a single row is selected with pressing ctrl (to select an additional row)
  5. page is changed back to page 1
  6. now the previously selected row from page on should still be selected
Anyone having a solution for that? So I would like to support selecting additional rows by pressing ctrl and keeping the selection through all pages. Currently pressing or not pressing ctrl does not make difference in a Change event.

Regards
Sven
Dimo
Telerik team
 answered on 08 Jul 2013
2 answers
275 views
I have a combobox and a list view on a page. When ever an item is selected in the combo box it is suppose to load the listview with items from a table with the selected criteria. No matter what the data is not passed to the read method in the controller

The View
@(Html.Kendo().ComboBox()
        .Name("reportTablesCombo")
        .HtmlAttributes(userControlAttributes)                            
        .DataTextField("Text")
        .DataValueField("Value")                            
        .DataSource(source =>
        {
              source.Read(read =>
        {
                     read.Action("BuildSelectList", "ProgramManager", new { list = "Tables" });
        });
 })
       .Events(e =>
      {
             e.Change("Combo_onChange");
      })
 )     
@(Html.Kendo().ListView(Model)
      .Name("fieldListView")
       .ClientTemplateId("template")               
       .TagName("div")
       .Editable()
      .DataSource(dataSource =>{
                   dataSource.Model(model => model.Id("AdminFieldId"));
                    dataSource.Read(read => read.Action("_Read", "ProgramManager").Data("GetTable"));
                    dataSource.PageSize(10);   
        })
        .Pageable()  
 )
The javascipt

function Combo_onChange(e) {
 
       listdata.dataSource.read();
   }
 
   function GetTable() {
       debugger;
       var table = (reportTablesCombo != null  ? reportTablesCombo.text() : "");
       return table;
   }

the Read method in the controller. I have the debugger going and it returns the proper string but when it is read in the controller the value is ALWAYS null.

What am I doing wrong here?
public ActionResult _Read([DataSourceRequest]DataSourceRequest request, string table)
{
     var results = appDb.AdminFields.Where(t => t.AdminTableName == table);      
     return Json(results.ToDataSourceResult(request));
 }
Paul
Top achievements
Rank 1
 answered on 08 Jul 2013
6 answers
796 views

In MVC3 using VS 2010 I used this all the time no problem. You have an order. You want to be able to view the line items. So you click View in the Custom command of the data grid and it redirects you to a view with the line items for that order. I did this all the time with no issues

Problem: MVC4, VS 2012 and IE10.  Same type of thing. Click the button, it calls the Ajax which  calls the proper method in the controller and passes the parameter in but does not return the View.

I assume its a JQueary issue now. I have been pounding my head against the wall for a good day now and getting nowhere.


The View

@(Html.Kendo().Grid(Model).HtmlAttributes(gridAttributes)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Command(command => { command.Edit().CancelText("Cancel"); command.Custom("Select").Click("showFields");}).Width(150);
        
        
        columns.Bound(c => c.TableName).Width(200);
        columns.Bound(c => c.FriendlyName).Width(200);
        columns.Bound(c => c.SecurityLevel).Width(125);
        columns.Bound(c => c.CanReportOn).Width(125).ClientTemplate("<input type='checkbox' #= CanReportOn ? checked='checked' : '' # value='#=AdminTableId#' class=\"check_row\"/>");
         
 
    })

The Ajax call
BTW, the preventDefault makes no difference. Same result

function showFields(e) {
       // e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var tableName = dataItem.TableName;
              
         
        $.ajax({
            url: '@Url.Action("ShowFields", "ProgramManager")',
             type: 'POST',
              data: { tableName: tableName }
          });
         
    }

The Controller method

public ActionResult ShowFields(string tableName)
{
          var list = appDb.AdminFields.Where(p => p.AdminTableName == tableName);           
          var model = new AdminFieldModel
          {
               Fields = list,
               TableName = tableName
           };
          return View(model);
}
Paul
Top achievements
Rank 1
 answered on 08 Jul 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?