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. 

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.