Get selected value of Kendo grid on another View

Question

So yesterday I started learning javascript and web development for a project at work. We are using a MVC pattern and I am having issues figuring out exactly how the javascript classes work with the views. Any help on this will be appreciated. Like I said, my knowledge is very limited. I do, however, know C# and WPF (MVVM) so maybe some of that knowledge will help me here.

We use Kendo controls. Some of the javascript for our kendo grid is below.

grid.js:

function onChange(e) {

        //get currently selected dataItem
        var grid = e.sender;
        var selectedRow = grid.select();
        var dataItem = grid.dataItem(selectedRow);

        var y = $.ajax({
            url: "/api/ServiceOrderData/" + dataItem.id,
            type: 'GET',
            dataType: 'json'
       });
    }

    $("#serviceOrderList").kendoGrid({
        groupable: true,
        scrollable: true,
        change: onChange,
        sortable: true,
        selectable: "row",
        resizable: true,
        pageable: true,
        height: 420,
        columns: [
            { field: 'PriorityCodeName', title: ' ', width: 50 },
            { field: 'ServiceOrderNumber', title: 'SO#' },
            { field: 'ServiceOrderTypeName', title: 'Type' },
            { field: 'ScheduledDate', title: 'Scheduled Date' },
            { field: 'StreetNumber', title: 'ST#', width: '11%' },
            { field: 'StreetName', title: 'Street Name' },
            { field: 'City', title: 'City' },
            { field: 'State', title: 'ST.' },
            { field: 'IsClaimed', title: 'Claimed'}
        ],
        dataSource: serviceOrderListDataSource
    });

I am wanting to be able to use the value from the onChange function:

 var dataItem = grid.dataItem(selectedRow);

in the following view.

ESRIMapView.cshtml:

<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'sidebar', gutters:false"
         style="width:100%; height:100%;">

        <div id="leftPane"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'left'">
            <br>

            <textarea type="text" id="address" />*THIS IS WHERE I WILL USE dataItem! dataItem.StreetNumber (syntax?) to be exact</textArea>
            <br>

            <button id="locate" data-dojo-type="dijit/form/Button">Locate</button>
        </div>

        <div id="map"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'center'">
        </div>
    </div>
</body>

Right now my ESRIMapView is loaded when the user clicks on a button on the index.cshtml screen which contains the grid that I am trying to get the value from.

    <li>@Html.ActionLink("Map", "ESRIMapView", "Home", null, new { @class = "k-button" })</li>

This is my "Home" controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Services.Description;
using Alliance.MFS.Data.Client.Models;
using Alliance.MFS.Data.Local.Repositories;

namespace AllianceMobileWeb.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult ServiceOrderMaintenance()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public ActionResult ESRIMapView()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

I realize this is probably a very elementary question, but any help would be appreciate. And please be as detailed as possible with your responses :)

Answer 1

Since you create your link before returning the (initial) view to the user, you need a bit of trickery to change it. I recommend the following: set an id on your a element and change its href attribute; on your controller, set a parameter corresponding to the street number and pre-fill the view:

Controller:

public ActionResult ESRIMapView(string streetNumber)
{
    ViewBag.Message = "Your contact page.";

    ViewBag.StreetNumber = streetNumber;

    return View();
}

View containing the li (note the Id on the a element):

<li>@Html.ActionLink("Map", "ESRIMapView", "Home", null, new { @class = "k-button", id="myMapaction" })</li>

View containing the textarea (ESRIMapView ):

<textarea type="text" id="address" />@ViewBag.StreetNumber</textArea>

grid.js:

function onChange(e) {
    //get currently selected dataItem
    var grid = e.sender;
    var selectedRow = grid.select();
    var dataItem = grid.dataItem(selectedRow);

    //change the link
    var actionElem = $("#myMapaction");
    var url = actionElem.attr("href");
    if (url.indexOf("=") === -1) { //first time selecting a row
       url += "?streetNumber=" + dataItem.StreetNumber;
    } else {
       url = url.substring(0, url.lastIndexOf("=") +1) + dataItem.StreetNumber;
    }
    actionElem.attr("href", url);
    //change the link

    var y = $.ajax({
        url: "/api/ServiceOrderData/" + dataItem.id,
        type: 'GET',
        dataType: 'json'
   });
}

This script simply adds the street number parameter in the query string. When the user selects a row for the first time, the streetNumber parameter is not present in the query string. After the first time, the parameter is there and we must change only the value.

Please note that this solution has its limitations: it does not work if you have other parameters in the query string (the logic for adding/editing the parameter must be changed).

Get selected value of Kendo grid on another View

Question

1 answers

solution1
1 ACCPTED 2014-09-25 13:14:17

Get selected value of Kendo grid on another View

Question

1 answers

solution1 1 ACCPTED 2014-09-25 13:14:17

solution1
1 ACCPTED 2014-09-25 13:14:17