Kendo UI Grid query

[Man]

I have a search form which will get a list of records.

I would like to bind the search results on pressing submit after performing some initial ​checks on the entered data. How do i bind my action result to the Kendo Grid ?

 My JS File is 

function validateDataForSearch() {
        var empNo = $("#empNo").val();
        var empName = $("#empName").val();
        var empMgr = $("#empMgr").val();
        var clientName = $("#ClientName").val();

        var noValues = empNo.length + empName.length + empMgr.length + clientName.length;

        if (noValues <= 0) {
            alert("Please enter at least one value to be able to search.");
        }
        else {
            if (empNo.length <= 0)
                empNo = 0;
            $.ajax({
                type: "POST",
                url: 'Home/Search',
                data: { empNo: empNo, empName: empName, empMgr: empMgr, clientName: clientName },
                success: function (response) {                
                        
                        }
            });
        }​

 

 var validator = $("#searchForm").kendoValidator().data("kendoValidator");

    $("#btnSearch").click(function (e) {        
        if (!validator.validate()) {
            e.preventDefault();
        }
        else
            validateDataForSearch();
    });

[Kiril Nikolov]

Hello Man,

 

If I understand your correctly, you want to show the response from the Ajax call in a Grid? If this is the case, you can easily do it using the data() method of the dataSource, to set the data to the grid and display it. Here is documentation about this method:

 

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-data

 

Regards,
Kiril Nikolov
Telerik

 

 

[Man]

Hi Kiril,

    Many thanks for your response. However, I have tried using those but none of those seem to work for me. The code samples in the link do not seem to run either. Can you please advise an alternate solution.

 The idea is that user enters data in a form. When clicking a search button,a couple of validations take place in javascript and an Ajax call is made to the server side to call an action result which returns an object that I need to bind to my grid on the same form

[Kiril Nikolov]

Hello Man,

 

It works in the following sample, please edit it in order to show your exact scenario where it is not working and we will be happy to help:

 

http://dojo.telerik.com/AnEkO

 

Regards,
Kiril Nikolov
Telerik

 

 

[Man]

Hi Kiril,

   It seems to be making progress but i seem to be getting an Uncaught Typerror: Cannot read property datasource

 my cshtml is as follows

@model IEnumerable<PMT.Models.EmpData> 

<div id="kendoGrid">
    @(Html.Kendo().Grid(Model)
    .Name("SearchResult")
    .Columns(columns =>
    {
        columns.Bound(p => p.empNo);
        columns.Bound(p => p.empName);
        columns.Bound(p => p.empMgr);
        columns.Bound(p => p.ClientName);
    })
    .Pageable()
    .Sortable()
    .Scrollable(scr => scr.Height(430))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
     )
    )​

 

My js is now modified as 

 

function validateDataForSearch() {
        var empNo = $("#empNo").val();
        var empName = $("#empName").val();
        var empMgr = $("#empMgr").val();
        var clientName = $("#ClientName").val();

        var noValues = empNo.length + empName.length + empMgr.length + clientName.length;

        if (noValues <= 0) {
            alert("Please enter at least one value to be able to search.");
        }
        else {
            if (empNo.length <= 0)
                empNo = 0;
            $.ajax({
                type: "POST",
                url: 'Home/Search',
                data: { empNo: empNo, empName: empName, empMgr: empMgr, clientName: clientName },
                success: function (response) {                
                         $("#kendoGrid").getKendoGrid().datasource.data(response);
                        }
            });
        }​​

 

[Man]

My Search ActionResult method in the controller just returns a list<empData> with 2 dummy records

as return View(searchResults);

 

[Man]

Please see attached screenshot

[Kiril Nikolov]

Hello Man,

 

I can see that the the Id of the grid is .Name("SearchResult"), while you are selecting the grid using a wrong selector - $("#kendoGrid"). Please note that the .Name() will set the id of the grid, that you need to use later to get a reference to it.

 

Regards,
Kiril Nikolov
Telerik

 

 

[Man]

Hi Kiril

I have tried changing both references to "SearchResult" as well but had no luck

i.e. 

$("#SearchResult").kendoGrid();

and

$("#pmtSearchResult").getKendoGrid().DataSource.data(response);​

[Man]

Getting the same error as the one in the screenshot

Cannot ready property "data" of undefined

 

I also keep getting the error 

Failed to load resource: the server responded with a status of 404 (Not Found) for "http://localhost/PMT/Content/kendo/2015.2.805/images/kendoui.woff?v=1.1"  on page load. Not sure if this is expected

[Man]

Please ignore my comments. It was a case sensitive issue.