This is a migrated thread and some comments may be shown as answers.

Kendo UI Grid query

10 Answers 108 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Man
Top achievements
Rank 1
Man asked on 10 Sep 2015, 11:28 AM

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();
    });

10 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 11 Sep 2015, 08:51 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Man
Top achievements
Rank 1
answered on 11 Sep 2015, 09:07 AM

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

0
Accepted
Kiril Nikolov
Telerik team
answered on 11 Sep 2015, 11:00 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Man
Top achievements
Rank 1
answered on 11 Sep 2015, 12:56 PM

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);
                        }
            });
        }​​

 

0
Man
Top achievements
Rank 1
answered on 11 Sep 2015, 12:58 PM

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

as return View(searchResults);

 

0
Man
Top achievements
Rank 1
answered on 11 Sep 2015, 01:26 PM
Please see attached screenshot
0
Kiril Nikolov
Telerik team
answered on 12 Sep 2015, 07:15 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Man
Top achievements
Rank 1
answered on 14 Sep 2015, 01:44 PM

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);​

0
Man
Top achievements
Rank 1
answered on 14 Sep 2015, 01:48 PM

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

0
Man
Top achievements
Rank 1
answered on 14 Sep 2015, 03:02 PM
Please ignore my comments. It was a case sensitive issue.
Tags
Grid
Asked by
Man
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Man
Top achievements
Rank 1
Share this question
or