how to load template for add or edit record in for syncfusion grid in partial view

Question

I have to do when for edit and add record in grid i have to load adding record template in partial view in place of grid view

i. e. in place of grid view i have to load add record template and dont want to show grid and after save click on template i have to load that grid with added new record please suggest solution only using AngularJS

<div ng-controller="LeadListController">
<div class="col-xs-9 col-sm-9 col-lg-9 col-md-9">
    <div id="Grid" ej-grid e-datasource="data" e-allowgrouping="true" e-pagesettings-pagesize="8" e-pagesettings-currentpage="page" e-toolbarsettings-showtoolbar='true' e-toolbarsettings-toolbaritems='tools' e-editsettings-allowdeleting=' true'
        e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowpaging="true" e-beginedit="disableedit" e-sortsettings="sorting"
        e-editsettings-editmode='externalform' e-formposition="bottomLeft" e-editsettings-inlineformtemplateid="#template" e-selectedrowindex="selectedRow" e-allowsorting="true" e-endedit="endedit" e-actionbegin="actionBegin" e-actioncomplete="complete">
        <div e-columns>
            <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="right" e-width="90"></div>
            <div e-column e-field="LastName" e-headertext="Last Name" e-textalign="left" e-width="90"></div>
            <div e-column e-field="FirstName" e-headertext="FirstName" e-textalign="left" e-width="90"></div>
            <div e-column e-field="Title" e-headertext="Title" e-textalign="left" e-width="90"></div>
            <div e-column e-field="City" e-headertext="City" e-textalign="left" e-width="90"></div>
            <div e-column e-field="Country" e-headertext="Country" e-textalign="left" e-width="90"></div>

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

If you have routed the view on editing, then you have to handle the edit operation by user self and the grid will not handle it. is it okay for you? — Madhu, Jun 08 '15 at 05:26
I have not used routing because i dont have to show url in browser addressbar. I have used ng-hide to hide grid and to handle the edit operation by user self i have show another page in place of grid but problem is that when i have back from that edit view then i have to show grid but doesnt work becoz it goes in child controller for edit operation — Gomtesh Hatgine, Jun 08 '15 at 05:57
If possible make a fiddle to show us your problem. http://jsfiddle.net — Madhu, Jun 08 '15 at 06:01
like $scope.back = function () { alert($scope.$parent.gridpage); alert($scope.$parent.leadview); $scope.$parent.leadview = false; $scope.$parent.gridpage = true; }; — Gomtesh Hatgine, Jun 08 '15 at 06:01
i have uploaded code on following link::http://jsfiddle.net/gomteshhatgine/9v4r8opd/ — Gomtesh Hatgine, Jun 08 '15 at 06:13
above problem solved by giving single controller for both views — Gomtesh Hatgine, Jun 08 '15 at 07:00
but when i click on add or edit butoon button is disabled for add form but when i load grid page it will show disabled button for add and edit in grid how to enable that buttons — Gomtesh Hatgine, Jun 08 '15 at 07:02
for this click :: $scope.back = function () { $scope.leadview = false; $scope.gridpage = true; //here i have eenabel that buttons }; — Gomtesh Hatgine, Jun 08 '15 at 07:04
To enable button use the actionBegin event to open the edit template dont use actionComplete and use `args.cancel = true` at the end of function. `
` and function definition `$scope.complete = function (args) { if (args.requestType == "add") { $scope.gridpage = false; $scope.leadview = true; $route.reload(); args.cancel = true; } }` — Madhu, Jun 08 '15 at 07:09
I am still working on to find why child scope not worked, i will let u know once found solution. — Madhu, Jun 08 '15 at 07:10

score 0 · Answer 1 · answered Jun 08 '15 at 08:35

The ng-if create new child scope like ng-include and hence access $scope.$parent.gridpage inside the child controller will search for the gridpage inside the scope created by ng-if and hence its not working.

And so to access the controller scope of the grid, use as follows.

 $scope.back = function () {        
     $scope.$parent.$parent.leadview = false;
     $scope.$parent.$parent.gridpage = true;
     . . . . .

};

how to load template for add or edit record in for syncfusion grid in partial view

1 Answers1