gridview example in angualar js

[Bharat Buddhadev]

Hello Thanks for your previous reply

I required example of eJGrid with angular js with mvc 

should contains data binding with json data and dynamic data.

If possible provide features with cutomisation of gridview.

[Prasanna Kumar Viswanathan]

Hi Bharat,

Thanks for using Syncfusion products.

According to your requirement, we have created a sample in AngularJS in MVC. Please find the below code example:

<div ng-app="employeeView">

    <div ng-controller="GridCtrl">

        <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowsorting="true" e-allowPaging="true" e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools">

            <div e-columns>

                <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true" e-textalign="right"></div>

                <div e-column e-field="LastName" e-headertext="Last Name" e-textalign="right"></div>

                <div e-column e-field="FirstName" e-headertext="First Name" e-textalign="right"></div>

                <div e-column e-field="Title" e-headertext="Title" e-textalign="right"></div>

                <div e-column e-field="City" e-headertext="City" e-textalign="right"></div>

                <div e-column e-field="Country" e-headertext="Country" e-textalign="right"></div>

            </div>

        </div>

    </div>
</div>

-------------------------------------------------------------------

angular.module('employeeView', ['ejangular'])

        .controller('GridCtrl', function ($scope) {

            $scope.tools = ["add", "edit", "delete", "update", "cancel"];

            $scope.page = 2;

            $scope.data = obj;
        });

Please find the attached sample in the below link:

Sample Link : http://www.syncfusion.com/downloads/support/forum/119827/ze/ServerOperations-1690059200

For more reference, please find the online sample from the below link:

Link : http://mvc.syncfusion.com/demos/web/angularsupport/grid

Link : http://mvc.syncfusion.com/demos/web/grid/comprehensiveangular

Query : “customisation of gridview.”

Please provide us more information regarding the query which will be helpful for us to provide better solution.


Please let me know if you need any further assistance.

Regards,
Prasanna Kumar N.S.V

[Bharat Buddhadev]

 .ResizeSettings(resize =>

        {
            resize.ResizeToFit((bool)ViewData["ResizeToFit"]);
            resize.ClipContent((bool)ViewData["ClipContent"]);
        })

<div ng-controller="cmisDataController" id="grid" ej-grid e-datasource="data" e-columns="columns" class="gridStyle" e-allowresizing="true" e-resizesettings-clipcontent="true"></div>

1)  I want to apply resize setting using angular.js but after render I can make my column very very small can you provide example with angular js.

     so i can fix the column size at some level.

2) I want to display scrollbar on column when content is bigger.

http://mvc.syncfusion.com/demos/ui/grid/RowsandColumns/AutoWrapColumnCells?AllowAutoWrap=false&ResizeToFit=false&ClipContent=true

like provided example in javascript but its not working in angula js. 

[Prasanna Kumar Viswanathan]

Hi Bharat,

Thanks for the update.

By analyzing the provided code, we found that it is related to the Grid (Classic) control. So, could you please confirm us your platform details (Grid Classic or Grid MVC) with us?


Please let me know if you need any further assistance.

Regards,
Prasanna Kumar N.S.V

[Bharat Buddhadev]

So I want to set column  minimum width of column at some level resizing of column should stop.

                Please refere this video for better understanding.

                                                   http://screencast.com/t/tVDGRBWG

http://mvc.syncfusion.com/demos/ui/grid/RowsandColumns/AutoWrapColumnCells?AllowAutoWrap=false&ResizeToFit=false&ClipContent=true

 In this link clip content working properly.

http://jsplayground.syncfusion.com/r34cp1t0 

In this link clip content not working

So this property clicpcontent not working in angular js. 

Its a classic grid or mvc grid I have not idea my purpose is to run gridview angular js with minimum widhth of each column so its should not be small after some level

I am urgently waiting for your reply and aspecting answer today.

Thank you in advance

Attachment: New_folder_(2)_c8ab0ca7.rar

[Prasanna Kumar Viswanathan]

Hi Bharat,

Thanks for the update.

We have analyzed your requirement for “Resizing of column should be stop at some level” . Since this feature is available in Grid(Classic), but it is not available in Grid MVC, we consider this to be a feature request. So we have created a new incident #142549 for the feature.

For your convenience we created a workaround sample and update the response in #142549. So, Please follow the incident #142549 for further updates.

Regards,
Prasanna Kumar N.S.V