locked
LightSwitch HTML Client With Jqgrid RRS feed

  • Question

  • Hi ,

    I'm new to Lightswitch and trying to implement jqgrid in light switch HTML client 2013.

    However got stuck with the custom control showing no output.Here is what i did.

    1.I made a web api that returns the Json data.

    2.In Lightswitch application i refrenced the below js/css files

    jquery.jqGrid.min.js

    grid.locale-en.js

    jquery-ui-1.9.0.custom.min.css

    ui.jqgrid.css

    2. i created a custom control in Lightswitch And edited the render code.

    3. added below code to this.

    myapp.ScreenName.CustomControlname_render = function (element, contentItem) {
        // Write code here.
        $(document).ready(function (){
            var table=$('<table id="grid"/>');
            var div = $('<div id="grid-pager"></div>');
    
            $("#grid").jqGrid({
                url: <web api Url>,
                ajaxGridOptions: { cache: false },
                datatype: 'json',
                mtype: "GET",
                colNames: ['Function Name', 'Category', 'Time'],
                colModel: [
                    { name: 'Name', index: 'Name', align: 'left' },
                    { name: 'Category', index: 'Category', align: 'center' },
                    { name: 'Price', index: 'Price', align: 'center' }
                ],
                pager: $('#grid-pager'),
                toppager: true,
                rowNum: 5,
                rownumbers: true,
                rowList: [5, 10, 20, 50],
                autowidth: true,
                height: 'auto',
                altRows: true,
                altclass: 'zebra',
                caption: 'FUNCTION LIST'
            }).navGrid('#grid_toppager', { edit: false, add: false, del: false, refresh: true, search: false })
    
        })
        
    };

    when i run the application in I.E, no data appears for the custom control...

    so i have two question.

    1.Can we intergrate jqgrid with lightswitch?

    2.if yes what have i missed?

    I Thought there could be an conflict in different JS files of lightswitch and jqgrid so below are

    Other default lightswitch js/css files in default.htm  for reference

    jquery.mobile.structure-1.3.0.min.css

    jquery-1.9.1.min.js

    jquery.mobile-1.3.0.min.js

    ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js


    reagrds PriyaMat


    reagrds PriyaMat

    Monday, May 12, 2014 1:59 PM

All replies

  • You have some basic things wrong as to using LightSwitch events and jQuery.

    myapp.ScreenName.CustomControlname_render = function (element, contentItem) {
        // Write code here.
        $(document).ready(function (){
            var table=$('<table id="grid"/>');
            var div = $('<div id="grid-pager"></div>');
    
    table.appendTo($(element));
    div.appendTo($(element));
    
            $("#grid").jqGrid({
                url: <web api Url>,
                ajaxGridOptions: { cache: false },
                datatype: 'json',
                mtype: "GET",
                colNames: ['Function Name', 'Category', 'Time'],
                colModel: [
                    { name: 'Name', index: 'Name', align: 'left' },
                    { name: 'Category', index: 'Category', align: 'center' },
                    { name: 'Price', index: 'Price', align: 'center' }
                ],
                pager: $('#grid-pager'),
                toppager: true,
                rowNum: 5,
                rownumbers: true,
                rowList: [5, 10, 20, 50],
                autowidth: true,
                height: 'auto',
                altRows: true,
                altclass: 'zebra',
                caption: 'FUNCTION LIST'
            }).navGrid('#grid_toppager', { edit: false, add: false, del: false, refresh: true, search: false })
    
        })
        
    };

    You never added your elements to the DOM.

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Tuesday, May 13, 2014 9:42 AM
  • Hi Dave,

    i eventually figured that out and added my element to DOM,

    still no result ..

    updated script is as below

           
    myapp.ScreenName.CustomControlname_render = function (element, contentItem) {
        // Write code here.
        $(document).ready(function (){
            var table=$('<table id="grid"/>');
            var div = $('<div id="grid-pager"></div>');
    
    table.appendTo($(element));
    div.appendTo($(element));
    
            $("#grid").jqGrid({
                url: <web api Url>,
                ajaxGridOptions: { cache: false },
                datatype: 'json',
                mtype: "GET",
                colNames: ['Function Name', 'Category', 'Time'],
                colModel: [
                    { name: 'Name', index: 'Name', align: 'left' },
                    { name: 'Category', index: 'Category', align: 'center' },
                    { name: 'Price', index: 'Price', align: 'center' }
                ],
                pager: $('#grid-pager'),
                toppager: true,
                rowNum: 5,
                rownumbers: true,
                rowList: [5, 10, 20, 50],
                autowidth: true,
                height: 'auto',
                altRows: true,
                altclass: 'zebra',
                caption: 'FUNCTION LIST'
            }).navGrid('#grid_toppager', { edit: false, add: false, del: false, refresh: true, search: false });
    mytables.appendTo($(element));
            mydivs.appendTo($(element)); }) };



    Regards PriyaMat


    • Edited by PriyaMat Tuesday, May 13, 2014 1:40 PM
    Tuesday, May 13, 2014 1:35 PM
  • Hi,

    You don't want '$(document).ready(function (){'.

    What is your web api url? Can you verify that it works and show a screen shot of what you see rendered for your screen.

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Tuesday, May 13, 2014 1:41 PM
  • yes,

    The web api displays data.

    i used below code to test it and it displays data.

    var myTable = $('<table class="ui-responsive table-stroke" data-role="table" />');
        var myHeader = $('<thead><tr><th>Function</th><th>Category</th><th>Time</th></tr></thead>');
        var myBody = $('<tbody/>');
    
        myHeader.appendTo($(myTable));
        myBody.appendTo($(myTable));
    
    
    
           
        $.getJSON("<web api url>",
               function (data) {
                   if (data != null) {
                       
                       $.each(data, function (key, item) {
                          
                           var myRow = $("<tr/>");
                           $("<td/>").text(item.Name).appendTo($(myRow));
                           $("<td/>").text(item.Category).appendTo($(myRow));
                           $("<td/>").text(item.Price).appendTo($(myRow));
                           myRow.appendTo($(myTable));
                       });
                   }
               })
    
        myTable.appendTo($(element));

    this code is in the same screen js file for different custom control render method.below is the output.The first section where table is displaying functions is from above code.

    The below section with grid place holder ,is where jqgrid is supposed to show.


    regards PriyaMat


    • Edited by PriyaMat Tuesday, May 13, 2014 2:59 PM
    Tuesday, May 13, 2014 2:58 PM