I am getting error message "0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: #RequestView_data...9_Template"

[Manish]

Hi,

I am getting error when I use template to display image in grid column.



This is my code

<script type="text/x-jsrender" id="columnTemplate">
    {{if Attachment }}
    <img style="width: 24px; height: 24px; cursor: pointer" src="../Content/mail_attachment.png" onclick="DownloadAttachment(this)" alt="{{:Attachment}}" id="{{:ItemCode}}_{{:DocEntry}}" />
    {{/if}}
</script>


<div class="row" style="width: 100%; padding-bottom: 5px;">

    @{
        if (Model.DocStatus == "Rejected")
        {
            <div class="col-md-12">
                @(Html.EJ().Grid<ERSCore.Models.LineItem>
                    ("RequestView_data")
                    .Datasource((System.Collections.IEnumerable)Model.Lines)
                    .AllowScrolling(true)
                    .EnableAltRow(true)
                    .EnableResponsiveRow()
                    .PageSettings(m => m.PageSize(5))
                    .EnableHeaderHover(true)
                    .EditSettings(ed => ed.AllowEditing(true).AllowEditOnDblClick(true))
                    .AllowTextWrap()
                    .AllowPaging()
                    .Columns(col =>
                    {
                        col.Field("ItemCode").HeaderText("ItemCode").Width(0).AllowEditing(false).Add();
                        col.Field("DocEntry").HeaderText("DocEntry").Width(0).AllowEditing(false).Add();
                        col.Field("DisplayText").HeaderText("Description").Width(500).AllowEditing(false).Add();
                        col.Field("U_Remark").HeaderText("Remark").Type("string").Width(100).AllowEditing(false).Add();
                        col.Field("Eligibilty").HeaderText("Eligibilty").Type("string").Width(100).AllowEditing(false).Add();
                        col.Field("Frequency").HeaderText("Frequency").Type("string").Width(100).AllowEditing(false).Add();
                        col.Field("MaxLimit").HeaderText("Max Limit").Type("string").Width(100).AllowEditing(false).Add();
                        col.Field("PRequestedAmount").HeaderText("Requested Amount").Type("int").Width(0).AllowEditing(false).Add();
                        col.Field("Amount").HeaderText("Requested Amount").Type("int").Width(70).AllowEditing(true).Add();
                        col.Field("Attachment").HeaderText("...").HeaderTextAlign(TextAlign.Center).Template("#columnTemplate").AllowEditing(false).Width(50).Add();
                    }))
            </div>
        }
        else
        {
            <div class="col-md-12">
                @(Html.EJ().Grid<ERSCore.Models.LineItem>
                    ("RequestView_data")
                    .Datasource((System.Collections.IEnumerable)Model.Lines)
                    .AllowScrolling(true)
                    .EnableAltRow(true)
                    .EnableResponsiveRow()
                    .PageSettings(m => m.PageSize(5))
                    .EnableHeaderHover(true)
                    .AllowTextWrap()
                    .AllowPaging()
                    .Columns(col =>
                    {
                        col.Field("ItemCode").HeaderText("ItemCode").Width(0).Add();
                        col.Field("DocEntry").HeaderText("DocEntry").Width(0).Add();
                        col.Field("DisplayText").HeaderText("Description").Width(500).Add();
                        col.Field("U_Remark").HeaderText("Remark").Type("string").Width(100).Add();
                        col.Field("Eligibilty").HeaderText("Eligibilty").Type("string").Width(100).Add();
                        col.Field("Frequency").HeaderText("Frequency").Type("string").Width(100).Add();
                        col.Field("MaxLimit").HeaderText("Max Limit").Type("string").Width(100).Add();
                        col.Field("PRequestedAmount").HeaderText("Requested Amount").Type("int").Width(0).Add();
                        col.Field("Amount").HeaderText("Requested Amount").Type("int").Width(70).Add();
                        col.Field("Attachment").HeaderText("...").HeaderTextAlign(TextAlign.Center).Template("#columnTemplate").Width(50).Add();
                    }))
            </div>
        }
    }

</div>

I also observed that there is some issue if I allow to make grid editable. If I write the below code without "IF" block


