How to change boolean values datatable to understandable values in asp.net MVC?

Question

I've used datatable for showing my data.I want to change boolean values to understandable values for example, in my project I have two columns Gender and IsActive I want to change Gender with values Male and Female and also IsActive column.

@model  IEnumerable<Dentistry.Areas.ViewModels.UserViewModel>


@{
    ViewBag.Title = "مدیریت کاربران";

}

@*<h2>مدیریت کاربران</h2>*@

@section Styles{

    <link href="~/Areas/admin/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Areas/admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap-rtl.css" rel="stylesheet" type="text/css" />
    <link href="~/Areas/admin/assets/global/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css" />
    <link href="~/Areas/admin/assets/global/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css" />
}

<style>
    .table-checkable tr > td:first-child, .table-checkable tr > th:first-child {
        text-align: center;
        max-width: 50000px;
        min-width: 40px;
        padding-right: 0;
        padding-left: 0;
    }
    #delete .modal-header {
        border-bottom: 1px solid #EFEFEF;
        background: #e7505a !important;
    }
    .modal {
        border-radius: 0px;
        -webkit-border-radius : 0px;
        -moz-border-radius: 0px;
    }
</style>


<div class="col-md-12 col-sm-12">
    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet box green">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-cogs"></i>کاربران
            </div>
            <div class="actions">
                <a href="/Admin/Users/Create" data-target="#create" data-toggle="modal" class="btn btn-default btn-sm">
                    <i class="fa fa-plus"></i> کاربر جدید
                </a>
                <a href="javascript:;" class="btn btn-default btn-sm">
                    <i class="fa fa-print"></i> چاپ
                </a>
            </div>
        </div>
        <div class="portlet-body">
            <table class="table table-striped table-bordered table-hover table-checkable order-column myDatatable" id="myDatatable">
                <thead>
                    <tr>
                        @*<th class="table-checkbox">
                                <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="group-checkable" data-set="myDatatable .checkboxes" />
                                    <span></span>
                                </label>
                            </th>*@
                        <th>نام کاربری </th>
                        <th>نام </th>
                        <th>نام خانوادگی</th>
                        <th>جنسیت</th>
                        <th>ایمیل</th>
                        <th>وضعیت</th>
                        <th>شماره تماس</th>
                        <th>آدرس</th>
                        <th>ویرایش</th>
                        <th>حذف</th>
                    </tr>
                </thead>


            </table>
        </div>
    </div>
</div>



<div id="edit" class="modal fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 class="modal-title">ویرایش کاربران</h3>
    </div>
   <div class="modal-body">
        <div class="row">

        </div>
    </div>

</div>

<div id="delete" class="modal fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 class="modal-title">آیا قصد حذف این کاربر را دارید؟</h3>
    </div>
    <div class="modal-body">
        <div class="row">

        </div>
    </div>

</div>

<div id="create" class="modal fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title"><i class="fa fa-user-plus"></i>   کاربر جدید </h4>
    </div>
    <div class="modal-body">


    </div>

</div>

    <!-- BEGIN Portlet PORTLET-->

    <!-- END Portlet PORTLET-->




@section scripts{


    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script src="~/Areas/admin/assets/global/scripts/datatable.js" type="text/javascript"></script>
    <script src="~/Areas/admin/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
    <script src="~/Areas/admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>

    <script src="~/Areas/admin/assets/pages/scripts/table-datatables-managed.min.js" type="text/javascript"></script>
    <!-- END PAGE LEVEL SCRIPTS -->
    <script src="~/Areas/admin/assets/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js" type="text/javascript"></script>
    <script src="~/Areas/admin/assets/global/plugins/bootstrap-modal/js/bootstrap-modal.js" type="text/javascript"></script>

    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="~/Areas/admin/assets/pages/scripts/ui-extended-modals.min.js" type="text/javascript"></script>

    <script>

        $(document).ready(function () {

            var oTable = $('#myDatatable').DataTable({
                "ajax": "/Users/GetUsers",
                "language": {
                    "search": "جستجو:",
                    "lengthMenu": " تعداد _MENU_ رکورد در هر صفحه"
                },
                "autoWidth": true,
                "columns": [

                    { "data": "UserName", },
                    { "data": "FirstName", },
                    { "data": "LastName", },
                    { "data": "Gender", },
                    { "data": "Email", },
                    { "data": "IsActive", },
                    { "data": "PhoneNumber", },
                    { "data": "Address", },

                    {
                        "data": "UserId", "width": "50px", "render": function (data) {
                            //
                            return '<a class="btn btn-info fa fa-pencil" data-toggle="modal" data-dismiss="modal" data-target="#edit"  href="/Admin/Users/Edit/' + data + '"></a>';
                        }
                    },
                    {
                        "data": "UserId", "width": "50px", "render": function (data) {
                            return '<a class="btn btn-danger fa fa-trash" data-toggle="modal" data-dismiss="modal" data-target="#delete" href="/Admin/Users/Delete/' + data + '"></a>';
                        }
                    }
                ]

            });

            $('body').on('hidden.bs.modal', '.modal', function () {

                $(this).removeData('bs.modal');
            });

        });


    </script>
}

check my answer. You can do without adding new property through data table columndef option — jignesh patel
– jignesh patel, Commented Jul 24, 2017 at 18:37

jignesh patel · Accepted Answer · 2017-07-24 18:36:32Z

1

You can set value in columndef for gender and isactive columns. Here is sample for isactive column. Add same for gender column under columndef array.

    "columnDefs": [
        {
                            "render": function ( data, type, row ) {
                return data?'Yes':'No';
            },
           "targets": 0 // replace 0 by your column if
         }
     ]

edited Jul 24, 2017 at 18:36

answered Jul 24, 2017 at 18:28

jignesh patel

9827 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simon · Accepted Answer · 2017-07-24 18:28:52Z

1

You can add properties to your model. Something like this:

    public string isActiveString
    {
        // Note that this is inverted!
        get { return IsActive ? "Yes" : "No"; }
    }

    public string GenderString
    {
        // Note that this is inverted!
        get { return Gender ? "Male" : "Female"; }
    }

answered Jul 24, 2017 at 18:28

Simon

7844 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to change boolean values datatable to understandable values in asp.net MVC?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related