1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. How to let user select edit mode of the Grid

How to let user select edit mode of the Grid

I have a standard toolbar and an editing mode defined. Can I have a dropdown in the toolbar so that the user can select the editing mode he prefers and then dynamically change the editing mode of the grid?

    <ejs-grid id="entityGrid" columns="@ViewData["columns"]" toolbar="@(new List<string>() { "Add","Edit", "Delete", "Update", "Cancel" })">
        <e-data-manager url="/DataExplorer/EntityDatasource" adaptor="UrlAdaptor" BatchUrl="/DataExplorer/EntityBatchUpdate"></e-data-manager>
        <e-grid-editSettings allowEditing="true" allowAdding="true" allowDeleting="true" mode="Batch"></e-grid-editSettings>
    </ejs-grid>

12 Replies
PS Pavithra Subramaniyam Syncfusion Team August 22, 2018 04:03 AM UTC

Hi Ronald, 
 
Thanks for contacting Syncfusion Support. 
 
We have checked your query and You can achieve your requirement by using below solution. We have prepared a simple sample based on your requirement in which we have created a dropdownlist component with default toolbar items. Please refer to the below code example, Documentation link and sample link. 
 
[index.cshtml] 
<ejs-grid actionComplete="complete" dataBound="dataBound" id="Grid" dataSource="ViewBag.datasource" allowPaging="true" toolbar="@(new List<string>() { "Add","Edit", "Delete", "Update", "Cancel", "dropdown" })" height="270"> 
   <e-grid-columns> 
        .  .  . 
   </e-grid-columns> 
</ejs-grid> 
 
<script> 
    var data = ['Normal', 'Dialog', 'Batch']; 
    var dropDownListObject; 
    var grid; 
    function dataBound() {  
         var list = document.getElementsByClassName("e-toolbar-item")[5]; 
        .  .  . 
        var input = ej.base.createElement('input', { id: 'ddl' }); 
        list.appendChild(input); 
 
        dropDownListObject = new ej.dropdowns.DropDownList({ 
            // set the data to dataSource property 
             dataSource: data, 
             value: grid.editSettings.mode, 
            change: change, 
            popupHeight: 200 
        }); 
        dropDownListObject.appendTo('#ddl'); 
    } 
 
    function change(args) {         
        grid.editSettings.mode = args.value; 
} 
</script> 
 
 
Note: BatchUrl works only for ‘  edit mode. If you change the edit mode other than ‘Batch’ you can assign the ‘CrudUrl’ property for DataManager for CRUD operations. 
 
                              https://ej2.syncfusion.com/documentation/drop-down-list/?lang=typescript  
                            https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit.html#crud-url  
 
 
Regards, 
Pavithra S. 


RD Ronald Dirkx August 22, 2018 03:26 PM UTC

Hi Pavithra

