1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Open dialog template on single click

Open dialog template on single click

Hi;
I would like my dialog template to open on single click on the row (not double click). How do I do that? 
Also the chip tool does not scale down in mobile mode (i.e does not wrap), how do I make sure it wraps on smaller screens?
Another issue is when I change text on the cancel-button of the dialog template, it recognizes it as a save request-type instead of Cancel. How can I change the text and keep the Cancel-action? Tried several examples you have posted, but they do not work since the cancel button does not seem to have an id, only class.

Regards,
Marie

9 Replies
RR Rajapandi Ravi Syncfusion Team June 15, 2020 12:24 PM UTC

Hi Marie, 

Greetings from syncfusion support 

Query#: I would like my dialog template to open on single click on the row (not double click). How do I do that? 

You can make a row editable on a single click with Normal mode of editing in Grid, by using the startEdit and endEdit methods. Bind the mousedown event for Grid and in the event handler call the startEdit and endEdit, based on the clicked target element. Please refer the below code example and documentation for more information. 

 
@Html.EJS().Grid("DialogEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).DefaultValue("").Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").DefaultValue("").ValidationRules(new { required = "true" }).Add(); 
 
}).AllowPaging().Load("load").ActionBegin("actionBegin").PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
<script> 
    function load() { 
        var instance = document.getElementById('DialogEdit').ej2_instances[0]; 
        instance.element.addEventListener('mousedown', function (e) { 
            if (e.target.classList.contains("e-rowcell")) { 
                if (instance.isEdit) 
                    instance.endEdit(); 
                var index = parseInt(e.target.getAttribute("Index")); 
                instance.selectRow(index); 
                instance.startEdit(); 
            }; 
        }); 
    } 
 
    function actionBegin(args) { 
        debugger; 
    } 
 
  function actionComplete(args){ 
        if (args.requestType === 'beginEdit') { 
            (args.form.elements.namedItem('CustomerID')).focus(); 
        } else { 
            (args.form.elements.namedItem('OrderID')).focus(); 
        } 
    } 
        document.addEventListener('DOMContentLoaded', function () { 
            setCulture(); 
    }); 
 
</script> 
 
<script id='dialogtemplate' type="text/x-template"> 
    <div> 
        <div class="form-row"> 
            <div class="form-group col-md-6"> 
                <div class="e-float-input e-control-wrapper"> 
                    <input id="OrderID" name="OrderID" type="text" value="${OrderID}" ${if(isAdd)} ${else} disabled ${/if} /> 
                    <span class="e-float-line"></span> 
                    <label class="e-float-text e-label-top" for="OrderID">Order ID</label> 
                </div> 
            </div> 
            <div class="form-group col-md-6"> 
                <div class="e-float-input e-control-wrapper"> 
                    <input id="CustomerID" name="CustomerID" type="text" value="${CustomerID}" /> 
                    <span class="e-float-line"></span> 
                    <label class="e-float-text e-label-top" for="CustomerID">Customer ID</label> 
                </div> 
            </div> 
        </div> 
 
    </div> 
</script> 
 


Query#: Another issue is when I change text on the cancel-button of the dialog template, it recognizes it as a save request-type instead of Cancel. 

Based on your requirement we have changed the cancel button text in the dialog and while clicking on this button we have a requestType as cancel. Please refer the below code example and screenshot for more information. 

 
document.addEventListener('DOMContentLoaded', function () { 
            setCulture(); 
    }); 
    function setCulture() { 
 
 
        ej.base.setCulture('es');                 // set the actual culture name here 
 
        ej.base.L10n.load({ 
            'es': { 
                'grid': { 
                    // here we you can load the translations text 
                    "CancelButton": "Cancelar" 
                } 
            } 
        }); 
    } 
 

Screenshot: 

 


For your above queries we have prepared a sample. Please refer the below sample for more information. 


And from validating your query, you have mentioned that chip tool does not scale down in mobile mode. We need more clarify on this query. Please share the below details that will be helpful for us to provide better solution 

1)   Please share your exact requirement scenario with detailed description. 

2)   If possible,  Explain your requirement in detail with some pictorial representation. 

3)   If possible, please reproduce the issue with our above attached sample. 

4)   Share your syncfusion package version 

Regards,
Rajapandi R

MH Marie Hallinan June 16, 2020 09:59 AM UTC

Hi,
Thank you for the quick reply.
Single click works perfectly.

