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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Conditional template column with a button in a grid

Thread ID:

Created:

Updated:

Platform:

Replies:

121030 Nov 4,2015 08:07 AM UTC Nov 12,2015 06:30 AM UTC ASP.NET MVC 5
loading
Tags: Grid
Carlo
Asked On November 4, 2015 08:07 AM UTC

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 [Syncfusion]
Replied On November 5, 2015 10:48 AM UTC

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
Replied On November 9, 2015 09:32 AM UTC

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 [Syncfusion]
Replied On November 10, 2015 11:36 AM UTC

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



Carlo
Replied On 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!

Ragavee U S [Syncfusion]
Replied On 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.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;