and write just simple code as below then it works. Template works fine.

<div class="col-md-12">
                @(Html.EJ().Grid<ERSCore.Models.LineItem>
                    ("RequestView_data")
                    .Datasource((System.Collections.IEnumerable)Model.Lines)
                    .AllowScrolling(true)
                    .EnableAltRow(true)
                    .EnableResponsiveRow()
                    .PageSettings(m => m.PageSize(5))
                    .EnableHeaderHover(true)
                    .AllowTextWrap()
                    .AllowPaging()
                    .Columns(col =>
                    {
                        col.Field("ItemCode").HeaderText("ItemCode").Width(0).Add();
                        col.Field("DocEntry").HeaderText("DocEntry").Width(0).Add();
                        col.Field("DisplayText").HeaderText("Description").Width(500).Add();
                        col.Field("U_Remark").HeaderText("Remark").Type("string").Width(100).Add();
                        col.Field("Eligibilty").HeaderText("Eligibilty").Type("string").Width(100).Add();
                        col.Field("Frequency").HeaderText("Frequency").Type("string").Width(100).Add();
                        col.Field("MaxLimit").HeaderText("Max Limit").Type("string").Width(100).Add();
                        col.Field("PRequestedAmount").HeaderText("Requested Amount").Type("int").Width(0).Add();
                        col.Field("Amount").HeaderText("Requested Amount").Type("int").Width(70).Add();
                        col.Field("Attachment").HeaderText("...").HeaderTextAlign(TextAlign.Center).Template("#columnTemplate").Width(50).Add();
                    }))
            </div>

The problem is after using "IF" Block it is creating problem.

Please help me out...

[Manish]

In Continuation....
I also find that editing grid and templating for a column using jsrender is not working. Either I can use feature of editing grid or I can use template for a column

FYI
<script type="text/x-jsrender" id="attachment">
    {{if Attachment }}
    <img style="width: 24px; height: 24px; cursor: pointer" src="../Content/mail_attachment.png" onclick="DownloadAttachment(this)" alt="{{:Attachment}}" id="{{:ItemCode}}_{{:DocEntry}}" />
    {{/if}}
</script>

[Venkatesh Ayothi Raman]

Hi Manish, 

Thanks for contacting Syncfusion support. 

Query 1: “Error shown while using template column” 

We are able to reproduce the issue when we referred the prior version of 13.2.0.39 script files, it is working fine in our latest Essential Studio version (14.1.0.46). We suspect that you are using prior version of 13.2.0.39 script files in your application. If so, we suggest you to download and upgrade the latest version of Essential Studio from the following link, 

http://www.syncfusion.com/forums/123963/essential-studio-2016-volume-1-service-pack-release-v14-1-0-46-available-for-download 

 

Refer the following steps to upgrade your project to our latest version. 

1. Please download and Install the Essential Studio latest version. 

2. Replace the Syncfusion latest version scripts and CSS in your project from the following location. 

Scripts and CSS: [installed Location]\Syncfusion\Essential Studio\XX.X.X.XX\JavaScript\assets 

3. We have listed the required Namespaces, DLLs, script and CSS files to work with the ASP.Net MVC Control. So we need to replace all the following files as a latest one. 

 

DLLs	Syncfusion.EJ.dll  Syncfusion.EJ.Mvc.dll
Script files	Syncfusion script files:  ej.web.all.min.js  ej.unobtrusive.min.js  External Script files:  jquery.min.js  jquery.easing.min.js  jquery.globalize.min.js  jsrender.min.js  jquery.validate.min.js
CSS files	ej.widgets.core.min.css

 

You can find the scripts and css files in the following locations: 

Script Location: [installed Location]\Syncfusion\Essential Studio\14.1.0.46\JavaScript\assets\scripts\web 

CSS Location: [installed Location]\Syncfusion\Essential Studio\14.1.0.46\JavaScript\assets\css\web 

DLL Location: [installed Location]\Syncfusion\Essential Studio\14.1.0.46\Assemblies 

4. Please refer the latest version (14.1.0.46) required DLLs in your project and change the referred version in project Web.config file that is located under the project’s root directory. 

 [web.config] 