I can't seem to get the CancelButton text to work, I added the code for setCulture, and Iget the following error:

Am I missing a js-file? I have these included:
 
   
   


This is my code for the Chip element: 

                @Html.EJS().ChipList("chip-avatar").EnableDelete(true).Chips(chip =>
       {
           chip.Text("Lägg till och ta bort deltagare i kalenderbokningen i Outlook, klicka på skicka uppdatering och välj Skicka till alla deltagare".).LeadingIconCss("ms-Icon ms-Icon--Info").Enabled(true).Add();
       }).Render()

I want it to look like this:

I am using Syncfusion version 18.1.0.54.

Regards
Marie

RR Rajapandi Ravi Syncfusion Team June 17, 2020 11:57 AM UTC

Hi Marie, 
 
Query#: This is my code for the Chip element 
  
We have checked the reported problem, while using your shared code to render the Chip control we have faced one issue. That issue arises because of in your code after adding the content for Text property extra dot (.) was added in the control rendering code block. To resolve your problem, please remove that dot from code. Please refer the below code block.  
  
Your shared code snippet:  
  
@Html.EJS().ChipList("chip-avatar").EnableDelete(true).Chips(chip =>  
       {  
           chip.Text("Lägg till och ta bort deltagare i kalenderbokningen i Outlook, klicka på skicka uppdatering och välj Skicka till alla deltagare".).LeadingIconCss("ms-Icon ms-Icon--Info").Enabled(true).Add();  
       }).Render()  
  
  
Now modified:  
  
@Html.EJS().ChipList("chip-avatar").EnableDelete(true).Chips(chip =>  
       {  
        chip.Text("Lägg till och ta bort deltagare i kalenderbokningen i Outlook, klicka på skicka uppdatering och välj Skicka till alla deltagare").LeadingIconCss("ms-Icon ms-Icon--Info").Enabled(true).Add();  
       }).Render()  
  
 
Query#:  I can't seem to get the CancelButton text to work 

The grid component has static text on some features that can be changed to other cultures by defining the locale value and translation object. Please refer the below code example and sample for more information. 
 
 
@Html.EJS().Grid("DialogEdit").Locale("es").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).DefaultValue("").Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").DefaultValue("").ValidationRules(new { required = "true" }).Add(); 
 
}).AllowPaging().Load("load").ActionBegin("actionBegin").PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
<script> 
 
        ej.base.L10n.load({ 
            'es': { 
                'grid': { 
                    // here we you can load the translations text 
                    "CancelButton": "Cancelar" 
                } 
            } 
        }); 
 
</script> 
 

 
Please let us know, if you need any further assistance.  

Regards, 
Rajapandi R 


MH Marie Hallinan June 18, 2020 08:12 AM UTC

Hi again,
Thank you for your suggestions, but they don't seem to work.
Tried the changes for Locale, but I get the following error:


The chip element scales down, but it doesn't wrap:


Regards,
Marie

RR Rajapandi Ravi Syncfusion Team June 22, 2020 12:19 PM UTC

Hi Marie, 

Query#: Tried the changes for Locale, but I get the following error 

From validating your query, we suspect in your application the EJ2 scripts was not loaded properly. So that only you can’t access the L10n in your Application. To overcome the problem we suggest you to place the scripts into the header section. And also add ScriptManager to the bottom of the _Layout.cshtml page. The ScriptManager used to place our control initialization script in the page. Please refer the below code example for more information. 

Layout.cshtml 

<head> 
 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    @* Syncfusion Essential JS 2 Styles *@ 
    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" /> 
 
    @* Syncfusion Essential JS 2 Scripts *@ 
 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
 
</head> 



If you still face the issue, please share the below details that will be helpful for us to provide better solution. 

1)       Please share your Layout.cshtml page. 

2)       Please share your complete Grid rendering code. 

3)       Please share your syncfusion package version. 

Query#: The chip element scales down, but it doesn't wrap 

We were unable to predict the root cause of your reported problem in Chips components. Could you please, share us your issue reproducing sample application or share us more details to replicate your reported issue at our end.  
   
It would help us to validate your problem and to provide you the prompt solution at the earliest. 

Regards,
Rajapandi R

MH Marie Hallinan June 23, 2020 12:55 PM UTC

Hi again,
Thank you, language support does work now. I changed the order of the .js-files in the layout-page.

