Client Expression Not Being Evaluated

[Pedro]

Hi,
I am having an issue with my client code where a client expression is not being properly evaluated.
Basically it is a child band that is loaded when the parent's expansion indicator is clicked.
The code to load the child is :

.DataBinding(dataBinding => dataBinding.Ajax().Select("_ChildHierarchyAjax", "Child", new { id = "<#= ParentID #>" }))

Instead of the <#= ParentID #> being replaced by the parent's ID, the request to the server is going up with the actual <#= ParentID #> text.

I have tested adding the client expression as a column on the grid and it is parsed properly and displays the number correctly, but when inside the initializer for the parameter, it doesn't.

Any ideas?
Thanks in advance,
Pedro.

[Daniel]

Hello Pedro,

This is unknown issue. Could you provide a snippet with the code you are using so I can check the exact setup?

Regards,
Daniel
the Telerik team

[Pedro]

Hi Daniel,
Here is one of the pieces of code that cause it:

grid.DetailView(ordersDetailView => ordersDetailView.ClientTemplate(
            Html.Telerik().Grid<LPAMSSiteModel.Property>()
              .Name("Properties_<#= LoanID #>")
              .Columns(columns =>
              {
                columns.Bound(p => p.Name).Title("Property Name").Width(233).ClientTemplate(
                  Html.ActionLink("<#= Name #>", "Details", "Property", new { id = "<#= PropertyID #>" }, null).ToString());
                columns.Bound(p => p.Type).Width(150);
                columns.Bound(p => p.FullAddress).Title("Address");
                columns.Bound(p => p.LoanCount).Title("Loan Count").Width(100).HtmlAttributes(new { style = "text-align:right" });
              })
              .DataBinding(dataBinding => dataBinding.Ajax()
              .Select("_PropertiesHierarchyAjax", "Property", new { id = "<#= LoanID #>" }))
              .Sortable()
              .Footer(false)
              .ToHtmlString()
              )
            );

Thanks,
Pedro.

[Daniel]

Hello again Pedro,

The code you sent seems correct and I am still unable to reproduce the problem locally. Therefore, I will appreciate if you could provide a small runnable project so I can check the exact setup.

Kind regards,
Daniel
the Telerik team

[Pedro]

Hi,
Unfortunatelly, I cannot send our entire project.
The weird thing is that there 2 other developers working with me on this project and we are sharing the same source (through TFS) and neither of them has this problem. We are all using similar machines with Windows 7 64-bit.

Is there any debugging that I can do on my end to try and nail the problem. I think I know which Telerik script file is handling this conversion, but I am not sure how to get into that code.

Thanks,
Pedro.

[Daniel]

Hello Pedro,

This is strange indeed.
The actual function which handles the evaluation is anonymous and is created when initializing the Grid columns. You could try to use an unminified version of the telerik.grid.js file and debug the code which handles the detail expansion. I attached a sample project with a breakpoint placed in the detail expansion handler. I hope it helps.

Greetings,
Daniel
the Telerik team

[Pedro]

Hi Daniel,
Thanks for the quick response.
I am out of the office this week but will try to remote in and give the test project a shot. If I can't make it, I will try first thing Monday morning.

Thanks again,
Pedro.

[Pedro]

Hi Daniel,
I tried running the sample and got this error:
The database 'C:\TEMP\CLIENTEXPRESSIONINHIERARCHY\APP_DATA\LOANSDB.MDF' cannot be opened because it is version 661. This server supports version 655 and earlier. A downgrade path is not supported.
Could not open new database 'C:\TEMP\CLIENTEXPRESSIONINHIERARCHY\APP_DATA\LOANSDB.MDF'. CREATE DATABASE is aborted.
An attempt to attach an auto-named database for file C:\Temp\ClientExpressionInHierarchy\App_Data\LoansDB.mdf failed. A database with the same name exists, or specified file cannot be opened, or it is located on UNC share.

Which version of SQL Server is this for?

Thanks,
Pedro.

[Daniel]

Hello Pedro,

