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. Image for the cookie policy date

gridview example in angualar js

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.

5 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team August 6, 2015 12:58 PM UTC

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


BB Bharat Buddhadev August 7, 2015 10:58 AM UTC

 .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. 





PK Prasanna Kumar Viswanathan Syncfusion Team August 8, 2015 12:21 PM UTC

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


BB Bharat Buddhadev August 10, 2015 05:28 AM UTC


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


PK Prasanna Kumar Viswanathan Syncfusion Team August 10, 2015 04:40 PM UTC

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

Loader.
Up arrow icon