Hi,

      I have two treeview widget (source and target treeview), when I check any sub-node from Optional root node of the source treeview (this treeview has three root levels -Optional, Mandatory and All- within are its corresponding sub-nodes ) I want copy the sub-node to the corresponding root node of the target treeview, for that I'm doing this:

 <script>

 function onCheckCopyNode(sourceTreeView, targetTreeView)   
    {
        sourceTreeView.dataSource.bind('change', function (e) {
            var sourceNodes = sourceTreeView.dataSource.view();
            var targetNode = targetTreeView.findByText('Optional');
             for (var i = 0; i < sourceNodes.length; i++) {
                var sourceChildren = sourceNodes[i].children.view();
                if (sourceChildren) {
                    for(var j = 0; j < sourceChildren.length; j++){
                        if((typeof sourceChildren[j].checked!==undefined)&&(sourceChildren[j].checked)){
                            targetTreeView.append(sourceChildren[j], targetNode);
                        } else  if((typeof sourceChildren[j].checked!==undefined)&&(sourceChildren[j].checked)){

                                        var element = targetTreeView.findByUid(children[i].uid);
                                        targetTreeView.remove(element);

                            }

                    }
                }
            }

        });

    }

function KendoHierarchicalDataSource(element, data, textFields, checkBoxOption, dragAndDropOption, onLoadCopyNode) {

    element.kendoTreeView({
        checkboxes: {
            template: "<input type='checkbox' #= (item.Selectable === false) ? 'disabled' : '' #>", //#= item.Selectable ? 'checked' : '' #
            checkChildren: checkBoxOption
        },
        dragAndDrop: dragAndDropOption,
        dataSource: data,
        dataTextField: textFields
    });
}

     $(document).ready(function () {
        KendoHierarchicalDataSource($('#s-field-treeview'), [{ MandatoryId: 1, MandatoryName: 'Optional' }, { MandatoryId: 2, Selectable : false, MandatoryName: 'Mandatory' }], ['MandatoryName', 'FieldName'], true, true, null);
        KendoHierarchicalDataSource($('#a-field-treeview'),@Html.Raw(Json.Encode(@ViewBag.fields.Data)), ['MandatoryName', 'FieldName'], true, true, onLoadCopyNode);
        onCheckCopyNode($('#a-field-treeview').data('kendoTreeView'), $('#s-field-treeview').data('kendoTreeView'));
    });

</script>

The code above inserts the checked sub-node to the corresponding root node of the target treeview; this is removed when I uncheck the source sub-node, the troubles comes when I try it add again because the target treeview doesn't refresh, then I need check another source sub-node for the change event to be fired

I test simple chart example with below data. it contains one DATE typed data and two NUMBER typed data. actually I make a chart with DATE category and NUMBER value :

<DATA :  data_small.json>
[
  {
    "START_DATE": "2011-11-02T00:00:00",
    "USE_PERCENTAGE": 38,
    "RESOURCE_ID": "RS_ASSEMBLER",
    "USE_TIME": 32400
  },
  {
    "START_DATE": "2011-11-03T00:00:00",
    "USE_PERCENTAGE": 75,
    "RESOURCE_ID": "RS_ASSEMBLER",
    "USE_TIME": 64800
  },
  {
    "START_DATE": "2011-11-04T00:00:00",
    "USE_PERCENTAGE": 71,
    "RESOURCE_ID": "RS_ASSEMBLER",
    "USE_TIME": 61200
  },
  {
    "START_DATE": "2011-11-05T00:00:00",
    "USE_PERCENTAGE": 72,
    "RESOURCE_ID": "RS_ASSEMBLER",
    "USE_TIME": 0
  },
  {
    "START_DATE": "2011-11-10T00:00:00",
    "USE_PERCENTAGE": 60,
    "RESOURCE_ID": "RS_ASSEMBLER",
    "USE_TIME": 0
  },
  {
    "START_DATE": "2011-11-15T00:00:00",
    "USE_PERCENTAGE": 90,
    "RESOURCE_ID": "RS_ASSEMBLER",
    "USE_TIME": 77400
  },
  {
    "START_DATE": "2011-11-20T00:00:00",
    "USE_PERCENTAGE": 61,
    "RESOURCE_ID": "RS_ASSEMBLER",
    "USE_TIME": 52200
  },
  {
    "START_DATE": "2011-11-02T00:00:00",
    "USE_PERCENTAGE": 49,
    "RESOURCE_ID": "RS_BOX_PACKER",
    "USE_TIME": 0
  },
  {
    "START_DATE": "2011-11-03T00:00:00",
    "USE_PERCENTAGE": 24,
    "RESOURCE_ID": "RS_BOX_PACKER",
    "USE_TIME": 20400
  },
  {
    "START_DATE": "2011-11-04T00:00:00",
    "USE_PERCENTAGE": 18,
    "RESOURCE_ID": "RS_BOX_PACKER",
    "USE_TIME": 15000
  },
  {
    "START_DATE": "2011-11-05T00:00:00",
    "USE_PERCENTAGE": 30,
    "RESOURCE_ID": "RS_BOX_PACKER",
    "USE_TIME": 0
  },
  {
    "START_DATE": "2011-11-10T00:00:00",
    "USE_PERCENTAGE": 85,
    "RESOURCE_ID": "RS_BOX_PACKER",
    "USE_TIME": 0
  },
  {
    "START_DATE": "2011-11-15T00:00:00",
    "USE_PERCENTAGE": 14,
    "RESOURCE_ID": "RS_BOX_PACKER",
    "USE_TIME": 12000
  },
  {
    "START_DATE": "2011-11-20T00:00:00",
    "USE_PERCENTAGE": 18,
    "RESOURCE_ID": "RS_BOX_PACKER",
    "USE_TIME": 15000
  }

]