<compilation debug="true" targetFramework="4.5" > 

    <assemblies> 

                <add assembly="Syncfusion.EJ, Version= 14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> 

                <add assembly="Syncfusion.EJ.Mvc, Version= 14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> 

    </assemblies> 

</compilation> 

 

5. Once clear the browser cache before run the upgraded project. 

 

Query 2:”Edting Grid” 

Editing feature is not supported for template column and this is the default behavior of the ejGrid. Could you please provide more details about your requirement? It would be helpful for us to find the query and provide the better solution as earliest. 

Regards, 

Venkatesh Ayothiraman. 

[Manish]

Hi Venkatesh,

Thanks for all your support. I made the change accordingly. Now it is giving me ambiguous error.

[Abinaya Subbiah]

Hi Manish, 

 

We have checked the attached screenshot . Ambiguous error may occur in below cases. 

1.If mismatch version of dll. Please check Syncfusion.EJ.MVC.dll version in web.config file and your referred dll in project reference. 

2.Clear the bin folder once and rebuild your project because may project refer old dll’s from bin folder. 

Please ensure the above and if you still facing the issue please share your sample. It will be helpful, to find the cause of issue and provide a better solution at the earliest. 

 

Regards, 

Abinaya S 

[Manish]

Hi,

Thanks for your support. After attaching the new reference, it works fine to me.
I have observed one issue with MaskEditTextBoxFor after updating patch.

1. It is unable to update data from control to model nor it able to set data to control from model.
2. WaterMark is not working.

See below snippet.

    <div class="login-box animated fadeInUp">
            <div class="box-header">
                <h2>Log In</h2>
            </div>
            <label for="username">Username</label>
            <br />
            @*@Html.EJ().MaskEditTextBoxFor(model => model.UserCode).Enabled(true).WatermarkText("Enter user name")*@
            @Html.TextBoxFor(model=>model.UserCode)
            <br />
            <label for="password">Password</label>

            <br />
            @*@Html.EJ().MaskEditTextBoxFor(model => model.Password)*@
            @Html.TextBoxFor(model => model.Password)
            <br />
            <button type="submit" id="signin">Sign In</button>
            <br />
            @*<a rel='nofollow' href="#"><p class="small">Forgot your password?</p></a>*@
        </div>

I have commented MaskEditTextBoxFor and use Standard TextBoxFor.

This is my model.

 public class LoginModel
    {
        public LoginModel()
        {
            UserCode = UserName = "abcdef";
            Password = "ijklmonop";

        }
        public int UserID { get; set; }
       
        public string UserCode { get; set; }
        public string UserName { get; set; }
        public string Email { get; set; }
        public string MobileNo { get; set; }
        public string DeviceID { get; set; }
        public string Password { get; set; }
    }

[Manish]

Hi,

I am got another issue....



When this error comes:
 On double click of grid I am opening a dialog box, which actually render partial view through ajax call.

In the earlier version it is working fine. After applying service patch. these issues are coming. Old functionality was working in older version.

Please help me ASAP. I am reaching delivery date.

[Manish]

HI Venkatesh Ayothiraman,

My whole project is gets mess after patching service patch. Whole testing cycle needs to run which is extra overhead to my account.
Please see the below screen shot, UI gets disturbed. I have attached 2-3 issues in this thread also.



I can go back for retesting for whole module.

PLEASE SUGGEST SOMETHING OR I NEED TO ROLL BACK TO PREVIOUS VERSION.

[Venkatesh Ayothi Raman]

Hi Manish, 

For now please use the following workaround for the issue “Getting error while using the template in the Grid” in make it work in old version. Please refer to the code example. 

Code example: 

<Template> 

 

<script type="text/x-jsrender" id="headerTemplate"> 

        ... 

</script> 

 

<Grid> 

 

<div class="row" style="width: 100%; padding-bottom: 5px;"> 

 

    @(Html.EJ().Grid<ERSCore.Models.LineItem>("RequestView_data") 

 . . .                                                      col.Field("Attachment").HeaderTemplateID("#headerTemplate").HeaderTextAlign(TextAlign.Center).Template("#columnTemplate").Width(50).Add(); 

.. . .  

                    })) 

            </div> 

        } 

    } 

 

