Telerik Forums
Kendo UI for jQuery Forum
1 answer
185 views
I have a project where I am using a Kendo DropDownList in the MVVM paradigm.  The dropdownlist sources its data from a JavaScript array in the viewmodel and its value is bound to a property in the same viewmodel. 

The problem is the dropdownlist always remains on the first item.  I can choose "inactive" (the second item) and it updates viewModel.data.IsActive to "true" but the first "Active" item remains selected in the dropdown.  

If you change the initial viewModel.data.IsActive to false, then upon load the second "Inactive" item is selected in the dropdown.  But once I change it to "Active", it's stuck there, I can't get back to "Inactive"

What is wrong with this code?  Am I missing something simple?

Thanks,
Rod Early

The viewmodel:
    var viewModel = {};
    viewModel.data = {};
    viewModel.data.IsActive = true;
    viewModel.lookupData = {};
    viewModel.lookupData.status = [{
        value: true,
        text: "Active"
    }, {
        value: false,
        text: "Inactive"
    }];

The html:
<div class="container">
        <div style="margin: 10px 0 20px 20px">
          <span style="display:inline">Selected data</span>
           <span data-bind="text: data.IsActive">none provided</span>
    </div>
    <select id="theDropdown" data-role="dropdownlist" data-bind="source: lookupData.status, value: data.IsActive" data-text-field="text" data-value-field="value" />
</div>

And the binding:
    kendo.bind($(".container"), kendo.observable(viewModel));

This is all implemented in a  jsFiddle


Richard
Top achievements
Rank 1
 answered on 10 Dec 2013
5 answers
219 views
I have a line chart using a date series, and for some reason it is mapping points outside of the data range. 

My data starts Nov. 1st, but if I view the chart by week the first week shown is 10/27. If I view by month it shows October and November. This is a problem because I'm using onSeriesClick() to update data elsewhere on the page to reflect the clicked range.

How can I make sure Kendo limits the chart range to the dates in my object?
Iliana Dyankova
Telerik team
 answered on 10 Dec 2013
3 answers
260 views
I'm using a date series in a line chart with week and month groupings. It is currently displaying each point as what appears to be an average of data for that time period. I need it to display as a sum. 

Here is my initial chart code:

$("#overall-chart").kendoChart({
        title: {
            visible: false
        },
        dataSource: SPIData['trends']['dataUnfiltered'],
        legend: {
            visible: false
        },
        seriesDefaults: {
            aggregate: "sum"
        },
        series: updateSeries,
        valueAxes: valueAxes,
        valueAxis: {
            majorGridLines: {
                visible: false
            },
            minorGridLines: {
                visible: false
            },
            line: {
                visible: false
            }

        },
        categoryAxis: {
            majorGridLines: {
                visible: false
            },
            minorGridLines: {
                visible: false
            },
            majorTicks: {
                visible: false
            },
            minorTicks: {
                visible: false
            },
            //baseUnit: "months"
            baseUnit: bUnit
        },
        seriesClick: onSeriesClick,
    });

I have it set to swap out the chart to different data elements in the array using a radio, here is the push for that

        updateSeries.push({
            name: checkedVals[i],
            type: "line",
            axis: "metric",
            field: checkedVals[i],
            categoryField: "date",
            color: "#479ec2",
            aggregate: "sum"
        });


When I inspect in console I can see the options.series.aggregate is set to "sum", but it still does not show the summation on the chart. Is there something else I need to do?
Iliana Dyankova
Telerik team
 answered on 10 Dec 2013
0 answers
244 views
Hello,
I'm using the kendo panelbar to build an accordion in a corporate application, and I already profited of your help. I am using kendo.all version 2013.2.918.
My problem is that when I call the window containing the panelbar, the first time the event handlers apparently are not called. I'll try to explain helping myself with the code.
I need to do some processing and call a __doPostback(...) according to some conditions in the function called correspondingly to the select event. Basically
I have a initialization function InitPanelK() that iterates through the graphical elements and initializes the elements defined as panelbar.
I attach an event handler for the select, expand, collapse events
in the select event handler I have an alert and some processing with a __doPostback().
The point is that the first time InitPanelK() is called the alert of onSelect never appears, so the method is never called, if I exit-enter again, the alart pops out.

This is my barebone code

var pbuniqueid;
function HandleButtonEvent(e) {
//    alert('accordion HandleButtonEvent');
    $("#hdnKendoPanelbar").val("true");
    return true;
}
function CallServerPostBack(itemid) {
    var myid = 'AZBuilder1$' + pbuniqueid;
     __doPostBack(myid, itemid);
}
function onSelect1(e) {
    alert('accordion onSelect1');
    if ($("#hdnKendoPanelbar").val() == "true") {
        $("#hdnKendoPanelbar").val("false");
        selectedid = $(e.item).attr("id");
        CallServerPostBack(selectedid);
    }
}
function onExpand1(e) {
//    alert("Expand : " + $(e.item).find("> .k-link").text() + " " + $(e.item).attr('id'));
}

function onCollapse1(e) {
    //jkLog("Collapse cs: " + $(e.item).find("> .k-link").text());
}