I used SQL Server 2008 R2 for the database in the project. You could either create your own database based on the schema or update your version to avoid the problem. Another option is to mock the data in the Select action methods. 

Kind regards,
Daniel
the Telerik team

[Pedro]

Hi Daniel,
Finally figured out the problem with the database. I had a mix of 2008 and 2008 R2 on my machine. Cleaned up the 2008 and was able to run the test app.

I get the  same behavior as with our code here is the Fiddler output for the request, as you can see, the ID is not being parsed correctly:
POST /Home/_PropertiesHierarchyAjax/%3C%23%3d%20LoanID%20%23%3E HTTP/1.1
Host: localhost:3796
Connection: keep-alive
Content-Length: 6
Origin: http://localhost:3796
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11
Content-Type: application/x-www-form-urlencoded
Accept: text/plain, */*; q=0.01
Referer: http://localhost:3796/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,es;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

page=1
HTTP/1.1 400 Bad Request
Server: ASP.NET Development Server/10.0.0.0
Date: Tue, 20 Mar 2012 19:03:00 GMT
Content-Length: 1209
Content-type: text/html;charset=utf-8
Connection: Close

<html>
<head>
<title>Bad Request</title>
<style>
body {font-family:"Verdana";font-weight:normal;font-size: 8pt;color:black;}
p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}
b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}
h1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }
h2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }
pre {font-family:"Lucida Console";font-size: 8pt}
.marker {font-weight: bold; color: black;text-decoration: none;}
.version {color: gray;}
.error {margin-bottom: 10px;}
.expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }
</style>
</head>
<body bgcolor="white">

<span><h1>Server Error in '/' Application.<hr width=100% size=1 color=silver></h1>

<h2> <i>HTTP Error 400 - Bad Request.</i> </h2></span>

<hr width=100% size=1 color=silver>

<b>Version Information:</b>&nbsp;ASP.NET Development Server 10.0.0.0

</font>

</body>
</html>

[Daniel]

Hello Pedro,

The most likely reason for the problem is that something breaks the template encoding but without a way to reproduce it I can't determine what is the cause. Could you send the detail template generated on your side so I can try to evaluate it locally. You can find it from displayDetails client-side property. For example:

$(".t-grid").data("tGrid").displayDetails

It will also be helpful if you check whether this occurs in all browsers.

Greetings,
Daniel
the Telerik team

[Pedro]

Happens in all the browsers.
Please excuse my ignorance. I tried adding your snippet to the bottom of the Index page in the sample project you provided and it did not display anything. I did add a reference to the JScript source.

Thanks,
Pedro.

[Daniel]

Hello Pedro,

You could either use the OnLoad client-side event to ensure that the Grid is initialized or use the browser console to execute the script later.

All the best,
Daniel
the Telerik team

[Pedro]

Hi Daniel,
This is what I get when using the Chrome console:

$(".t-grid").data("tGrid").displayDetails

function anonymous(data) { var p=[];with(data){p.push('<div class="t-widget t-grid" id="Properties_', LoanID ,'"><table cellspacing="0"><colgroup><col style="width:233px" /><col style="width:150px" /><col /><col style="width:100px" /></colgroup><thead class="t-grid-header"><tr><th class="t-header" scope="col"><a class="t-link" href="/?Properties_%3C%23%3D%20LoanID%20%23%3E-orderBy=Name-asc">Property Name</a></th><th class="t-header" scope="col"><a class="t-link" href="/?Properties_%3C%23%3D%20LoanID%20%23%3E-orderBy=Type-asc">Type</a></th><th class="t-header" scope="col"><a class="t-link" href="/?Properties_%3C%23%3D%20LoanID%20%23%3E-orderBy=FullAddress-asc">Address</a></th><th class="t-header" scope="col"><a class="t-link" href="/?Properties_%3C%23%3D%20LoanID%20%23%3E-orderBy=LoanCount-asc">Loan Count</a></th></tr></thead><tbody><tr class="t-no-data"><td colspan="4">No records to display.</td></tr></tbody></table></div><script type="text/javascript"> jQuery(\'#Properties_', LoanID ,'\').tGrid({columns:[{"title":"Property Name","template":"%3ca href=\\"/Property/Details/%3c%23%3d%20PropertyID%20%23%3e\\"%3e%3c#= Name #%3e%3c/a%3e","member":"Name","type":"String"},{"title":"Type","member":"Type","type":"String"},{"title":"Address","member":"FullAddress","type":"String"},{"attr":" style=\\"text-align:right\\"","title":"Loan Count","member":"LoanCount","type":"Number"}], pageSize:0, sortMode:\'single\', ajax:{"selectUrl":"/Home/_PropertiesHierarchyAjax/<%23%3d%20LoanID%20%23>"}, localization:{"addNew":"Add new record","delete":"Delete","cancel":"Cancel","update":"Update","insert":"Insert","edit":"Edit","select":"Select","page":"Page ","displayingItems":"Displaying items {0} - {1} of {2}","pageOf":"of {0}","filter":"Filter","filterAnd":"And","filterClear":"Clear Filter","filterDateEq":"Is equal to","filterDateGe":"Is after or equal to","filterDateGt":"Is after","filterDateLe":"Is before or equal to","filterDateLt":"Is before","filterDateNe":"Is not equal to","filterNumberEq":"Is equal to","filterNumberGe":"Is greater than or equal to","filterNumberGt":"Is greater than","filterNumberLe":"Is less than or equal to","filterNumberLt":"Is less than","filterNumberNe":"Is not equal to","filterShowRows":"Show rows with value that","filterStringEndsWith":"Ends with","filterStringEq":"Is equal to","filterStringNe":"Is not equal to","filterStringStartsWith":"Starts with","filterStringSubstringOf":"Contains","groupHint":"Drag a column header and drop it here to group by that column","filterEnumEq":"Is equal to","filterEnumNe":"Is not equal to","deleteConfirmation":"Are you sure you want to delete this record?","filterSelectValue":"-Select value-","filterBoolIsFalse":"is false","filterBoolIsTrue":"is true","noRecords":"No records to display.","cancelChanges":"Cancel changes","saveChanges":"Save changes","refresh":"Refresh","sortedAsc":"sorted ascending","sortedDesc":"sorted descending","unGroup":"ungroup","filterForeignKeyEq":"Is equal to","filterForeignKeyNe":"Is not equal to"}, noRecordsTemplate:\'No records to display.\'}); </script>');}return p.join(''); }

Hope that helps.
Thanks,
Pedro.

[Daniel]

Hello Pedro,

The problem is that  the parameter isn't escaped in the detail template:

"selectUrl":"/Home/_PropertiesHierarchyAjax/<%23%3d%20LoanID%20%23>"

I am still investigating what could have caused this and I will write back to you as soon as I find something.

Greetings,
Daniel
the Telerik team

[Pedro]

Yeah,
That's what I kept seeing in Fiddler.

Thanks.

[Stella]

I am having the same issue on a custom toolbar for insert :
<a class="t-button " href="/TextVariables/InsertPopup?variableTypeId=%3C%23%3D%20SelectedVariableTypeId%20%23%3E">
And then on the select:
ajax:{"selectUrl":"/TextVariables/_Select?variableTypeId=%3C%23%3D%20SelectedVariableTypeId%20%23%3E"

The SelectedVariableTypeId is from a dropdown in the view - but outside the grid.

[Daniel]

Hello,

Unfortunately, I am still unable to replicate the conditions under which the problem occurs and without a reproduction there isn't really much I can do.
Stella, could you provide a sample project so I can check the exact setup?

Kind regards,
Daniel
the Telerik team

[Stella]

This is the page source of the page that gets created:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Index</title>
        <link rel="icon" href="/Content/favicon.ico" type="image/x-icon" />
        <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="/Content/themes/lis/jquery.ui.all.css" rel="stylesheet" type="text/css" />
        <link type="text/css" href="/Content/2012.1.214/telerik.common.min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/2012.1.214/telerik.office2010blue.min.css" rel="stylesheet"/>


        <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="/Scripts/jquery-ui.messages.js" type="text/javascript"></script>
        <script src="/Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript" ></script>
        <script src="/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // Change specified elements to buttons.
                $('.jqueryui-button').each(function (i, item) {
                    if ($(item).attr('class').match(/\bui-icon-/)) {
                        $(item).addClass('ui-icon').button({ text: false });
                    }
                    else {
                        $(item).button();
                    }
                });

                // change specified elements to button sets.
                $('.jqueryui-buttonset').buttonset();

                // Fade out message after 15 seconds.
                $('#message:not(:empty)').highlight().delay(15000).fadeOut('slow');
            });
        </script>


    <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
    <script src="/Scripts/Views/TextVariables.Index.js" type="text/javascript"></script>

    </head>
    <body>
        <div class="page">

            <header id="header">
                <a href="/">
                    <div id="title">
                        <h1>General Assembly Tracking</h1>
                        <h2>System Administration</h2>
                    </div>
                </a>
                <div id="logindisplay">
                    <div>
    Welcome <strong>LIS\stapletonsm</strong>!
</div>
<div >
    [ <span style="font-style:italic;font-size:small">
House User
        (<a id="chamber-open" href="#">change</a>)
    </span>]
</div>

<div id="chamber-dialog" title="Choose Chamber...">
    <div><input checked="checked" id="chamber" name="chamber" type="radio" value="House" /> House</div>
    <div><input id="chamber" name="chamber" type="radio" value="Senate" /> Senate</div>
</div>

<script type="text/javascript">
    $(function () {
        // Determines if the page needs to be reloaded or not.
        var currentChamber = $('input[id="chamber"]:checked').val();

        // Create the "Choose Chamber..." dialog.
        $("#chamber-dialog").dialog({
            autoOpen: false,
            show: "blind",
            hide: "blind",
            width: 230,
            height: 80,
            resizable: false,
            draggable: false,
            modal: true,
            position: ['right', 'top'],
            open: function (event, ui) {
                // Reset current choosen chamber.
                currentChamber = $('input[id="chamber"]:checked').val();
            },
            close: function (event, ui) {
                // Reload the page if the chamber affiliation was changed.
                if (currentChamber != $('input[id="chamber"]:checked').val()) {
                    location.reload();
                }
            }
        });

        // Subscribe to click event of the dialog's chamber radio buttons.
        $('input[id="chamber"]').click(function () {
            // Get the chamber the user clicked.
            var chamber = $(this).val();

            // Update the user's current chamber affiliation.
            $.ajax({
                url: '/Chamber/_Update',
                data: { chamber: chamber },
                type: "POST",
                context: this,
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("An error occurred during the update of the user''s chamber.");
                },
                success: function (data) {
                    if (data) {
                        // Select the radio button after success.
                        $(this).attr('checked', 'checked');
                    }
                }
            });

            // Do not select the radio button until success has been determined.
            return false;
        });

        // Subscribe to the click event of the "change chamber" link.
        $("#chamber-open").click(function () {
            // Open the dialog.
            $("#chamber-dialog").dialog("open");
            return false;
        });
    });
</script>
                </div>
            </header>

            <div id="wrapper">
                <div id="main">
                    <span id="message"></span>




<h2>Index</h2>
<fieldset>
    <div class="editor-label"><label for="SelectedVariableTypeId">Variable Types</label></div>
    <div class="editor-field">




<select id="SelectedVariableTypeId" name="SelectedVariableTypeId"><option selected="selected" value="1">ConvertText</option>
<option value="2">MotionText</option>
<option value="3">HeadingFormat</option>
<option value="5">test1</option>
<option value="6">test2</option>
<option value="7">test3</option>
<option value="8">test4</option>
<option value="9">test5</option>
<option value="10">test6</option>
<option value="11">test7</option>
<option value="12">test8</option>
<option value="13">test9</option>
<option value="14">test10</option>
<option value="15">teee</option>
</select>

</div>


 </fieldset>


<div class="t-widget t-grid" id="Grid"><div class="t-toolbar t-grid-toolbar t-grid-top"><a class="t-button " href="/TextVariables/InsertPopup?variableTypeId=%3C%23%3D%20SelectedVariableTypeId%20%23%3E">Insert</a></div><div class="t-grouping-header">Drag a column header and drop it here to group by that column</div><table cellspacing="0"><colgroup><col class="t-hierarchy-col" /><col /><col /><col /><col /></colgroup><thead class="t-grid-header"><tr><th class="t-hierarchy-cell t-header" scope="col"> </th><th class="t-header" scope="col" style="display:none"><a class="t-link" href="/TextVariables?Grid-orderBy=TextVariablesId-asc">Text Variables Id</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col" style="display:none"><a class="t-link" href="/TextVariables?Grid-orderBy=VariableTypeId-asc">Variable Type Id</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/TextVariables?Grid-orderBy=VariableType-asc">Variable Type</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/TextVariables?Grid-orderBy=TextVariable-asc">Text Variable</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/TextVariables?Grid-orderBy=TextVariableDescription-asc">Description</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col" style="display:none"><a class="t-link" href="/TextVariables?Grid-orderBy=UpdatedBy-asc">Last Updated By</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col" style="display:none"><a class="t-link" href="/TextVariables?Grid-orderBy=UpdatedDate-asc">Last Updated</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><span class="t-link"> </span></th></tr></thead><tbody><tr class="t-no-data"><td colspan="5">No records to display.</td></tr></tbody></table><div class="t-grid-pager t-grid-bottom"><div class="t-status"><a class="t-icon t-refresh" href="/TextVariables">Refresh</a></div><div class="t-pager t-reset"><a class="t-link t-state-disabled" href="#"><span class="t-icon t-arrow-first">first</span></a><a class="t-link t-state-disabled" href="#"><span class="t-icon t-arrow-prev">prev</span></a><div class="t-numeric"><span class="t-state-active">1</span></div><a class="t-link t-state-disabled" href="#"><span class="t-icon t-arrow-next">next</span></a><a class="t-link t-state-disabled" href="#"><span class="t-icon t-arrow-last">last</span></a></div><div class="t-status-text">Displaying items 0 - 0 of 0</div></div></div>



                </div>
            </div>



            <nav id="navigation">
                <ul id="menu">
                    <li><a href="/">Home</a></li>
                    <li>
                            <span>Bill Status</span>
                            <ul>
                                <li><a href="/DocumentType">Document Type</a></li>
                                <li><a href="/FloorActionCategory">Floor Action Category</a></li>
                                <li><a href="/FloorActionReferenceType">Floor Action Reference Type</a></li>
                                <li><a href="/PageLineItem">Page/Line</a></li>
                                <li><a href="/SponsorGroup">Sponsor Group</a></li>
                                <li><a href="/SponsorType">Sponsor Type</a></li>
                                <li><a href="/BillStatusValidationMessages">Validation Messages</a></li>
                            </ul>
                            <span>Calendar</span>
                            <ul>
                                <li><a href="/CalendarHeading">Calendar Heading</a></li>
                                <li><a href="/CalendarPhrase">Calendar Phrase</a></li>
                                <li><a href="/MeetingEntity">Meeting Entity</a></li>
                                <li><a class="current-menu-item" href="/TextVariables">Text Variables</a></li>
                                <li><a href="/VariableType">Variable Type</a></li>
                            </ul>
                            <span>Publishing</span>
                            <ul>
                                <li><a href="/PublishingDocumentOutput">Publishing Document Output</a></li>
                                <li><a href="/PublishingOptions">Publishing Options</a></li>
                                <li><a href="/PublishingDestinations">Publishing Destinations</a></li>
                            </ul>
                    </li>
                    <li><a href="/Home/About">About</a></li>
                </ul>
            </nav>

            <footer>
                <div id="footer">
                    This site is maintained for the Illinois General Assembly by:
                    <br />
                    Legislative Information System
                    <br />
                    705 Stratton Building, Springfield, Illinois 62706
                    <br />
                    217-782-3944   217-782-2050 (TTY)
                </div>
            </footer>
        </div>
        <script type="text/javascript" src="/Scripts/2012.1.214/telerik.common.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.textbox.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.grid.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.grid.filtering.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.draganddrop.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.window.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.grid.editing.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.grid.grouping.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('#Grid').tGrid({columns:[{"attr":" style=\"display:none;\"","title":"Text Variables Id","hidden":true,"member":"TextVariablesId","type":"Number","editor":null},{"attr":" style=\"display:none;\"","title":"Variable Type Id","hidden":true,"member":"VariableTypeId","type":"Number","editor":null},{"title":"Variable Type","member":"VariableType","type":"String","readonly":true},{"title":"Text Variable","member":"TextVariable","type":"String","editor":null},{"title":"Description","member":"TextVariableDescription","type":"String","editor":null},{"attr":" style=\"display:none;\"","title":"Last Updated By","hidden":true,"member":"UpdatedBy","type":"String","editor":null},{"attr":" style=\"display:none;\"","title":"Last Updated","hidden":true,"member":"UpdatedDate","type":"String","editor":null},{"title":null,"commands":[{"name":"edit","buttonType":"Text"},{"name":"delete","buttonType":"Text"}]}], plugins:["grouping","editing","filtering"], editing:{"mode":"PopUp","editor":"\r\n\r\n%3ch2%3eText Variable%3c/h2%3e  \r\n%3cfieldset%3e\r\n     %3cinput data-val=\"true\" data-val-number=\"The field TextVariablesId must be a number.\" data-val-required=\"The TextVariablesId field is required.\" id=\"TextVariablesId\" name=\"TextVariablesId\" type=\"hidden\" value=\"0\" /%3e\r\n        %3cinput data-val=\"true\" data-val-number=\"The field VariableTypeId must be a number.\" data-val-required=\"The VariableTypeId field is required.\" id=\"VariableTypeId\" name=\"VariableTypeId\" type=\"hidden\" value=\"0\" /%3e      \r\n        %3cinput id=\"UpdatedDate\" name=\"UpdatedDate\" type=\"hidden\" value=\"\" /%3e\r\n     %3cdiv class=\"editor-label\"%3e\r\n    %3clabel for=\"VariableType\"%3eVariable Type%3c/label%3e \r\n    %3c/div%3e     \r\n    %3cdiv class=\"editor-field\" id=\"VariableType\"%3e\r\n    %3cinput class=\"text-box single-line\" id=\"VariableType\" name=\"VariableType\" type=\"text\" value=\"\" /%3e\r\n    %3c/div%3e\r\n    %3cbr /%3e\r\n     %3cdiv class=\"editor-label\"%3e\r\n    %3clabel for=\"TextVariable\"%3eText Variable%3c/label%3e \r\n    %3c/div%3e \r\n    %3cdiv class=\"editor-field\"%3e\r\n    %3cinput class=\"text-box single-line\" data-val=\"true\" data-val-length=\"Text Variable can only be 30 characters.\" data-val-length-max=\"30\" data-val-remote=\"&#39;Text Variable&#39; is invalid.\" data-val-remote-additionalfields=\"*.TextVariable,*.TextVariablesId,*.VariableTypeId\" data-val-remote-url=\"/TextVariables/_ValidateTextVariable\" data-val-required=\"The Text Variable field is required.\" id=\"TextVariable\" name=\"TextVariable\" type=\"text\" value=\"\" /%3e\r\n    %3cspan class=\"field-validation-valid\" data-valmsg-for=\"TextVariable\" data-valmsg-replace=\"true\"%3e%3c/span%3e  \r\n    %3c/div%3e\r\n    %3cbr /%3e   \r\n    %3cdiv class=\"editor-label\" id=\"textVariableDescription\"%3e\r\n   %3clabel for=\"TextVariableDescription\"%3eDescription%3c/label%3e \r\n   %3c/div%3e \r\n    %3cdiv class=\"editor-field\"%3e\r\n   %3cinput class=\"text-box single-line\" data-val=\"true\" data-val-length=\"Text Variable Description can be 300 characters.\" data-val-length-max=\"300\" data-val-remote=\"&#39;Description&#39; is invalid.\" data-val-remote-additionalfields=\"*.TextVariableDescription,*.TextVariablesId,*.VariableTypeId\" data-val-remote-url=\"/TextVariables/_ValidateTextVariableDescription\" data-val-required=\"The Description field is required.\" id=\"TextVariableDescription\" name=\"TextVariableDescription\" type=\"text\" value=\"\" /%3e\r\n   %3cspan class=\"field-validation-valid\" data-valmsg-for=\"TextVariableDescription\" data-valmsg-replace=\"true\"%3e%3c/span%3e\r\n   %3c/div%3e     \r\n  %3c/fieldset%3e\r\n","defaultDataItem":{"TextVariablesId":0,"VariableTypeId":0,"VariableType":null,"TextVariable":null,"TextVariableDescription":null,"UpdatedBy":null,"UpdatedDate":null},"popup":{"modal":true,"draggable":true,"resizable":false}}, dataKeys:{"TextVariablesId":"TextVariablesId"}, total:0, currentPage:1, pageSizesInDropDown:["5","10","20","50"], pageOnScroll:false, sortMode:'single', operationMode:'client', data:null, ajax:{"selectUrl":"/TextVariables/_Select?variableTypeId=%3C%23%3D%20SelectedVariableTypeId%20%23%3E","updateUrl":"/TextVariables/_Update","deleteUrl":"/TextVariables/_Delete"}, onDataBinding:Grid_OnDataBinding, onDataBound:Grid_OnDataBound, onEdit:Grid_OnEdit, localization:{"addNew":"Add new record","delete":"Delete","cancel":"Cancel","update":"Update","insert":"Insert","edit":"Edit","select":"Select","page":"Page ","displayingItems":"Displaying items {0} - {1} of {2}","pageOf":"of {0}","filter":"Filter","filterAnd":"And","filterClear":"Clear Filter","filterDateEq":"Is equal to","filterDateGe":"Is after or equal to","filterDateGt":"Is after","filterDateLe":"Is before or equal to","filterDateLt":"Is before","filterDateNe":"Is not equal to","filterNumberEq":"Is equal to","filterNumberGe":"Is greater than or equal to","filterNumberGt":"Is greater than","filterNumberLe":"Is less than or equal to","filterNumberLt":"Is less than","filterNumberNe":"Is not equal to","filterShowRows":"Show rows with value that","filterStringEndsWith":"Ends with","filterStringEq":"Is equal to","filterStringNe":"Is not equal to","filterStringStartsWith":"Starts with","filterStringSubstringOf":"Contains","groupHint":"Drag a column header and drop it here to group by that column","filterEnumEq":"Is equal to","filterEnumNe":"Is not equal to","deleteConfirmation":"Are you sure you want to delete this record?","filterSelectValue":"-Select value-","filterBoolIsFalse":"is false","filterBoolIsTrue":"is true","noRecords":"No records to display.","cancelChanges":"Cancel changes","saveChanges":"Save changes","refresh":"Refresh","sortedAsc":"sorted ascending","sortedDesc":"sorted descending","unGroup":"ungroup","filterForeignKeyEq":"Is equal to","filterForeignKeyNe":"Is not equal to"}, detail:{"template":"%3cul%3e%3cli%3eUpdated By: %3c#= UpdatedBy #%3e%3c/li%3e%3cli%3eUpdated Date: %3c#= UpdatedDate #%3e%3c/li%3e%3c/ul%3e"}, noRecordsTemplate:'No records to display.'});});
//]]>
</script>
    </body>
</html>

This is the view (we were playing around with a custom insert toolbar):

@ModelType SystemAdmin.

 

TextVariablesVariableTypeViewModel

 

@Code

ViewData(

 

"Title") = "Index"

 

End Code

@Section Head

 

 

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

 

 

 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

 

 

 

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

 

 

 

<script src="@Url.Content("~/Scripts/Views/TextVariables.Index.js")" type="text/javascript"></script>

 

End Section

<

 

 

h2>Index</h2>

 

<

 

 

fieldset>

 

 

 

<div class="editor-label">@Html.LabelFor(Function(x) x.SelectedVariableTypeId)</div>

 

 

 

<div class="editor-field">@Html.EditorFor(Function(x) x.SelectedVariableTypeId, New With {.Items = Me.Model.VariableTypes})</div>

 

 

 

 

 

</fieldset>

 

 

 

@Code

 

 

Html.Telerik.Grid(Of SystemAdmin.TextVariables)() _

 

.Name(

 

"Grid") _

 

.DataKeys(

 

Sub(x)

 

x.Add(

 

Function(y) y.TextVariablesId).RouteKey("TextVariablesId")

 

 

 

End Sub) _

 

.Columns(

 

Sub(x)

 

x.Bound(

 

Function(y) y.TextVariablesId).Hidden(True)

 

x.Bound(

 

Function(y) y.VariableTypeId).Hidden(True)

 

x.Bound(

 

Function(y) y.VariableType)

 

x.Bound(

 

Function(y) y.TextVariable)

 

x.Bound(

 

Function(y) y.TextVariableDescription)

 

x.Bound(

 

Function(y) y.UpdatedBy).Hidden(True)

 

x.Bound(

 

Function(y) y.UpdatedDate).Hidden(True)

 

x.Command(

 

Sub(y)

 

y.Edit()

y.Delete()

 

 

End Sub)

 

 

 

End Sub) _

 

.ClientEvents(

 

Sub(x)

 

x.OnDataBinding(

 

"Grid_OnDataBinding")

 

x.OnEdit(

 

"Grid_OnEdit")

 

x.OnDataBound(

 

"Grid_OnDataBound")

 

 

 

End Sub) _

 

.DataBinding(

 

Sub(x)

 

x.Ajax.OperationMode(

 

GridOperationMode.Client)

 

x.Ajax().Select(

 

"_Select", "TextVariables", New With {.variableTypeId = "<#= SelectedVariableTypeId #>"})

 

 

 

'x.Ajax().Insert("_Insert", "TextVariables")

 

x.Ajax().Update(

 

"_Update", "TextVariables")

 

x.Ajax().Delete(

 

"_Delete", "TextVariables")

 

 

 

End Sub) _

 

.ToolBar(

 

Sub(x)

 

x.Custom().Ajax(

 

False).Action("InsertPopup", "TextVariables", New With {.variableTypeId = "<#= SelectedVariableTypeId #>"}).ButtonType(GridButtonType.Text).Text("Insert")

 

 

 

 

End Sub) _

 

.Editable(

 

Sub(x) x.Mode(GridEditMode.PopUp)) _

 

.Pageable() _

.DetailView(

 

Sub(detailview) detailview.ClientTemplate(

 

 

 

"<ul>" +

 

 

 

"<li>Updated By: <#= UpdatedBy #></li>" +

 

 

 

"<li>Updated Date: <#= UpdatedDate #></li>" +

 

 

 

"</ul>")) _

 

.Groupable() _

.Sortable() _

.Filterable() _

.Render()

End Code

[Stella]

The strange thing is - it works down in the DetailView - but not up in the Select.

[Daniel]

Hello Stella,

The expression should be used in a client template in order to be evaluated. You should pass the DropDownList value by using the Grid's OnDataBinding client-side event  e.g.

function OnDataBinding(e){
    e.data = {
        variableTypeId = $('#SelectedVariableTypeId').val()
    };
}

Kind regards,
Daniel
the Telerik team

[Stella]

Thank you Daniel - that is the way i have it working now. I just thought it was suppose to be able to pass it in on the Select command itself so had tried that - but when that didn't work, had passed it in on the e.data on "ondatabinding". 
I still have some confusion between the server binding and client side  binding - but it is becoming clearer. Thanks for the answer.