CODEWITHSUNDEEP
jqueryreactjspersianshieldui
Yeganeh Salami
Yeganeh Salami

Reputation: 595

Using Shield UI Grid with ReactJS

I have used Shield UI grid in Reactjs component like this :

class Grid extends Component {

  componentDidMount() {

    $("#grid").shieldGrid({
        dataSource: {
            remote: {
                read: "http://jsonplaceholder.typicode.com/todos",
                modify: {
                    create: {
                        url: "/gridData/EmployeeCreate",
                        type: "post",
                        data: function (edited) {
                            return {
                                userId: edited[0].data.userId,
                                id: edited[0].data.id,
                                title: edited[0].data.title,
                                completed: edited[0].data.completed
                            };
                        }
                    },
                    update: {
                        url: "/employees/EmployeeUpdate",
                        type: "post",
                        data: function (edited) {
                            return { 
                                userId: edited[0].data.userId,
                                id: edited[0].data.id,
                                title: edited[0].data.title,
                                completed: edited[0].data.completed
                            };
                        }
                    },
                    remove: {
                        url: "/employees/EmployeeRemove",
                        type: "post",
                        data: function (removed) {
                            return { ID: removed[0].data.userId };
                        }
                    }
                }
            },
            schema: {
                fields: {
                    userId: { path: "userId", type: String },
                    id: { path: "id", type: String },
                    title: { path: "title", type: String },
                    completed: { path: "completed", type: Boolean }
                }
            },
            group:[{ field: "id", order: "desc" }],
        },
        paging: {
            pageSize: 10,
            messages: {
                infoBarTemplate: "{0} - {1} از {2} رکورد"
            }
        },
        rowHover: false,
        columns: [
            { field: "id", title: "id", width: "100px" },
            { field: "userId", title: "userId"},
            { field: "title", title: "title" },
            { field: "completed", title: "completed" },
            {
                width: 150,
                title: " ",
                buttons: [
                    { commandName: "edit", caption: "ویرایش" },
                    { commandName: "delete", caption: "حذف" }
                ]
            }
        ],
        editing: {
            enabled: true,
            mode: "popup",
            confirmation: {
                "delete": {
                    enabled: true,
                    template: function (item) {
                        return "Delete product with name '" + item.id + "'?";
                    }
                }
            }
        },
        toolbar: [
            {
                buttons: [
                    { commandName: "insert", caption: "+ جدید" }
                ],
                position: "top"
            }
        ],
            grouping: {
            showGroupHeader: true,
            allowDragToGroup: true,
            message: "برای گروهبندی ستونی را انتخاب کنید"
        },
        scrolling: true,
        resizing: true,
        sorting:true
    });

    var dataSource = $("#grid").swidget().dataSource,
            input = $("#filterbox input"),
            timeout,
            value;
        input.on("keydown", function () {
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                value = input.val();
                if (value) {
                    dataSource.filter = {
                        or: [
                            { path: "id", filter: "contains", value: value },
                            { path: "userId", filter: "contains", value: value },
                            { path: "title", filter: "contains", value: value },
                            { path: "completed", filter: "contains", value: value }
                        ]
                    };
                }
                else {
                    dataSource.filter = null;
                }
                dataSource.read();
            }, 300);
    });
    }

  render() {

    return (
        <div className="sui-rtl">
            <div id="filterbox">
                <input type="text" placeholder="جستجو کنید..."/>
            </div>
            <div id="grid">111</div>
        </div>
    );
  }
}

export default Grid;

Everything works fine, but I want to convert from English numerals to Persian numerals. I modified the code converting in componentDidMount but nothing changed.

how can I convert English numerals to Persian numerals?

Upvotes: 1

Views: 362

Answers (2)

Vladimir Georgiev
Vladimir Georgiev

Reputation: 1949

You can use the pageLabelTemplate property to convert a page number to a Persian string like this:

$("#grid").shieldGrid({
    paging: {
        pageSize: 20,
        messages: {
            pageLabelTemplate: function(num) {
                return "Persian " + num;
            }
        }
    }
});

Upvotes: 0

tirdadc
tirdadc

Reputation: 4713

You have a bunch of utility functions on this Stack Overflow questions to do this:

how to replace numbers in body to persian numbers?

And you also have this library that provides a helper function for this purpose:

https://github.com/usablica/persian.js

Upvotes: 1

Related Questions