Conditional template column with a button in a grid

[Carlo]

Hello. Let's say that I have this model, which I want to show in a grid:

Person

{

String Name;

String Surname;

Boolean IsEnabled;

}

Now, I want to add a template column, which should contain a button if the "IsEnabled" person property of that row is true, otherwise it should contain nothing. This button should redirect you to a different page, which should receive the id of the row which the button belongs to. At the moment I'm doing the following:

..

col.HeaderText("Sottogruppi").TemplateID("#ButtonTemplate").Add();

col.Field("Id").HeaderText("Id").IsPrimaryKey(true).Visible(false).Add();

col.Field("Name").HeaderText("Name");

col.Field("IsEnabled").DefaultValue(true).EditType(EditingType.Boolean).Add();

..

then, to add the button:

<script id="ButtonTemplate" type="text/template">

    <button onclick="btnclick({{:Id}})">Do something</button>

</script>

..and the code which redirects to the page:

<script type="text/javascript">

    function btnclick(id) {

            var url = '@(Url.RouteUrl("myRoute"))'

            location.rel='nofollow' href = url + "?key=" + id;

    }

</script>

So, I have these 2 unrelated questions:

1) How to do so the button in the template column is present/visible only if its row person "IsEnabled" property is true

2) Is it correct / best practice to perform a page redirect this way? location.rel='nofollow' href = url + "?key=" + id; I ask this because doing this through GET exposes the row id in the address bar of course...

[Saravanan Arunachalam]

Hi Carlo,

Thanks for contacting Syncfusion Support.

Query 1:  How to do so the button in the template column is present/visible based on Boolean column.

When the “Boolean” column is true, we will render the button by using “JsRender If condtion” in the jsrender template and refer to the code example and jsRender documentation link.

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

    {{if Verified }}

    <input type="button" class="buttontemp" value ="{{:OrderID}}" />

    {{/if}}

</script>

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

        .Columns(col =>

        {

            col.HeaderText("Button").Template(true).TemplateID("#columnTemplate").Width(100).Add();

                    }))

 

https://www.jsviews.com/#iftag

We have used the event “TemplateRefresh” of Grid to render the ejButton and bind the click event to post the data to the server. Please refer to the code example and online documentation link.

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

             .ClientSideEvents(eve => { eve.TemplateRefresh("refreshTemplate"); })

)

function refreshTemplate(args) {

            var id = args.data.OrderID

            $(args.cell).find(".buttontemp").ejButton({

                click: function (args) {

                    . . .

                }

            });

    }

http://help.syncfusion.com/js/api/ejgrid#events:templaterefresh

Query 2:  Is it correct / best practice to perform a page redirect this way?

If you post the data to the server using “window.location.rel='nofollow' href”, the data will expose on the address bar. If you want to hide the data on the address bar while posting the data, use $.post or $.ajax on the click event of Button. Please refer to the below Jquery API documentation link.

http://api.jquery.com/jquery.post/

http://api.jquery.com/jquery.ajax/

Regards,

Saravanan A.

[Carlo]

thanks a lot for your kind help. Unfortunately, if I add the following to my grid declaration:

.ClientSideEvents(eve => { eve.TemplateRefresh("refreshTemplate");

I experience a problem on the creation of a DropDownList in the grid editing form, as I explain in this thread:

https://www.syncfusion.com/forums/121073/best-practice-to-populate-read-write-a-dropdownlist-inside-a-grid-dialog-edit

What should I do in order to use ".ClientSideEvents(eve => { eve.TemplateRefresh("refreshTemplate");" and keep the dropdownlist in the grid editing form working?

[Mohammed Farook J]

Hi Carlo,

We have analyzed your requirement and we have unable to reported issue. Please check the code snippet.

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

    <input type="button" class="buttontemp" value="{{:OrderID}}" />

   

</script>

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

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

         .AllowPaging()    /*Paging Enabled*/

              .EditSettings(edit=>{edit.AllowAdding().AllowDeleting().AllowEditing(); })

                  .ClientSideEvents(eve => { eve.TemplateRefresh("refreshTemplate"); })

        .Columns(col =>

        {

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

          

            col.Field("EmployeeID").HeaderText("Employee ID").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).TextAlign(TextAlign.Right).Width(75).Add();

           

            col.HeaderText("Button").Template(true).TemplateID("#columnTemplate").Width(100).Add();

        }))

