how to column freeze in kendo grid
suppose i have a 3 column in grid.
Name
Address
Address1

I want to Freeze column Name and not applied any kendo grid feature like Dragging,sorting,resizable etc..
it must be always in first place

Thanks
Mayank

Hi,  
     I'm using grid with  "reorderable: true", i encounter a problem , when where is no data avaiable, you can not see the column defined in grid, 
 becase you can not  scroll the grid to right. 

    Any suggestion is appreciated.

I have a panel bar with a list of item which have an image and a name. I'm trying to implement kendoDraggable to this Panel bar and what I do is:

In Chrome and IE this is working because on kendoDropTarget I can get the data-id, but in Firefox it doesn't work. 

Each item list have this format:

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

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 , 



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


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


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



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 

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.

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

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?

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?

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