thanks for the script but I have an issue.
The grid is being rendered in a PartialView. When I place the script inside the PartialView after the definition of the grid DevTools shows the error "SCRIPT5009: SCRIPT5009: 'dataBound' is not defined". If I place the script before the definition of the grid in the PartialView or anywhere in the parent view then DevTools shows the error: SCRIPT5007: SCRIPT5007: Unable to get property 'mode' of undefined or null reference pointing to the line dropDownListObject = new ej.dropdowns.DropDownList({ of the script

I tried adding the line grid = document.getElementById("entityGrid"); to the script but that makes no difference.

For your reference, my script and grid definition as defined in my PartialView:

<script>
    var data = ['Normal', 'Dialog', 'Batch'];
    var dropDownListObject;
    var grid;
    function dataBound() {
        var list = document.getElementsByClassName("e-toolbar-item")[5];
        var input = ej.base.createElement('input', { id: 'ddl' });
        list.appendChild(input);
        grid = document.getElementById("entityGrid");
        dropDownListObject = new ej.dropdowns.DropDownList({
            // set the data to dataSource property
            dataSource: data,
            value: grid.editSettings.mode,
            change: change,
            popupHeight: 200
        });
        dropDownListObject.appendTo('#ddl');
    }
    function change(args) {
        grid.editSettings.mode = args.value;
    }
</script>
<div>
    <ejs-grid id="entityGrid" dataBound="dataBound" columns="@ViewData["columns"]" toolbar="@(new List<string>() { "Add","Edit", "Delete", "Update", "Cancel", "dropdown" })" allowPaging="true" allowSelection="true" allowSorting="true" allowFiltering="true" query="new ej.data.Query().addParams('CatalogGuid', '@ViewData["catalogGuid"]').addParams('EntityGuid', '@ViewData["entityGuid"]')">
        <e-data-manager url="/DataExplorer/EntityDatasource" adaptor="UrlAdaptor" insertUrl="/DataExplorer/EntityInsert" updateUrl="/DataExplorer/EntityUpdate" BatchUrl="/DataExplorer/EntityBatchUpdate"></e-data-manager>
        <e-grid-editSettings allowEditing="true" allowAdding="true" allowDeleting="true" mode="Dialog"></e-grid-editSettings>
        <e-grid-pagesettings pageCount="5" pageSize="15" pageSizes="@(new string[] { "5", "10", "15", "20", "25", "50", "All" })"></e-grid-pagesettings>
        <e-grid-filterSettings type="Menu" mode="OnEnter" showFilterBarStatus="true"></e-grid-filterSettings>
        <e-grid-sortSettings></e-grid-sortSettings>
    </ejs-grid>
    <ejs-scripts></ejs-scripts>
</div>


thanks

VA Venkatesh Ayothi Raman Syncfusion Team August 23, 2018 08:48 AM UTC

Hi Ronald, 
 
 
Thanks for the update. 

We went through your code example which you have shared for us and found that you have tried to get the Grid component instance but you only used the Grid element in your code. This is the cause of the reported issue. We have prepared a simple sample in Partial View. Please refer to the below code example and sample link. 

[GridViewPartial.cshtml] 
<script> 
    function dataBound() { 
        grid = document.getElementById("entityGrid").ej2_instances[0]; // Getting EJ2 Grid instance 
        if (ej.base.isNullOrUndefined(grid.toolbarModule.element.querySelector('#ddl'))) { // checking whether the dropdown is already present or not 
            var list = document.getElementsByClassName("e-toolbar-item")[5]; 
            list.removeChild(list.childNodes[0]);   // removes the temporary toolbar item 
            var input = ej.base.createElement('input', { id: 'ddl' }); 
            list.appendChild(input); // appends the new input element in the toolbar 
 
            dropDownListObject = new ej.dropdowns.DropDownList({ 
                // set the data to dataSource property 
                dataSource: data, 
                value: grid.editSettings.mode, 
                change: change, 
                popupHeight: 200 
            }); 
            dropDownListObject.appendTo('#ddl'); // appends the dropdown component in the input element 
 
        } 
    } 
    function change(args) { 
        grid.editSettings.mode = args.value; // changing the editSettings mode 
           } 
</script> 
<div> 
    <ejs-grid id="entityGrid" dataBound="dataBound" columns="@ViewData["columns"]" toolbar="@(new List<string>() { "Add","Edit", "Delete", "Update", "Cancel", "dropdown" })" allowPaging="true" allowSelection="true" allowSorting="true" allowFiltering="true" > 
         <e-data-manager url="/Home/UrlDatasource" adaptor="UrlAdaptor" BatchUrl="/Home/Update"></e-data-manager> 
        <e-grid-editSettings allowEditing="true" allowAdding="true" allowDeleting="true" mode="Dialog"></e-grid-editSettings> 
        <e-grid-pagesettings pageCount="5" pageSize="15" pageSizes="@(new string[] { "5", "10", "15", "20", "25", "50", "All" })"></e-grid-pagesettings> 
        <e-grid-filterSettings type="Menu" mode="OnEnter" showFilterBarStatus="true"></e-grid-filterSettings> 
        <e-grid-sortSettings></e-grid-sortSettings> 
    </ejs-grid> 
    <ejs-scripts></ejs-scripts> 
</div> 
 



Please let us know if you have any further assistance on this. 
 
Regards, 
Venkatesh Ayothiraman. 


RD Ronald Dirkx August 23, 2018 01:41 PM UTC

Thanks for your update. I am not a JS expert so I just used the script that was provided to me in your first reply.

I now updated the script based on your last reply: I don't get any errors but I also don't have a dropdown in the toolbar.
As far as I can see the script didn't update anything in the toolbar, I just have a button with label 'dropdown' in the toolbar. This is the generated HTML for the toolbar shown in DevTools

<div tabindex="0" class="e-control e-toolbar e-keyboard" id="entityGrid_toolbarItems" role="toolbar" aria-disabled="false" aria-haspopup="false" style="width: auto; height: auto;" aria-orientation="horizontal">
 <div class="e-toolbar-items">
  <div title="Add" class="e-toolbar-item" aria-disabled="false"><button tabindex="-1" class="e-tbar-btn e-tbtn-txt e-control e-btn" id="entityGrid_add" style="width: auto;" type="button"><span class="e-btn-icon e-add e-icons e-icon-left"></span><div class="e-tbar-btn-text">Add</div></button></div>
  <div title="Edit" class="e-toolbar-item" aria-disabled="false"><button tabindex="-1" class="e-tbar-btn e-tbtn-txt e-control e-btn" id="entityGrid_edit" style="width: auto;" type="button"><span class="e-btn-icon e-edit e-icons e-icon-left"></span><div class="e-tbar-btn-text">Edit</div></button></div>
  <div title="Delete" class="e-toolbar-item" aria-disabled="false"><button tabindex="-1" class="e-tbar-btn e-tbtn-txt e-control e-btn" id="entityGrid_delete" style="width: auto;" type="button"><span class="e-btn-icon e-delete e-icons e-icon-left"></span><div class="e-tbar-btn-text">Delete</div></button></div>
  <div title="Update" class="e-toolbar-item e-overlay" aria-disabled="true"><button tabindex="-1" class="e-tbar-btn e-tbtn-txt e-control e-btn" id="entityGrid_update" style="width: auto;" type="button"><span class="e-btn-icon e-update e-icons e-icon-left"></span><div class="e-tbar-btn-text">Update</div></button></div>
  <div title="Cancel" class="e-toolbar-item e-overlay" aria-disabled="true"><button tabindex="-1" class="e-tbar-btn e-tbtn-txt e-control e-btn" id="entityGrid_cancel" style="width: auto;" type="button"><span class="e-btn-icon e-cancel e-icons e-icon-left"></span><div class="e-tbar-btn-text">Cancel</div></button></div>
  <div class="e-toolbar-item" aria-disabled="false">
   <button tabindex="-1" class="e-tbar-btn e-tbtn-txt e-control e-btn" id="entityGrid_dropdown" style="width: auto;" type="button">
    <div class="e-tbar-btn-text">dropdown</div>
   </button>
  </div>
 </div>
</div>

I noticed that there is a tag <div class="e-toolbar-items"> as well as a tag <div class="e-toolbar-item">. Would that have any impact on the following line:
var list = document.getElementsByClassName("e-toolbar-item")[5];
For completeness, this is the script I'm using now:
<script>
    // creates dropdown in Grid toolbar so that user can select an Edit mode
    var grid;
    function dataBound() {
        grid = document.getElementById("entityGrid").ej2_instances[0];
        if (ej.base.isNullOrUndefined(grid.toolbarModule.element.querySelector('#ddl'))) { // checking whether the dropdown is already present or not
            var data = ['Normal', 'Dialog', 'Batch'];
            var dropDownListObject;
            var list = document.getElementsByClassName("e-toolbar-item")[5];
            list.removeChild(list.childNodes[0]);   // removes the temporary toolbar item
            var input = ej.base.createElement('input', { id: 'ddl' });
            list.appendChild(input);
            dropDownListObject = new ej.dropdowns.DropDownList({
                // set the data to dataSource property
                dataSource: data,
                value: grid.editSettings.mode,
                change: changeEditMode,
                popupHeight: 200
            });
            dropDownListObject.appendTo('#ddl');
        }
    }
    function changeEditMode(args) {
        grid.editSettings.mode = args.value;
    }
</script>
<div>
    <ejs-grid id="entityGrid" columns="@ViewData["columns"]" toolbar="@(new List<string>() { "Add","Edit", "Delete", "Update", "Cancel", "dropdown" })" allowPaging="true" allowSelection="true" allowSorting="true" allowFiltering="true" query="new ej.data.Query().addParams('CatalogGuid', '@ViewData["catalogGuid"]').addParams('EntityGuid', '@ViewData["entityGuid"]')">
     ...


Any thoughts?

RD Ronald Dirkx August 23, 2018 01:56 PM UTC

Please forget my previous reply. As I didn't want the error from stopping further testing I had removed the dataBound tag from my Grid definition. I added it again and now it is working fine!!

One other question: can I add a label or icon so that I can inform the user of what this dropdown is about? So a label or icon outside of the dropdown, on the toolbar.

VA Venkatesh Ayothi Raman Syncfusion Team August 24, 2018 05:52 AM UTC

Hi Ronald, 

Thanks for the update. 
 
 
We have checked your query and you can set the label or icon for the dropdown component in the dataBound event itself. We have prepared a simple sample for your requirement. In this sample, we have used our ‘edit’ icon for example. Instead of that, you can use the required icon. Please refer to the below code example and sample link. 

[GridViewPartial.cshtml] 
<script> 
     
    function dataBound() { 
        grid = document.getElementById("entityGrid").ej2_instances[0]; 
        if (ej.base.isNullOrUndefined(grid.toolbarModule.element.querySelector('#ddl'))) { 
            var list = document.getElementsByClassName("e-toolbar-item")[5]; 
            list.removeChild(list.childNodes[0]); 
            var input = ej.base.createElement('input', { id: 'ddl' }); 
             
            var span = ej.base.createElement('span', { className: 'e-btn-icon e-add e-icons e-icon-left' }); 
            var label = ej.base.createElement('div', { className: 'e-tbar-btn-text', innerHTML:'EditMode' }); 
            list.appendChild(input); 
            list.appendChild(span);  // appending the span element for icon next to dropdown component 
            list.appendChild(label); // appending the div element for label 
 
            dropDownListObject = new ej.dropdowns.DropDownList({ 
                .  .  . 
            }); 
            dropDownListObject.appendTo('#ddl'); 
        } 
    } 
     
</script> 
<div> 
    <ejs-grid id="entityGrid" dataBound="dataBound" columns="@ViewData["columns"]" toolbar="@(new List<string>() { "Add","Edit", "Delete", "Update", "Cancel", "dropdown" })" allowPaging="true" allowSelection="true" allowSorting="true" allowFiltering="true" > 
     .  .  . 
    </ejs-grid> 
    <ejs-scripts></ejs-scripts> 
</div> 



Please let us know if you have any further assistance on this. 
 
 
Regards, 
Venkatesh Ayothiraman. 


RD Ronald Dirkx August 24, 2018 02:41 PM UTC

Works perfect.

Is there a list of all icons included (built-in) with EJ2?

VA Venkatesh Ayothi Raman Syncfusion Team August 27, 2018 05:42 AM UTC

Hi Ronald, 
 
 
Thanks for the feedback. 
 
 
We have already created documentation task for list of ej2 icons. This will be available in any of upcoming release. We have attached the available icon in EJ2 as local copy. To view the list of available icons, open the demo.html. It will show all the available icons in EJ2-grid. You can use icon id to use in your toolbar.   
 
   
 
And you can find the list of available icons in below link.  
 
 
Please get back to us if you need further assistance on this.  
 
 
Regards, 
Venkatesh Ayothiraman. 


RD Ronald Dirkx September 12, 2018 11:38 AM UTC

I have tried using the icon file provided but it doesn't seem to work.

Question 1:
When I try to use another icon instead of the Add icon (which you used in your example script) the icon isn't displayed.
This is the line in the script that shows the Add icon.
var span = ej.base.createElement('span', { className: 'e-btn-icon e-add e-icons e-icon-left', innerHTML: '&nbsp;' });
If I replace the part from the className with any of the following then it doesn't show an icon:
'e-btn-icon e-FilterFields e-icons e-icon-left'
'e-btn-icon e-filterfields e-icons e-icon-left'
'e-btn-icon e-434 e-icons e-icon-left'

e-FilterFields (e-434) is an icon I found in the icon file you provided
when I use 'fas fa-th-list' (a FontAwesome icon) then it is working just like with the e-add icon
Question 2:
I have a general question on how to use the EJ2 icons as I'm not able to display them as I would with other icons.
From the following lines only the FontAwesome icon is shown: 
<span class="e-icons e-add e-icon-left"> e-add </span>
<span class="e-btn-icon e-FilterFields e-icons e-icon-left"> e-FilterFields </span>
<span class="e-btn-icon e-434 e-icons e-icon-left"> e-434 </span>
<span class="fas fa-th-list">fa-th-list</span>

Similar, if I want to show an icon on a button then it works using FontAwesome but not with the EJ2 icons?
<button class="btn btn-default" type="submit" asp-controller="DataExplorer" asp-action="TestInsert"><i class="fas fa-th-list"></i> Test Insert</button>

Question 3
Maybe I missed it but I don't seem to find general guidelines on using icons in the ASP.Net Core documentation.

JR John Rajaram Syncfusion Team September 18, 2018 02:42 PM UTC

Hi Ronald, 
Please find the below details. 
Query 1: 
When I try to use another icon instead of the Add icon (which you used in your example script) the icon isn't displayed 
Answer: 
We would like to let you know that, In order to reduce the size of our Icon file, we have removed the unused icons from our icon list, which are not used by our components. And then we have hosted these unused icons style in the below CDN link and you can directly use it in your application. 
 
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/custom-icons.css" rel="stylesheet" /> 
 
Add the e-custom-icons class in the HTML element with the corresponding content style by using below code snippet. 
 
<span class="e-custom-icons search"></span> 
<style> 
  .search::before { 
    content: '\e806' 
  } 
</style> 
 
 
For your convenience, we have created a simple application in the stackblitz and the same can be referred by the below link, 
You can also refer the below link to know the unused icons removed from our icon library. 
 
Query 2: 
I have a general question on how to use the EJ2 icons as I'm not able to display them as I would with other icons. 
Answer: 
We request you to refer the following simple ASP.NET Core sample for using old EJ2 Icons in your application. 
 
Query 3: 
Maybe I missed it but I don't seem to find general guidelines on using icons in the ASP.Net Core documentation. 
Answer: 
We will update the complete icon list and guidelines for using the icons in our online documentation. It will be available in our upcoming Essential Studio Volume 3, 2018 release. 
 
Please let us if you need further assistance on this. 
Regards, 
John R  


RD Ronald Dirkx September 20, 2018 08:34 AM UTC

Thanks. That's all I needed to know.

JR John Rajaram Syncfusion Team September 21, 2018 08:30 AM UTC

Hi Ronald, 
Thanks for the update. Please let know if you need further assistance on this. 
Regards, 
John R 


Loader.
Up arrow icon