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

Double click on grid to show a new get url.

4 Answers 191 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stefan
Top achievements
Rank 2
Stefan asked on 07 Sep 2012, 08:38 AM
Hi!

How do i make so this code work? 
var grid = $("#GridField").kendoGrid();
 
function grid_selected(e) {
    var id; 
    
    grid.select().each(function() {
    // CRASH HERE.. Doesent get a dataitem.  
        var dataItem = grid.dataItem($(this));
        id = dataItem.SalonID;
        
        })
 
    window.location.href = "@Url.Action("Details", "Salon")" + "/" + id;
}

The problem is that i doesent get out a SalonID value so i can redirect.

Here is the full code:
<p>
@(Html.Kendo().AutoComplete()
   .Name("searchField")
   .DataTextField("SalonName")
   .Filter("Contains")
   .Placeholder("Search..")
 
   .DataSource(dataSource =>
     {
         dataSource.Read(read =>
         {
             read.Action("GetAutoCompleteItems", "Salon"); 
         })
     .ServerFiltering(false);
     })
     .Events(events => events.Change("autoComplete_selected"))
 )
 </p>
 
 <div id="Grid">
@(Html.Kendo().Grid(Model)
    .Name("GridField")
    .Columns(columns =>
    {
        columns.Bound(item => item.SalonID);
        columns.Bound(item => item.Avtnr);
        columns.Bound(item => item.SalonName);
        columns.Bound(item => item.Street);
        columns.Bound(item => item.ZipCode);
        columns.Bound(item => item.City);
        columns.Bound(item => item.Telephone);
        columns.Bound(item => item.SalonEmail);
        columns.Bound(item => item.Description);
        columns.Bound(item => item.ContactPerson);
    })
    .ColumnMenu()
    .Groupable()
    .Pageable()
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
 
    .DataSource(dataSource => dataSource
        .Ajax() 
        .Read(read => read.Action("Read", "Salon"))
        .ServerOperation(false)
    )
    .Events(events => events.Change("grid_selected"))
)
</div>
 
 
<script type="text/javascript">
 
var grid = $("#GridField").kendoGrid();
 
function grid_selected(e) {
    var id; 
    
    grid.select().each(function() {
  var dataItem = grid.dataItem($(this));
// CRASH HERE.. Doesent get a dataitem. 
id = dataItem.SalonID;
        
        })
 
    window.location.href = "@Url.Action("Details", "Salon")" + "/" + id;
}
 
//
// Filter the grid when searching..
//
 
function autoComplete_selected(e) {
    var value = this.value();
    if (value) {
       grid.data("kendoGrid").dataSource.filter({ field: "SalonName", operator: "contains", value: value });
    }
    else {
       grid.data("kendoGrid").dataSource.filter({});
    }
}
 
</script>


I also in want that when i type 1 letter in the autocomplet, the grid should filter directly & right now im only avalible to search/filter 1 column in my db, i want to choose several tables to be searchable.

Ty!

4 Answers, 1 is accepted

Sort by
0
Nohinn
Top achievements
Rank 1
answered on 07 Sep 2012, 09:27 AM
Your problem here is that you're overriding the declaration of the grid.
By the way, I see that you are using single selection, so no need of an each loop:
var grid = $("#GridField").data('kendoGrid');
  
function grid_selected(e) {
    var id;
 
    var dataItem = grid.dataItem(grid.select());
    id = dataItem.SalonID;
  
    window.location.href = "@Url.Action("Details", "Salon")" + "/" + id;
}
0
Stefan
Top achievements
Rank 2
answered on 07 Sep 2012, 11:08 AM
Ty for the answere but i still cant get this to work. 
Im really new to use kendo and js.

What does the .data('kendoGrid') refer to? I dont have anything named like that in my code.

ty!
0
Accepted
Nohinn
Top achievements
Rank 1
answered on 07 Sep 2012, 11:17 AM
After using the mvc wrapper, the wrapper itself creates the grid with the kendo framework js code.
All the available methods of the grid control, properties, etc. are stored via jquery with the data function. To access these stored properties + methods you have to use the .data('kendoGrid') on the element.
$('#GridField').data('kendoGrid');
 
// $('#GridField') => it will get your element defined through the mvc wrapper (grid element)
// .data('kendoGrid') => will get data stored in this element with key "kendoGrid", if you try this
// with a debugger like firebug or chrome tools, you will see the dataSource structure of the grid, etc.
0
Stefan
Top achievements
Rank 2
answered on 07 Sep 2012, 01:41 PM
Here was my sulution:

//
// Selects item in list
// Return: /Salon/Details/{ID}
   
function grid_selected(arg) {
    var grid = this;
 
    grid.select().each(function () {
        var dataItem = grid.dataItem($(this));
        window.location.href = "@Url.Action("Details", "Salon")" + "/" + dataItem.SalonID;
    });
}       
 
 
 
//
// Filter the grid when searching..
//
 
function autoComplete_selected(arg) {
    var grid = $("#GridField").data('kendoGrid');
    var value = this.value();
 
    if (value) {
        grid.dataSource.filter({ field: "SalonName", operator: "contains", value: value });
    }
    else {
       grid.dataSource.filter({});
    }
}
Tags
Grid
Asked by
Stefan
Top achievements
Rank 2
Answers by
Nohinn
Top achievements
Rank 1
Stefan
Top achievements
Rank 2
Share this question
or