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
close icon

Custom Button Text based on Model Value ?

I am trying to create a grid like this

IdDevicesClient Name
112Test1
213

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




5 Replies

AS Alan Sangeeth S Syncfusion Team October 17, 2014 06:52 AM UTC

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



FM Fabio Melendez October 17, 2014 02:06 PM UTC

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








AS Alan Sangeeth S Syncfusion Team October 20, 2014 12:52 PM UTC

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 “currentViewDataGrid 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



RE rezah March 21, 2015 12:28 PM UTC


This download link seems to be broken.

Regards,
Rezah


AS Alan Sangeeth S Syncfusion Team March 23, 2015 09:25 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon