External Toolbar for Grid

[Michael Kroeschel]

Hi All

I'm using the ASP.NET MVC Grid and I need an external button to add a new row (the same what Default toolbar items => add is doing).

I allready have a Button

@Html.EJ().Button("button51").Text("Hinzufügen").ShowRoundedCorner(true).Size(ButtonSize.Large).ContentType(ContentType.TextAndImage).PrefixIcon("e-icon e-plus").ClientSideEvents(e => e.Click("onclick"))

and in the function I have the Grid

function onclick() {

      var inst = $("#FlatGrid").data("ejGrid");

}

the only this I'm search is something like 

inst.addNewRow();

Thanks for you help!

Regards

Michael

[Vignesh Natarajan]

Hi Michael, 

Thanks for contacting Syncfusion support.  

Query: “I need an external button to add a new row (the same what Default toolbar items => add is doing)” 

We have analyzed your query and we have achieved your requirement using AddRecord() method of Grid in the button Click event. 

Refer the below code snippet 

@Html.EJ().Button("button51").Text("Hinzufügen").ShowRoundedCorner(true).Size(ButtonSize.Large).ContentType(ContentType.TextAndImage).PrefixIcon("e-icon e-plus").ClientSideEvents(e => e.Click("onclick")) 

@(Html.EJ().Grid<OrdersView>("FlatGrid") 

. 

.   

. 

. 

. 

<script type="text/javascript"> 

    function onclick(args) { 

        var GridObj = $("#FlatGrid").ejGrid("instance"); 

        GridObj.addRecord({ "OrderID": 12333 }) 

    } 

</script>  

For your convenience we have prepared a sample which can be downloaded from below link 

Sample: http://www.syncfusion.com/downloads/support/forum/136433/ze/SyncfusionMvcApplication40-892795265.zip  

Kindly refer the UG documentation for your reference 

https://help.syncfusion.com/api/js/ejgrid#methods:addrecord  

Regards,  

Vignesh Natarajan  

[Michael Kroeschel]

Hi Vignesh Natarajan  

thank you for your answere. but it is not working as expected. When I call this Function =>

   var GridObj = $("#FlatGrid").ejGrid("instance"); 

        GridObj.addRecord({ "OrderID": 12333 }) 

it directly calls the service for UpdateURL. But I want to see the "Add New Record" Dialog

Regards

[Prasanna Kumar Viswanathan]

Hi Michael, 

To see “Add New Record Dialog” you need to use addRecord method without parameters.  

Find the code example:  

@Html.EJ().Button("button51").----PrefixIcon("e-icon e-plus").ClientSideEvents(e => e.Click("onclick")) 

 

----------------------------------- 

 

@(Html.EJ().Grid<OrdersView>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .EditSettings(edit=>edit.AllowAdding(true).EditMode(EditMode.Dialog)) 

         

        .Columns(col => 

        { 

            -------- 

        })) 

-------------------------------------------- 

<script type="text/javascript"> 

    function onclick(args) { 

        var GridObj = $("#FlatGrid").ejGrid("instance"); 

        GridObj.addRecord(); 

    } 

</script> 

Sample: http://www.syncfusion.com/downloads/support/forum/136433/ze/SyncfusionMvcApplication40-984633444 

Regards, 

Prasanna Kumar N.S.V 

[Michael Kroeschel]

Thank you for you help! That did the trick:

[Vignesh Natarajan]

Hi Michael, 

Thanks for the update. 

We are glad to hear that your query has been resolved by our solution.  

Kindly get back to us if you need further assistance 

Regards, 

Vignesh Natarajan