var initPanelK = function () {
    var panelfields = [];
    $("#hdnKendoPanelbar").val("false");
    $('ul[data-role]').each(function () {
        if (typeof $(this).attr('id') === 'undefined') {
            return;
        }
        //        var pos = $(this).attr("id").indexOf("panelbar");
        var pos = $(this).attr('data-role').indexOf('panelbar');
        if (pos >= 0) {
            //alert("panelbar " + $(this).val() + '-' + $(this).attr("id"));
            var fieldname = "#" + $(this).attr("id");
            $(fieldname).kendoPanelBar({
                expandMode: "multiple",
                select: onSelect1,
                expand: onExpand1,
                collapse: onCollapse1
            });
            pbuniqueid = $(fieldname).attr("uniqueid");
            alert('pbuniqueid ' + pbuniqueid);
        }
    });
};

In the server-side code I register this script and call it as
        public const string INIT_KENDO_ACCORDION_START = @"
            <script type=""text/javascript""> 
            $(document).ready(function () { initPanelK(); });
            </script>
        ";
RegisterStartupScript(typeof(Page), "INIT_KENDO_ACCORDION", INIT_KENDO_ACCORDION_START);

What I verified is that the initialization function InitPanelK() is always called, the alert messages come out, so no script error seem to occur.
WHEN i ENTER THE SCREEN WITH THE ACCORDION, 
THE ACCORDION APPEARS
IT COLLAPSES/EXPANDs CORRECTLY BUT THE ALERT IN THE ONSELECT1 METHOD IS NEVER CALLED.
IF I CHANGE SCREEN AND REENTER, INITPANELK() IS CALLED AGAIN BUT NOW THE onSelect1 handler is always called.

Instead of using the event definition in initialization I tried to use the bind method as
$(fieldname).kendoPanelBar({
                expandMode: "multiple"
            });
            $(fieldname).data("kendoPanelBar").bind("select", onSelect1);

but the behaviour is the same.

In a simple application seems not to happen.
I will be very grateful for any hint, I'm spinning around the problem.

Thanks for your kind attention,

bet regards

marco
marco
Top achievements
Rank 1
 asked on 10 Dec 2013
2 answers
206 views
How could I get the selected data of a kendo grid and send them to controller for being read? How could I get it with the corresponding ViewModel?
Vladimir Iliev
Telerik team
 answered on 10 Dec 2013
1 answer
125 views
I have several filter options in a kendo grid and I need to get data from the controller after being filtered. How could I do that?
Vladimir Iliev
Telerik team
 answered on 10 Dec 2013
1 answer
155 views
I know there's a previous thread with a couple "Back" button issues reported, but it's older and not sure it's related to this issue.  So new thread.

If I use a parameter to filter a list, when I go "Back" to that list, the parameter is undefined.  My app has two layouts, the phone layout doesn't have a splitview and the tablet layout does.  This undefined parameter problem only happens on the tablet splitview layout, and the "Back" button behaves fine if it's not in the splitview.

I took the sample products from the demo, and moved all 3 views into the same pane so you can see what I mean.  This standalone page illustrates the issue.  If you pick a category, then pick a product, it will show you the product details.  Hit "Back" and you will get a perpetual "loading..." because the "CategoryID" parameter is undefined when you go "Back".