with codes below, I get the result like "reslut1". I didnt set categoryAxis.type. the result is : chart shows every DATE category data but without formatting it.

actually I like it. because this is matchs with my indend. but I want DATE category should be formatted.

<CODE1>

<script>
        function makeBody() {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: './data_small.json',
                success: function (data) {
                    var chartData =  data;
                    var chart = $("#chart").data("kendoChart");
                    var chartDataSource = chart.dataSource;
                    chartDataSource.data(chartData);
                },
                error : function(a, b, c){
                    console.log("error a:" + a +" b:" + b + " c:"+ c);
                }
            });
        }
        function makeChart() {
        
            var stocksDataSource = new kendo.data.DataSource({
                group: {
                    field: "RESOURCE_ID"
                },
    
                sort: {
                    field: "START_DATE",
                    dir: "asc"
                },
    
                schema: {
                    model: {
                        fields: {
                            START_DATE: {
                                type: "date"
                            }
                        }
                    }
                }
            });
        
            function createChart() {
                $("#chart").kendoChart({
                    title: { text: "Test chart" },
                    dataSource: stocksDataSource,
                    series: [{
                        type: "line",
                        field: "USE_PERCENTAGE"
                    }],
                    legend: {
                        position: "bottom"
                    },
                    categoryAxis: {
                        field: "START_DATE",
                        crosshair: {
                            visible: true
                        },
                        // type: "date",
                        labels: {
                            rotation: "auto",
                            format: "yyyy-MM-dd" // 날짜 형식
                        }
                    }
                });
            }
            $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart);
            
        }
        
        makeChart();
        makeBody();
        
    </script>

after this, I tried with 'type: "date",' (which is commented in above code) .(result2) I hope I get the same result with the result1 but DATE category is formatted well. but I find there are some more data than my original data. I think kendo makes some additional data with 'type=date'. am I right?

then how can I get the result like 'result1 with formatted DATE category'?

thanks in advance.

Hey,

I am trying to insert custom toolbar buttons (and actions) for our kendo grid. I would like to keep the existing functionality the same (i.e. the create and export to excel functions) but add additonal custom buttons by means of a toolbar template. Below is the existing code.

I have seen posts where the recommend hard coding the new buttons in data-toolbar parameter, and also via a template and calling

And other such variations, nothing seems to work as of yet. Everything returns either an invalid template error or simple prints out the string literal that was inputted.

As I said ideally I wouldn't have to reimplement the functionality of the existing create and excel buttons but add additional buttons with will call my own functions.

Any help would be great.

I need help returning Json data back and populating a very simple grid, here is my code:

Model:

View:

Controller:

The grid loads fine but now data. What am I missing? This is based off of the inline-editing demo for kendo-ui.

Thanks

Hello,

Is there a way so that when I open up the filter in the grid, "Contains" will be the default in the dropdownlist? Instead of the first item in the list ?

Regards,

Emil

I seem to be having a problem posting the selected values from my Kendo Multiselect widget to an action on my controller. I've never had this issue before and as far as I know I am doing everything right, but something is obviously causing an issue.

I have this input on my view:

Here is my viewmodel:

JavaScript:

And a snippit of my controller:

All of the rest of the values post to the controller just fine. But when I hover over the model this is what I see for "ProductHandlingTypes" (I've attached a screenshot)

I'm building a mobile application using Phonegap and Kendo UI. I have 2 mobile listviews in my application, one list has only one element, and the other has about 100. I've noticed that when I tap the list with only the single item and drag down slightly, the click event on the list item won't fire, yet it still navigates to the next screen when this happens.

The template for my listview looks like this:

<script type="text/x-kendo-tmpl" id="list-template">
<div class="notice" data-​id="\#id">
<a href="\#another-page">
<div class="table-cell">
<div class="notice-list-header">
<h3 class="notice-list-date">#:start_date#</h3>
</div>
<div class="notice-list-body">
<p class="list-meta">#:title#</p>
</div>
</div>
</a>
</div>
</script>​

I think what's happening​ is because of the anchor tag in the template it still navigates to the page its supposed to, but because I have code in the click event to populate the page that the list item navigates to, I end up with a blank page because the click event hasn't fired.

I don't have this problem with the other listview that has several items, so my guess is that when a listview is scrolled kendo internally prevents the default behaviour of the list item, which in this case in an anchor tag.

I tried to work around this by removing the anchor from my template and then used navigate() in the click event of the list item, which does work, but when I do it this way, an extra click event is fired on the page that is navigated to so the first item on that page is automatically clicked.