This is the code snippet for the chip component:

               
                    @Html.EJS().ChipList("chip-avatar").EnableDelete(true).Chips(chip =>
               {
                   chip.Text(@Translation.PrebookingPageUpdateInfo).LeadingIconCss("ms-Icon ms-Icon--Info").Enabled(true).Add();
               }).Render()
               
           

It cuts the text, and doesn't wrap it

2) In the grid, I would like to name "Add" in the toolbar to something different, but still want it to open the dialogtemplate in add-mode. If I write a custom toolbar-object, then it doesn't open the dialog. How can I rename it?

Regards,
Marie


RR Rajapandi Ravi Syncfusion Team June 24, 2020 12:52 PM UTC

Hi Marie, 

Thanks for the update 

Query#: In the grid, I would like to name "Add" in the toolbar to something different 

From validating your query, we could see that you like to change the name of Add button so that you are trying to use the Grid custom toolbar to achieve your requirement. So based on your query we have prepared a sample and achieve your requirement by using the custom toolbar ToolbarClick event. Please refer the below code example and sample for more information. 


@{ 
    List<object> toolbarItems = new List<object>(); 
    toolbarItems.Add("Add"); 
    toolbarItems.Add("Edit"); 
    toolbarItems.Add("Delete"); 
    toolbarItems.Add("Update"); 
    toolbarItems.Add("Cancel"); 
    toolbarItems.Add(new { text = "CustomAdd", tooltipText = "CustomAdd", id = "Click"}); 
} 
 
@Html.EJS().Grid("DialogEdit").Locale("es").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 
{ 
    .  .  .  .  .  .  .  
 
}).AllowPaging().Load("load").ToolbarClick("toolbarClick").ActionBegin("actionBegin").PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(toolbarItems).Render() 
 
<script> 
function toolbarClick(args) { 
        if (args.item.id === 'Click') { 
            var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
            grid.addRecord(); //it helps to open the dialog when you click on that your custom toolbar item 
        } 
    } 
</script> 


 



And also you can achieve your requirement in another way by defining the Locale. Please refer the below code example and documentation for more information. 


<script> 
    ej.base.L10n.load({ 
        'es': { 
            'grid': { 
                // here we you can load the translations text 
                "CancelButton": "Cancelar", 
                "Add": "CustomAdd" 
            } 
        } 
    }); 
</script> 

 

In this below document contains the list of properties and its values are used in the grid. Using this Locale keywords you can change the default text to your customized text. 


Query#: It cuts the text, and doesn't wrap it 

We have checked the shared requirement details and found that your expecting display entire text content without clipping in chip component.  
  
We can override the default styles of Chip component to achieve your requirement. We have prepared sample by overriding the default styles of Chip component to meet your expected requirement.  
  
Refer the below code snippet of our solution:  
  
@Html.EJS().ChipList("chip-avatar").EnableDelete(true).Chips(chip =>  
       {  
        chip.Text("Lägg till och ta bort deltagare i kalenderbokningen i Outlook, klicka på skicka uppdatering och välj Skicka till alla deltagare, Lägg till och ta bort deltagare i kalenderbokningen i Outlook, klicka på skicka uppdatering och välj Skicka till alla deltagare, Lägg till och ta bort deltagare i kalenderbokningen i Outlook, klicka på skicka uppdatering och välj Skicka till alla deltagare").LeadingIconCss("ms-Icon ms-Icon--Info").Enabled(true).Add();  
       }).Render()  
<style>  
    .e-chip-list.e-chip, .e-chip-list .e-chip {  
        height: 100%;  
    }  
  
        .e-chip-list.e-chip .e-chip-text, .e-chip-list .e-chip .e-chip-text {  
            overflow: auto;  
            text-overflow: clip;  
            white-space: break-spaces;  
            margin-right:10px;  
        }  
  
        .e-chip-list.e-chip .e-chip-delete, .e-chip-list .e-chip .e-chip-delete {  
            display: contents;  
        }  
</style>  
 

Please, download the sample from the following link.  
  

If you still face the issue, please replicate and share the issue with our above attached sample. 

Regards, 
Rajapandi R 


MH Marie Hallinan June 25, 2020 08:30 AM UTC

Thank you, that fixed my issues!

RR Rajapandi Ravi Syncfusion Team June 26, 2020 08:36 AM UTC

Hi Marie, 

We are happy to hear that our suggested solution was working fine from your end. 

Please get back to us if you need further assistance. 

Regards,
Rajapandi R 


Loader.
Up arrow icon