I need to show Hierarchical data in Listview with filtering enabled; I am not sure how to approach it. Here is sample data:
Level 5
 -Level 5 item1
   - Level 4
      -Level 4 item 1
        -Level 3 
          -Level 3 item1
          - Level 3 item 2
      -Level 4 item 2
 -Level 5 item2

Online demo example shows similar data, but its calling a service to get the data, depending on parent. Online demo

I don’t have a service yet, trying to implement this using local data, but not having any luck. Also, is the service code used by online demo’s available on github? I want to see how service methods are implemented.

Don’t think I need multiple listview controls since structure of each level data is same.

Will appreciate if you can point me to working sample.

Thanks!

Due to the size restrictions on my page, I would like to only show the validation icon beside each field and have the message within a tooltip of that icon.

In other words, is there a way to go from this (default generated):



To this:

Hi,
I use the KendoGrid to display some data returned by a MVC3 crontroller.
Data are successfully displayed, but the kendoGrid's pager display "Page 0 of NaN"

Here is my JS: 

        var sectionId = $("#myKendoCombobox").val();
        $("#myKendoDiv").kendoGrid({
            scrollable: true,
            sortable: true,
            pageable: true,
            selecteable: false,
            filterable: true,
            dataSource: {
                    transport: {
                        read: {
                            url: _pathRoot + "GetDataById",
                            data: { sectionId: sectionId },
                            dataType: "json",
                            type: "GET",
                            contentType: "application/json; charset=utf-8"
                        }
                    },
                    schema: {
                        data: "data",
                        total: "total"
                        },
                    pageSize: 1,
            },

            pageable: {
                refresh: true,
                input: true,
                numeric: false
            },       
           columns: [ ... ]
        });


I tried to use un function for the "total" parameter, like this :                         total: function (response) {
                            alert(response.total);
                            return response.total;
                        }
And the message box successfully display my number of items, so it's not a problem of proprty name.

Could you help me to fix that problem ?
Thanks in advance.

Using a Grid, what is the event that is fired when something is "grouped".  I want to run a function but only when someone drops a column header into the "group by" area.

Furthermore, is there an event that fires when you remove the grouping.  Meaning you click on the little "x" of the last grouped element.

Thanks,
Jason

Hi,

I want to refresh the list of snippet from javascript so that i can change snippet list by changing a option.

i have tried this way but list won't get refresh. any possible way to fix this.

    function PopulateSnippets(data) {
        var editor = $("#Body").data("kendoEditor");
        editor.options.insertHtml.length = 0;
        
        var snippetArray = [];
        $(data).each(function (index, item) {
            snippetArray.push({
                text: item.Text,
                value: item.Value
            });
        });
        editor.options.insertHtml = snippetArray;
    }

Hello,

When uploading files, we have the need to set the withCredentials to false on the XmlHttpRequest. My upload event implementation is as follows:


The problem is that the code inside of kendo.all.js for postFormData() overrides the withCredentials value with a "true" after the xhr open event is fired. Thus overriding any setting to the string value of "true", prior to sending.

The code in kendo.all.js is as follows:


A fix for the issue would be to set the withCredentials value prior to opening the xhr as follows:


Please let me know if I am doing something wrong, or if there any plans to change this.

I know this is possible with your typical view, but perhaps this is not supported by modal views?

I am trying to open a modal view with a query param like:
However when I click on the link/button I get this error:
Uncaught Error: Syntax error, unrecognized expression: #myModalView?someParam=123

Is this unsupported on Modal Views?

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.