Double click on grid to show a new get url.

[Stefan]

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!

[Nohinn]

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;

}

[Stefan]

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!

[Nohinn]

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.

[Stefan]

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

    }

}