</div> 

 

We will check the other reported problem in latest version (v14.1.0.46) and get back to you on May 09, 2016. 

 

Regards, 

Venkatesh Ayothiraman. 

[Manish]

Hi,

Do you mean rollback to previous version or try the new snippet.

In your code you have change the id to "headerTemplate" and you want me to assign it to HeaderTemplate
What about .Template("#columnTemplate")?
Shall I remove this property?

[Venkatesh Ayothi Raman]

Hi Manish, 

Thanks for your patience. 

Query 1: “Do you mean rollback to previous version or try the new snippet.” 

 

The provided code snippet is for your old version which is you have used before upgrade the latest version. Because as you have mentioned my whole project is mess after patching service patch, for your emergency we have provide workaround to resolve this issue in old version.  

We have used headerTemplate property for show the headerText like “(…)” in the old version. So don’t need to remove the column template property. 

Code Example: 

<headerTemplate>  

  

<script type="text/x-jsrender" id="headerTemplate">  

        ...  

</script>  

 

 <columnTemplate> 

<script type="text/x-jsrender" id="columnTemplate"> 

    

 {{if Attachment }} 

    <img style="width: 24px; height: 24px; cursor: pointer" src="../Content/mail_attachment.png" onclick="DownloadAttachment(this)" alt="{{:Attachment}}" id="{{:ItemCode}}_{{:DocEntry}}" /> 

    {{/if}} 

</script> 

 

 

<Grid>  

  

<div class="row" style="width: 100%; padding-bottom: 5px;">  

  

    @(Html.EJ().Grid<ERSCore.Models.LineItem>("RequestView_data")  

 . . .      col.Field("Attachment").HeaderTemplateID("#headerTemplate").HeaderTextAlign(TextAlign.Center).Template("#columnTemplate").Width(50).Add();  

.. . .   

                    }))  

            </div>  

        }  

    }  

  

</div>  

 

 

 

Query 2: “Script error thrown while dialog template editing & Alignment issue” 

We were unable to reproduce the error could you please share the more details and scenario for replication procedure. It would be helpful for us to find the issue and provide the better solution as earliest. 

 

We have created a sample for your reference: http://www.syncfusion.com/downloads/support/directtrac/general/7z/ColumnTemplate-1668347777 

 

 

Query 3: It is unable to update data from control to model nor it able to set data to control from model &  WaterMark is not working. 

 

We are unable to reproduce this issue at our end in v”14.1.0.46”. We have prepared the sample for your requirement.    

   

Please find the Sample link below: http://www.syncfusion.com/downloads/support/forum/123958/ze/maskEdit-1043094041.zip    

   

If you still face the difficulty, please provide a sample to help you further.   

 

 

Regards, 

Venkatesh Ayothiraman.   

[Manish]

Hi Venkatesh,

I checked your example which is working, in the same way I make changes and it is working.

I found one issue is Model value does not reflect in UI. I am attaching the same project again. I made some changes in your example. I have created a class called test and Initialize a property with some value, I have bind model with TextBox which should reflect in UI.

Please check.

Attachment: ColumnTemplate_new_9915b155.zip

[Manikandan Mariappan]

Hi Manish, 

  

Query: I found one issue is Model value does not reflect in UI. 

 

We have analyzed your query and checked with your sample. The issue raised due to the model class isn’t passed from controller to strongly typed view for binding model value. We have modified the below code in your controller page with your attached sample. 

  

[CS] 

 

        public ActionResult GridFeatures() 

        { 

            var DataSource = new NorthwindDataContext().OrdersViews.ToList(); 

            ViewBag.datasource = DataSource; 

            //the object references passed from controller to view page 

            return View(new Test()); 

        } 

 

 

For your convenience we have modified your sample based on your requirement, please get from the below online link. 

  

Sample:  Location 

  

If still you have face any difficulties, please let us know we will happy to assist you. 

  

Regards, 

Manikandan Mariappan