Selection and Click event in Client Detail Template

2 posts, 0 answers
  1. Makesh
    Makesh avatar
    3 posts
    Member since:
    Sep 2013

    Posted 12 Nov 2015 Link to this post

    Hi,

     I have a Grid with client detail template. The grid  has only one column to display and the client detail template is given below

     <script id="client-template" type="x-kendo-template">

        <div onclick="OnDivClick" class="row">
            <div class="col-lg-2 col-md-3 col-sm-12">
                <div class="form-group">
                    <label>First Name</label>
                    <p>#: FirstName #</p>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-12">
                <div class="form-group">
                    <label>Last Name</label>
                    <p>#: LastName #</p>
                </div>
            </div>
            <div class="col-lg-1 col-md-3 col-sm-12">
                <div class="form-group">
                    <label>Inhouse</label>
                    <p>#: Inhouse #</p>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-12">
                <div class="form-group">
                    <label>Company Name</label>
                    <p>#: CompnayName #</p>
                </div>
            </div>
            <div class="col-lg-1 col-md-3 col-sm-12">
                <div class="form-group">
                    <label>SAN</label>
                    <p>#: StateAccountNumber #</p>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-12">
                <div class="form-group">
                    <label>Location Number</label>
                    <p>#: LocationNumber #</p>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-12">
                <div class="form-group">
                    <label>Last Activity Date</label>
                    <p>#: LastActivityDate #</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-12">
                <div class="form-group">
                    <label>First Name from Payroll</label>
                    <p>#: ClaimentFirstName #</p>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-12">
                <div class="form-group">
                    <label>Last Name from Payroll</label>
                    <p>#: ClaimentLastName #</p>
                </div>
            </div>
            <div class="col-lg-8 col-sm-12 col-md-6">
                <button class="btn btn-success col-lg-offset-11 col-md-offset-9">Select</button>
            </div>       
        </div>

    </script>

     

    I need to select both row and client detail template of the row when we click in the client detail template area or click the button inside the client detail template.

    For this I have used the onclick event of the div. But it is not working.

    Also I need to get the row data when we click in the client detail template area or click the button inside the client detail template.

    Can any one provide the solution for this .

  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 16 Nov 2015 Link to this post

    Hello Makesh,

    To achieve the desired functionality you need to change the code snippets as following:
    <script id="client-template" type="x-kendo-template">
       <div onclick="OnDivClick(this);" class="row">
           <div class="col-lg-2 col-md-3 col-sm-12">

    Then in the OnDivClick handler you can use following code snippet in order to select the parent row and to get underlying data item:
    function OnDivClick(sender) {
            var gridRow = $(sender).parent().parent().prev();
            var grid = $("#MyGrid").data("kendoGrid");
            grid.select(gridRow);
            var dataTtem = grid.dataItem(gridRow);
            alert(dataTtem.ProductName);
        }

    More information about used methods you can find here:
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid?#methods-select
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid?#methods-dataItem

    Additionally I am sending you a simple example which demonstrates the desired functionality. Please check it out and let me know if it helps you.

    Looking forward for your reply.

    Regards,
    Radoslav
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top