We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Item configuration in toolbar

Hello

I'm looking for an example similar to the last example on this page
https://ej2.syncfusion.com/javascript/documentation/toolbar/item-configuration/
but there's none for the ASP.NET MVC.

How do I do this using ASp.NET MVC ?

Thanks, Tom

5 Replies

DL Deepa Loganathan Syncfusion Team November 30, 2018 12:38 PM UTC

Hi Tom,  
 
Thanks for contacting Syncfusion support. 
 
We understood your requirement to add input controls as a Toolbar item and it can be achieved by using the Template API of Toolbar Helper as given in the below code. 
 
 
 
@Html.EJS().Toolbar("defaultToolbar").Created("created").Items(new List<ToolbarItem> { 
 
new ToolbarItem { Text = "Input", Template= "<input id='numeric' type='text'/>" }, // Element 
       }).Render() 
 
<script> 
    function created() { 
     var numeric = new ej.inputs.NumericTextBox({ 
            format: 'c2', 
            value: 1, 
            width: 150 
        }); 
        numeric.appendTo('#numeric');  // Render numeric text box  
    } 
</script> 
 
 
We have attached the view page of our sample to achieve your requirement.  
 
 
Also, we have considered to add this information to the How-To section of our help pages.  
 
Regards, 
Deepa L. 



TT Tomislav Tustonic November 30, 2018 02:32 PM UTC

Thanks for the reply

How do I do this for a toolbar in a Grid?


TS Thavasianand Sankaranarayanan Syncfusion Team December 3, 2018 09:30 AM UTC

Hi Tomislav, 

Query : How do I do this for a toolbar in a Grid? 
 
As per your requirement we have created Grid sample with custom toolbar. Please find the below code example and sample for more information. 

@{ 
 
    List<object> toolbarItems = new List<object>(); 
    toolbarItems.Add(new 
    { 
        id = "template", 
        text = "Input", 
        template = "<input id='numeric' type='text'/>" 
    }); 
} 
 
@Html.EJS().Grid("Grid").Created("created").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
{ 
    col.Type("checkbox").Width("50").Add(); 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
    . . . .  
    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); 
 
}).AllowResizing().ToolbarClick("toolbarClick").Toolbar(toolbarItems).AllowPaging().PageSettings(page => page.PageCount(5)).EditSettings(edit => {edit.AllowEditing(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }). 
Render() 
 
 
<script> 
    function toolbarClick(args) { 
        if (args.item.id === 'template') { 
            alert("template"); 
        } 
    } 
</script> 
 
<script> 
    function created() { 
        var numeric = new ej.inputs.NumericTextBox({ 
            format: 'c2', 
            value: 1, 
            width: 150 
        }); 
        numeric.appendTo('#numeric');  // Render numeric text box 
    } 
 
</script> 
  


Please get back to us if you need further assistance from this. 

Regards, 
Thavasianand S. 



TT Tomislav Tustonic December 3, 2018 09:29 PM UTC

This works fine,
Thanks,
Tom


MS Madhu Sudhanan P Syncfusion Team December 4, 2018 07:23 AM UTC

Hi Tomislav, 
Please get back to us if you require further assistance. 
Regards, 
Madhu 


Loader.
Live Chat Icon For mobile
Up arrow icon