This example doesn't contain any of my own code, just moved the views to the main pane.
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div data-role="splitview">
    <div data-role="pane" data-layout="side-default" data-transition="slide">
        <div data-role="layout" data-id="side-default" data-show="toggleBackButton">
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </div>
        </div>
        <div data-role="view" data-title="Empty Pane">
            Empty Pane
        </div>
    </div>
 
    <div data-role="pane" data-layout="main-default" id="main-pane">
        <div data-role="view" data-title="Categories" id="side-root">
            <ul data-role="listview" data-style="inset" data-source="splitViewCategories" data-template="categoriesTemplate">
            </ul>
        </div>
 
        <script id="categoriesTemplate" type="text/x-kendo-template">
            <a href="\#side-inbox?CategoryID=#: CategoryID#" data-target="main-pane">#: CategoryName #</a>
        </script>
 
        <script id="productsTemplate" type="text/x-kendo-template">
            <a href="\#orders?ProductID=#: ProductID #" data-target="main-pane">
                <span class="date">$#: UnitPrice#</span>
                <h3>#: ProductName #</h3>
                <span class="excerpt">#: QuantityPerUnit #</span>
            </a>
        </script>
 
        <div data-role="view" id="side-inbox" data-title="Products" data-show="filterProducts">
            <ul data-role="listview" data-auto-bind="false" data-source="splitViewProducts" data-template="productsTemplate">
 
            </ul>
        </div>
 
        <script type="text/x-kendo-template" id="ordersTemplate">
            <dl>
                <dt>Discount</dt>
                <dd>#: Discount #</dd>
                <dt>Quantity</dt>
                <dd>#: Quantity #</dd>
                <dt>UnitPrice</dt>
                <dd>#: UnitPrice #</dd>
            </dl>
        </script>
 
        <div data-role="view" data-title="Orders" id="orders" data-show="displayOrder">
            <div id="product-details">
            </div>
        </div>
 
        <div data-role="layout" data-id="main-default">
            <div data-role="header">
                <div data-role="navbar">
                    <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
                    <span data-role="view-title"></span>
                    <a data-role="button" href="#index" data-align="right" data-target="_top">Index</a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<script>
    var categoryID = null;
 
    var splitViewCategories = new kendo.data.DataSource({
        type: "odata",
        transport: {
        }
    });
 
    var splitViewProducts = new kendo.data.DataSource({
        type: "odata",
        serverFiltering: true,
 
        transport: {
            read: {
                url: "http://demos.kendoui.com/service/Northwind.svc/Products"
            }
        }
    });
 
    var splitViewOrderDetails = new kendo.data.DataSource({
        type: "odata",
        serverFiltering: true,
        transport: {
            read: {
                url: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
            }
        },
 
        change: function () {
            var template = kendo.template($("#ordersTemplate").text());
            $("#product-details").html(kendo.render(template, this.data()));
        }
    });
 
    function displayOrder(e) {
        splitViewOrderDetails.filter({
            field: "ProductID",
            operator: "eq",
            value: parseInt(e.view.params.ProductID)
        });
 
        splitViewOrderDetails.read();
    }
 
    function filterProducts(e) {
        splitViewProducts.filter({
            field: "CategoryID",
            operator: "eq",
            value: parseInt(e.view.params.CategoryID)
        });
 
        splitViewProducts.read();
    }
 
    function toggleBackButton(e) {
        if (e.view.id === "#side-inbox") {
            e.view.element.find("[data-role=backbutton]").css("visibility", "");
        } else {
            e.view.element.find("[data-role=backbutton]").css("visibility", "visible");
        }
    }
</script>
 
<style scoped>
    #side-inbox .date {
       float: right;
       color: rgba(200,200,200,.8);
       font-size: .7em;
       font-weight: normal;
    }
 
    #side-inbox .excerpt {
       clear: both;
       font-size: .7em;
       font-weight: normal;
    }
 
    #side-inbox .km-content h3 {
       margin-left: 0;
    }
    #main-pane .km-content{
        padding: 30px;
    }
 
    #main-pane dl {
        float: left;
        margin: 0;
        padding: 0 0 20px 0;
    }
 
    #main-pane dl:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
 
    #main-pane dt, #main-pane dd {
        display: block;
        float: left;
        margin: 0;
        padding: 0;
    }
 
    #main-pane dt {
        clear: left;
        text-align: right;
        padding: 0 10px;
    }
</style>
 
 
<script>
    var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Kiril Nikolov
Telerik team
 answered on 10 Dec 2013
1 answer
89 views
hello 

i new with kendo ui and i testing it for my new project, I use  the grid and i have column with ip range, and i get the results dynamic from the server.
when i press on the header of the IP column  the grid sorted, but when a new result arrived it doesnt sort as it should be, 
and second how can i override the sort method so i get the ip in order as numbers "10.0.1.1, 10.0.1.2, 10.0.1.10" instead of string "10.0.1.1, 10.0.1.10, 10.0.1.2"

Thanks 
Dimiter Madjarov
Telerik team
 answered on 10 Dec 2013
5 answers
378 views
I have a grid with edit mode set to 'inline'.
It has a remote dataSource with only the transport 'read' options set.

I am looking for a way to close a row edit (similar to closeCell, but for a whole row) in the grid , without the grid attempting to update the dataSource.

THE PROBLEM:   
At the moment, if I call saveRow, a dataSource sync is attempted, but fails and the grid remains in edit mode.  If I call cancelRow, the updates are lost from
the grid.

The sync fails as no transport 'update' option is specified in the dataSource. I do not want to specify the transport update, create and destroy options, as  I
want to perform my own updates, rather than have the dataSource do this. I want to maintain the updates in the grid (with red triangles to say which cells are dirty), and then manually post these to my server at the appropriate time, rather than have the dataSource do this immediately.

So when the user clicks the row's "edit" button the whole row must go into edit mode, the user captures the data and clicks the "save" button. 
I want to
1. visually take the row out of edit mode,
2. still show the red triangles for the data that is dirty,
3. raise an event that the grid row has been committed.
4. A separate class can subscribe to this event and be responsible for saving the dirty grid data.
5. We will use Signal R to notify database changes to the client, which will refresh these changed rows in the grid and remove the red triangles.

I am having problems with points 1 and 2.

Any help would be appreciated. Thanks.
Vladimir Iliev
Telerik team
 answered on 10 Dec 2013
1 answer
109 views
I have scheduler gruping by its resource. Then i create a new all day event by double clicking the cell and the resource is selected in the editor. Then i made the scheduler selectable, and I select 3 day event and hit enter but my resource group is not automatically selected.
We need this because in custom template user won't be able to change that resource from  the dropdown and we don't know how to get the selected id of the resource. 
I've attached some pictures.

Thank you
Georgi Krustev
Telerik team
 answered on 10 Dec 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?