Custom Button Text based on Model Value ?

[Fabio Melendez]

I am trying to create a grid like this

Id	Devices	Client Name
1	12	Test1
2	13	Test2

The goal is to be able to click on the device row cell, so for example on the "12" and have it fire a client side command

The problem I am having is I have created the command column like this

col.HeaderText("Devices").Commands(command =>

{

    commandType("Test")

           .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

            {

              Text = "[Trying to insert here the value that would be in my model {{:DeviceCount}}"

             }

             .IsBound(true);

             .Add();

}

But I am not sure how to make it bound and have the value display as the text of the button

[Alan Sangeeth S]

Hi Fabio,

 

Thanks for using Syncfusion Products.

 

We are glad to let you know that we have achieved your requirement using “Column template” Grid feature by which we have bounded click event to the Model class property. Please refer the following code snippets.

@(Html.EJ().Grid<EJGrid.Models.Order>("Editing")
...

col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Template(true).TemplateID("#colTemplate").Width(95).Add();

)

 

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

    <span style="text-decoration: underline" onclick="templateColHandler(this)">{{:Freight}}</span>

</script>

<script>

    function templateColHandler(e) {

        alert(e.textContent)

    }

</script>

 

For your convenience we have created a sample and the same can be downloaded from below link.

Sample: http://www.syncfusion.com/downloads/support/directtrac/130822/EJGrid-1693858473.zip

 

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S

[Fabio Melendez]

That works great for display, but how do I find out now which row was clicked on the grid?

I am trying to get the record that was bound so I can retrieve some properties to pass into my script method

if I try to do something like:

function templateColHandler(e)

{

var grid = $("#MerchantGrid").ejGrid("instance");

var index = this.element.closes("tr").index;

var record = grid.getCurrentViewData()[index];

processClick(record.Name, record.Id);

}

It just fails because obviously I do not have the this.element

[Alan Sangeeth S]

Hi Fabio,

 

Thanks for the update.

 

We would like to let you know that current td element will be passed to the “templeteColHandler” method argument “e”. Using the element td in argument variable “e”, we can find the row index by which we can get the current row details using “currentViewData” Grid property. Please refer the following code snippets.

function templateColHandler(e) {

        var gridObj = $("#Grid").ejGrid("instance")

        var rowIndex = $(e).closest("tr").index();

        var currentRecord = gridObj.model.currentViewData[rowIndex]

...

    }

 

For your convenience we have modified the sample and the same can be downloaded from below link.

 

Sample: http://www.syncfusion.com/uploads/user/directTrac/127277/EJGrid1977275079.zip

 

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S

[rezah]

http://www.syncfusion.com/uploads/user/directTrac/127277/EJGrid1977275079.zip

This download link seems to be broken.

Regards,

Rezah

[Alan Sangeeth S]

Hi Rezah,


Thanks for using Syncfusion products.


The sample you have requested can be downloaded from the below link.


Sample: http://www.syncfusion.com/downloads/support/forum/117417/EJGrid377340157.zip


Also for you information we have modified the sample with the latest verison 12.4.0.34


Please let us know if you have any queries.
Regards,
Alan Sangeeth S