Hello,

On select event of a panel bar item, I want to make an ajax call and set the content for sub item.

I started with the sample code as shown below. The issue is, it only sets the content for 1st item.

Thanks for your time and help.

--
Hiren

 <script id="resultstemplate" type="text/x-kendo-template">
       <ul id="resultsPanelBar">
           # for (var i = 0; i < data.length; i++) { #
                <li>#= data[i].name #<br/>#= data[i].addressLine1 #<br/>#= data[i].addressLine2 #, #= data[i].phone #
                                   <span style="display:none">|#= data[i].comprehensiveProviderId #</span>
                             <ul  id ="resultDetails"></ul>
                </li>
        # } #
       </ul>
    </script>    
function onSelect(e) {
        var selectedText = $(e.item).find("> .k-link").text();
        var splitSelectedText = selectedText.split('|');
        console.log("selectedText : " + selectedText);
                 console.log("Comprehensive Provider ID  : " + splitSelectedText[1]);
                
              $("#resultDetails").html("<li>"+splitSelectedText[1] +"</li>");
             }
               

Hi,

I am developing on Razor based ASP.NET MVC 5 web application using Visual Studio 2013. A partial view has a Kendo UI Grid and inside this grid there is a kendo ui autocomplete widget. Selection made from a dropdownlist populates this grid. The dropdownlist is outside the grid. I tried several ways including this one (http://www.telerik.com/forums/autocomplete-in-grid-column-samples-for-razor) but obviously it still didn't work in my case. 

The issue is that autocomplete is not working as it does not display the values which it suppose to show when typing inside the autocomplete. Below is the grid and autocomplete code in the partial view:

​ @(Html.Kendo().Grid(Model.Risks)
.Name("gridRisks")
.Columns(col =>
{
col.Bound(m => m.RiskID).Title("RiskID").Hidden();
col.Template(m=>{}).ClientTemplate(
Html.Kendo().AutoComplete()
.Filter("contains")
.Name("AutoCompleteRisks#=Risk#")
.DataTextField("Risk")
.BindTo(Model.AllAvailRisks)
.ToClientTemplate()
.ToHtmlString()
);
col.Command(c => c.Destroy());
})
.Pageable()
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Sortable()
.DataSource(d => d
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model => {
model.Id(r => r.RiskID);
model.Field(r=>r.Risk).Editable(true);
})
.Create("Editing_Create", "Builder")
.Read("Editing_Read", "Grid")
.Update("Editing_Update", "Builder")
.Destroy("Editing_Destroy", "Grid")
)
)

And I put the following javascript code inside an included javascript file:

function dataBound(e) {
this.element.find("script").appendTo(document.body);
}

The included javascript file (which contains the abvove javascript code) is added in the main view like this :

​@section Scripts {
<script src="@Url.Content("~/Scripts/Office/PDFInc.js")"></script>
}

Also importantly, the rendered HTML code for autocomplete is as follow. This rendered HTML already has all the required values (risk 1 through risk 7) which autocomplete should display when typing in the autocomplete space but even then it is not displaying these values which I think rendered correctly. 

<td role="gridcell"><input id="AutoCompleteRisks1" name="AutoCompleteRisks1" type="text"><script>
 jQuery(function(){jQuery("#AutoCompleteRisks1").kendoAutoComplete({"dataSource":[{"RiskID":5,"Risk":"risk 1"},{"RiskID":6,"Risk":"risk 2"},{"RiskID":7,"Risk":"risk 3"},{"RiskID":8,"Risk":"risk 4"},{"RiskID":9,"Risk":"risk 5"},{"RiskID":10,"Risk":"risk 6"}],"dataTextField":"Risk","filter":"risk 7"});});
</script></td>

I shall be thankful for help in resolution of this issue.

Thanks,

I have a currency field set up on a KendoUI Grid like so:

DailyPriceChange: { type: 'number' },

It's column definition is as follows (as suggested by numerous other posts available here and elsewhere):
                {
                    title: 'Daily Price Change',
                    field: 'DailyPriceChange',
                    template: '#= IA.Kendo.Renderers.renderCurrency(DailyPriceChange) #',
                    attributes: { 'class': 'numeric' },
                    sortable: {
                        compare: function(a, b) {
                            return a === b ? 0 : ((a > b) ? 1 : -1);
                        }
                    }
                }

As an aside, the columns for the grid are actually built up in a private function that is used to set the .columns property on the datasource. The template just adds some formatting, and is not of course the underlying value that is being sorted.

My issue is that with or without the custom sortable function object, the data does not sort ASC correctly in IE9+ or FireFox (even recent), but does quite well in Chrome (any recent version). I would like to debug into the custom sortable object in Chrome Developer Tools, but a breakpoint on the compare function body is never hit when sorting, which makes me wonder if the code is even being executed. I even tried adding an alert() inside the function, but it is never seen. However, I can see the function definition when I examine the sortable property of the column in Developer Tools.

I have made a work-around to set all null values to 0 when the data is fetched (by using the parse override in the fields spec), but that not acceptable to the user community. 

Hi,

This thread is different than my previous post. I am working on asp.net mvc5 razor based web application using visual studio 2013. The partial view has a kendo grid and inside this grid there is an autocomplete widget. The autocomplete should also display default value bound to it when the webpage is loaded. However the autocomplete is neither displaying any default value nor when typed in it . However clicking two times (first click outside the autocomplete box but with in the same grid cell display the default bound value and then second click anywhere on the webpage enable the autocomplete functionality) enable the autocomplete functionality. Here is the code for Grid and Autocomplete:

