Telerik Forums
Kendo UI for jQuery Forum
1 answer
491 views
I have been annoyed that I don't get any html syntax highlighting in visual studio 2012 within my kendo templates such as:

<script id="my-template" type="text/x-kendo-template">
    <div>.....</div>
 </script>


I found this stackoverflow question that explains you can just use text/html as the type instead of text/x-kendo-template.

This indeed works!

Can you confirm this is a valid workaround and it won't break in the future? Or suggest an alternative?

Thanks

Atanas Korchev
Telerik team
 answered on 11 Dec 2013
6 answers
1.6K+ views
HI , 

I have a requirement to  save and fetch data getting from ODATA service in local storage. I am able to fetch data from ODATA feed  and subsequent create KendoUI DataSource. I am using this DataSource to bind to KendoUI Mobile ListView as following , 

speakerData = new kendo.data.DataSource(
              {
                  type: "odata",
                  transport: {
                      read: {
                          // the remote service url
 
                          url: "http://server/Service.svc/Sessions",
                          dataType: "jsonp",
 
                          data: {
                              Accept: "application/json"
                          }
                      }
                  },
                  serverfiltering: true,
                  serverPaging: true,
                  pageSize: 10,
                  batch: false
              });


i am able to use this DataSource in KendoUI ListView as following , 

$("#speakersView").kendoMobileListView(
               {
                   template: "<strong>${Title }</strong>",
                   dataSource: speakerData
 
               });

Now I am trying to save returned data on local storage as following 

localStorage.setItem('speakerData', JSON.stringify(speakerData.data()));

and creating new  DataSource where I am reading data from local storage not from the ODATA Feed as following 

var ospeakerData = localStorage.getItem('speakerData');
               speakerData1 = JSON.parse(ospeakerData);
               speakerData = new kendo.data.DataSource(
               {
                   transport: {
                       read: function (options) {
                           var data = speakerData1
                           options.success(data);
                       }
                   }
                    
                  
               });


But it seems it is not working .. when I did console.log of JSON.stringify(speakerData.data())  .. it returns ana empty array [].

Please help me to save returned feed from ODATA  or in other words save datasource.data on local storage. 

Thanks 
Dhananjay 

Lino
Top achievements
Rank 2
 answered on 11 Dec 2013
1 answer
83 views
I'm working on a project where accessibility is important. I just discovered that there seems to be no way to use the pager control using the keyboard. I cannot tab to it, nor can I figure out how to go to the next page using the keyboard. I'm using the pager with a ListView.
Dmitri
Top achievements
Rank 1
 answered on 10 Dec 2013
1 answer
196 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
226 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
269 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
253 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
216 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
163 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
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?