CODEWITHSUNDEEP
kendo-ui
DropHit
DropHit

Reputation: 1724

Kendo mobile view parameters

I have a a basic kendo view and am wondering if there is a way to access the view.params without using the data-show or data-init to run a js OR if i do use the current functon call on data-show how can i dynamically populate the data elements of my EDIT button?

<!-- eventDetail view -------------------------------------------------------------------------------------------------->
<div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="left" data-role="button" class="nav-button" href="#view-myEvents">Back</a>
            <a data-align="right" data-role="button" class="nav-button" data-click="showEventUpdate" data-event_id="view.params.event_id" data-user_id="view.params.user_id">Edit</a>
        </div>
    </header>

    <div id="eventDetail"></div>
</div>

Upvotes: 1

Views: 4213

Answers (1)

DropHit
DropHit

Reputation: 1724

The best method i have found so far (access view parameters in view) is to use the Kendo ViewModel method - MVVM - and the template - pulling in the view.params from a querystring click:

 <a data-role="button" href="#view-Home?userID=2&userType=1&trainerID=2">

Then call a script via the data-show or data-init method of the view and bind the viewModel: 

<!-- =========================================================================================== Home page -->
    <div data-role="view" id="view-Home" data-title="Home" data-show="checkAuth" data-model="home_viewModel" >

        <div id="homeWrapper">

            <div id="myTrainerInfo" data-template="myTrainerIcon-template" data-bind="source: user_info" ></div>

    </div>


    <!-- ========================================================================================= Home script -->
    <script>

            //init the viewmodel            
            var home_viewModel = kendo.observable({
                user_info: []

            });


        function checkAuth(e) {
            var userID = e.view.params.userID;
            var userType = e.view.params.userType;
            var trainerID = e.view.params.trainerID;

            var userData = {userID:userID,userType:userType,trainerID:trainerID};


            //set the viewmodel data
            home_viewModel.set("user_info", userData);


        }           

    </script>

The vars can then be accessed via ${var_name} or via HTML data-bind="value: var_name":

        <!-- ============================================================================== myTrainerIcon template -->
    <script id="myTrainerIcon-template" type="text/x-kendo-template">

        <div id="myTrainerIcon" class="homePageIcons">
            <a data-role="button" href="\\#view-trainerDetail?user_id=${userID}&amp;trainer_id=${trainerID}">
                <img src = "styles/icons/myTrainerICON.png" alt="myTrainer" />
            </a>
            <div class = "icon-text" >myTrainer</div>
        </div>
<div>TrainerID: <input name="edit_id" id="edit_id" data-min="true" class="k-input" data-bind="value:     trainerID" type="text" /></div>
    </script>

Im sure there is a different way to do this but so far nothing i have discovered on my own..

Upvotes: 10

Related Questions