@(Html.Kendo().Grid(Model.Risks)
.Name("gridRisks")
.Columns(col =>
{
col.Bound(m => m.RiskID).Title("RiskID").Hidden();
col.Bound(m => m.Risk).Title("Risk(s)").ClientTemplate(
Html.Kendo().AutoComplete()
.Filter("contains")
.Name("AutoCompleteRisks#=Risk#")
.DataTextField("Risk")
.BindTo(Model.AllAvailRisks)
.ToClientTemplate()
.ToHtmlString()
);
col.Command(c => c.Destroy());
})
.Pageable()
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.DataSource(d => d
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model => {
model.Id(r => r.RiskID);
model.Field(r=>r.Risk).Editable(true);
})
.Create("Editing_Create", "PDFBuilderKIDs")
.Read("Editing_Read", "Grid")
.Update("Editing_Update", "PDFBuilderKIDs")
.Destroy("Editing_Destroy", "Grid")
)
)

Here is the rendered HTML (before those two clicks) for the autocomplete in the grid cell:

<td role="gridcell"><input id="AutoCompleteRisks1" name="AutoCompleteRisks1" type="text"><script>
 jQuery(function(){jQuery("#AutoCompleteRisks1").kendoAutoComplete({"dataSource":[{"RiskID":5,"Risk":"risk 1"},{"RiskID":6,"Risk":"risk 2"},{"RiskID":7,"Risk":"risk 3"},{"RiskID":8,"Risk":"risk 4"},{"RiskID":9,"Risk":"risk 5"},{"RiskID":10,"Risk":"risk 6"}],"dataTextField":"Risk","filter":"contains"});});
</script></td>

Here is the rendered HTML (after those two clicks) for the autocomplete in the grid cell:

<td role="gridcell" class="" data-role="editable"><span tabindex="-1" role="presentation" class="k-widget k-autocomplete k-header k-state-default k-state-hover"><input id="AutoCompleteRisks1" name="AutoCompleteRisks1" type="text" data-role="autocomplete" style="width: 100%;" class="k-input" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-owns="AutoCompleteRisks1_listbox" aria-autocomplete="list"><span class="k-icon k-loading" style="display:none"></span></span><script>
 jQuery(function(){jQuery("#AutoCompleteRisks1").kendoAutoComplete({"dataSource":[{"RiskID":5,"Risk":"risk 1"},{"RiskID":6,"Risk":"risk 2"},{"RiskID":7,"Risk":"risk 3"},{"RiskID":8,"Risk":"risk 4"},{"RiskID":9,"Risk":"risk 5"},{"RiskID":10,"Risk":"risk 6"}],"dataTextField":"Risk","filter":"contains"});});
</script></td>


Thanks and will be obliged for resolution of this strange issue. I have also attached a screenshot.

My mobile listview worked correctly when I had my datasource embedded in the JS on the page, but when I tested using the exact same dataSource on a seperate json file the application breaks saying "Uncaught TypeError: Cannot read property 'type' of undefined" in the Simulator debugger.
Here is the html


And here is my Javascript



Here is the JSON File:


I have tried several different things and have gotten errors all revolving around "uncaught TypeError" and I can't figure out what I am doing wrong. Please help.

P.S I did have kendo.parseDate() for the "day" and then I used kendo.toString() to set the template title to be the Month and day and that all worked fine with the embedded dataSource as well. I took it off for this question.

Hi
  Using the example here

http://www.telerik.com/forums/kendo-window-appearing-absurdly-small

If you change the content of the window then the window seems to size itself accordingly. If you set a title like below then it only shows so much before showing an ellipsis. Is this a bug/feature or is there some property which says to size itself according to the minimum size of the content or title?

var wnd = $("#window").kendoWindow({ visible: false, title: "abcdefghijk" }).data("kendoWindow");

thanks

I want to call a long-time running server-side job. During the process, I am going to refresh a log table in the client-side. Because of some concerns about platform and user experiences(with regard to browser, HTML5 support and etc.), as far as possible I want to get ride of WebSocket and SignalR programming. 
In this case the first solution is, in an interval, client connects to the server and read a log file and show in HTML.

I want to know is there any ready solution using KendoUI controls and functionalities?

Thanks of all,
Hedayat

Hi

I am using Kendo mobile ui app builder  visual studio extension.
I am developing a Hybrid mobile application which targets all the mobile platforms  and tablets

When I installed the Trial version of the Visual studio extension when i create a  sample try to publish the app i can see android , Phone and Windows phone.However i cant see how to publish for blackberry and tablets? I have attached a screenshot , what i see when click on publish in visual studio.

Can you please help on this.

Thanks and Regards
Harshavardhan reddy

I have two sortable areas connected to each other. Both of the areas can have sortable in there own respective area and also to each other.

There are certain elements that I want restrict for getting dragged to each other but should be allowed to be sorted in there own area.

Is it possible to achieve this with current release. If yes, please provide some guideline.

Hi,

I have a MVC application with kendoComboBox populated with States using knockout binding. I can open the ComboBox dropdown when my application runs on its own. However, when my application is opened inside a cross-site Telerik RadWindow, I got the "Access is denied" javascript error while trying to open the dropdown. It happens in IE10 and IE11. With the F12 debugger, it highlights the following in a Kendo file with the js error.

File: kendo, Line: 1, Column: 20542

Is kendoComboBox supported in a cross-site RadWindow scenario? Any help will be greatly appreciated.
I'm using kendo version 2013.2.716 and MVC 4.0.

Thanks,
Jocelyn