<script type="text/javascript">

    function create() {

        return $("<input>");

    }

    function write(args) {

        obj = $('#Edittemplate').ejGrid('instance');

        //custom datasource

        var data = [{ value: "1", text: "1" }, { value: "2", text: "2" }, { value: "3", text: "3" }, { value: "4", text: "4" }, { value: "5", text: "5" }, { value: "6", text: "6" }, { value: "7", text: "7" }, { value: "8", text: "8" }, { value: "9", text: "9" }]

        args.element.ejDropDownList({ width: "100%", dataSource: data, value: args.rowdata !== undefined ? args.rowdata["EmployeeID"] : "" });

    }

    function read(args) {

       

        return args.ejDropDownList("getValue");

    }

    function refreshTemplate(args) {

        var id = args.data.OrderID

        $(args.cell).find(".buttontemp").ejButton({

            click: function (args) {

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

                obj.selectRows(obj.selectedRowsIndexes[0]);

                obj.startEdit()

            }

        });

    }
    </script>

We analyzed your requirement and we have created a sample and the sample can be downloaded from the link.

Sample Link: http://www.syncfusion.com/downloads/support/forum/121030/ze/SyncfusionMvcApplication1_(2)-267955431


Please screen shot.





Query : if you still facing same issue. Please provide below details:

1.       Please modified /share the sample as reproduce the issue or provide full code snippet of view page

2.       Please share screen shot


Regards,
J.Mohammed Farook

---

CA Carlo November 11, 2015 02:14 PM UTC

Greetings. Unfortunately with this approach the dropdownlist in the edit dialog still fails to be created (as soon as I add .ClientSideEvents(eve => { eve.TemplateRefresh("refreshTemplate"); it fails, and I get a blank textbox instead). Anyway, maybe there's no need for me to replicate this issue for you to figure out what's wrong, since there's another problem with this approach: the column in which the button is placed of course doesn't hold any data, so it's an unbound column -> when I edit a row, there shouldn't be any field about that column in the editing dialog). I asked in a thread how to meet this requirement (  https://www.syncfusion.com/forums/121074/ignore-a-column-field-in-the-grid-editing-form ) and they proposed me a different approach to create that button which doesn't make use of ".ClientSideEvents(eve => { eve.TemplateRefresh("refreshTemplate");". This way, I'm not experiencing any problem with the  dropdownlist creation in the editing dialog. At the moment I'm using this different approach, so we may consider this problem as solved. If I'll need this approach in the future, I'll take my time to create a sample which shows the problem so that you can further look into it, ok? 

Thanks a lot for your kind help!

---

RU Ragavee U S Syncfusion Team November 12, 2015 06:30 AM UTC

Hi Carlo,

Thanks for your update.

We are happy that your requirement is achieved.
Regards,
Ragavee U S.

[Carlo]

Greetings. Unfortunately with this approach the dropdownlist in the edit dialog still fails to be created (as soon as I add .ClientSideEvents(eve => { eve.TemplateRefresh("refreshTemplate"); it fails, and I get a blank textbox instead). Anyway, maybe there's no need for me to replicate this issue for you to figure out what's wrong, since there's another problem with this approach: the column in which the button is placed of course doesn't hold any data, so it's an unbound column -> when I edit a row, there shouldn't be any field about that column in the editing dialog). I asked in a thread how to meet this requirement (  https://www.syncfusion.com/forums/121074/ignore-a-column-field-in-the-grid-editing-form ) and they proposed me a different approach to create that button which doesn't make use of ".ClientSideEvents(eve => { eve.TemplateRefresh("refreshTemplate");". This way, I'm not experiencing any problem with the  dropdownlist creation in the editing dialog. At the moment I'm using this different approach, so we may consider this problem as solved. If I'll need this approach in the future, I'll take my time to create a sample which shows the problem so that you can further look into it, ok? 

Thanks a lot for your kind help!

[Ragavee U S]

Hi Carlo,

Thanks for your update.

We are happy that your requirement is achieved.
Regards,
Ragavee U S.