This is a migrated thread and some comments may be shown as answers.

Use search field to populate ListView

12 Answers 439 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
King Wilder
Top achievements
Rank 2
King Wilder asked on 05 Jan 2013, 07:38 PM
In my mobile application I've added a textbox for a searchTerm and a button.  I want to use this to return a dataset for this query and display the results in the ListView.

My problem is that when I use the Kendo Datasource object, no parameters are sent with the request.

Here's is my javascript code:

var validator,
    productViewModel = kendo.observable({
        productDataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/api/products/search",
                    dataType: "json",
                    data: {
                        filterBy: function () {
                            return "ProductName";
                        },
                        searchTerm: function(){
                            return $("#searchTerm").val();
                        },
                        shared: function () {
                            return false;
                        },
                        groupId: function () {
                            return null;
                        }
                    }
                },
                parameterMap: function (options, operation) {
                    return kendo.stringify(options);
                }
            },
            batch: false,
            pageSize: 10,
            schema: {
                data: "Data",
                total: "Total"
            }
        }),
        selectedproduct: {},
        showDetails: function (e) {
            var product = productViewModel.productDataSource.get(e.context);
            productViewModel.set("selectedproduct", product);
            app.navigate("#product-details");
        }
    });
 
 
$("#search-button").click(function () {
    var searchTerm = $("#searchTerm").val();
    var $searchMsg = $("#search-message");
 
    if (searchTerm == "") {
        $searchMsg.html("You must enter a search value.");
        return;
    }
 
    productViewModel.productDataSource.read();
});
Here's what the request looks like in Firebug:

http://localhost:64060/api/products/search?{}
This is what it should look like:

http://localhost:64060/api/products/search?filterBy=ProductName&searchTerm=&shared=false&groupId=
Here's my HTML code:

<div data-role="view" id="products-listview" data-title="products" data-model="productViewModel" data-layout="databinding">
    <ul data-role="listview" data-style="inset">
        <li>
            Search For: <input id="searchTerm" class="km-text" />
        </li>
    </ul>
    <div id="search-message"></div>             
    <a class="km-button" data-role="button" id="search-button"><span class="km-text">Search</span></a
    <ul id="flat-products-listview" data-role="listview" data-style="inset" data-template="productsListviewTemplate" data-model="productViewModel">
    </ul>
</div>
 
<script type="text/x-kendo-template" id="productsListviewTemplate">
    <a href="\#product-details?id=#= Id #" class="km-listview-link">#= ProductName #</a>
</script>
Any thoughts?

BTW, json data is returned, but it's all the data, not the requested data, and I haven't figured out how to get the data to populate the ListView, so the ListView is blank.

Thanks,

King Wilder

12 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 08 Jan 2013, 04:47 PM
Hi King,

I am not sure where exactly the problem comes from. As an assumption, please set the type of the Ajax request to "GET". In addition, try to modify the request parameters in the parameter map.

Another issue that I noticed is that you are using the DOM click event. Although that this will work on desktop browsers it will cause problem on mobile devices. Please use the click event of the button widget as it is optimized for touch gestures.

What do you mean by "I haven't figured out how to get the data to populate the ListView, so the ListView is blank."?
Are you asking how to get that part of the JSON response which contains the records? If that is the case, please specify the field name in schema.data configuration option.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
King Wilder
Top achievements
Rank 2
answered on 08 Jan 2013, 06:27 PM
Alexander,

Testing with the parameterMap function I found that I had to change the original datasource read properties to this in order for values to be returned:

read: {
    url: "/api/products/search",
    dataType: "json",
    type: "GET",
    data: {
        filterBy: "ProductName",
        searchTerm: $("#searchTerm").val(),
        shared: false,
        groupId: null
    }
},
Notice I removed the anonymous functions.  But the $("#searchTerm").val() doesn't return anything.

I'm going incrementally here, so I want to get this part working before proceeding to your other suggestions.

Any thoughts on why the search term is coming back empty?  It works in the MVC index.cshtml view, but not with the mobile view.

Thanks,

King Wilder
0
King Wilder
Top achievements
Rank 2
answered on 08 Jan 2013, 09:22 PM
Alexander,

Regarding "the data not populating the ListView" issue, the Json data is being returned successfully, but again it's all the data and not the requested data.

Here's the HTML code:

<div data-role="view" id="products-listview" data-title="products" data-model="productViewModel" data-layout="databinding">
    <ul data-role="listview" data-style="inset">
        <li>
            Search For: <input id="searchTerm" class="km-text" />
        </li>
    </ul>
    <div id="search-message"></div>             
    <a class="km-button" data-role="button" id="search-button"><span class="km-text">Search</span></a
    <ul id="flat-products-listview" data-role="listview" data-style="inset" data-template="productsListviewTemplate" data-model="productViewModel">
    </ul>
</div>
 
<script type="text/x-kendo-template" id="productsListviewTemplate">
    <a href="\#product-details?id=#= Id #" class="km-listview-link">#= WebSiteName #</a>
</script>
0
Alexander Valchev
Telerik team
answered on 10 Jan 2013, 05:03 PM
Hi King,

Please modify the request parameters in the parameter map function.
parameterMap: function(options, operation) {
    options.searchBy = "ProductName";
    options.searchTerm = $("#searchTerm").val();
    //etc...
    return kendo.stringify(options);
}

Regarding your second issue, if I understood correctly you would like to filter on the server - the ListView widget will display the data which is returned from the server response. I believe that once the parameters are send correctly this issue will be fixed as well.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
King Wilder
Top achievements
Rank 2
answered on 10 Jan 2013, 10:37 PM
Hi Alexander,

I tried your suggestion and it also didn't work, but I did get it to work so it now displays a list of search results properly.

Here's my change to the javascript file:
var psTemplate = kendo.template($("#productsListviewTemplate").html());
 
var validator;
var productDS = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/api/product",
            dataType: "json",
            type: "GET",
            data: {
                filterBy: function () {
                    return "ProductName";
                },
                searchTerm: function () {
                    return $("#searchTerm").val();
                },
                shared: function () {
                    return false;
                },
                groupId: function () {
                    return null;
                }
            }
        }
        //,
        //parameterMap: function (options, operation) {
        // Begin Attempt #2
        //    //options.filterBy = "ProductName";
        //    //options.searchTerm = $("#searchTerm").val();
        //    //options.shared = false;
        //    //options.groupId = null;
 
        //    return kendo.stringify(options);
        // End Attempt #2
 
        // Begin Attempt #1
        //    //return {
        //    //    filterBy: "ProductName",
        //    //    searchTerm: $("#searchTerm").val(),
        //    //    shared: false,
        //    //    groupId: null
        //    //}
        // End Attempt #1
        //}
    },
    pageSize: 10,
    schema: {
        data: "Data",
        total: "Total",
        model: {
            id: "Id",
            fields: {
                Id: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                Details: { type: "string" },
                Group: { defaultValue: { GroupId: 0, GroupName: "" } }
            }
        }
    },
    change: function (e) {
        if (this.view()[0]) {
            $("#flat-products-listview").html(kendo.render(psTemplate, this.view()));
        }
    }
});
 
 
var productViewModel = kendo.observable({
    productDataSource: productDS,
    selectedProduct: {},
    showDetails: function (e) {
        var product = productViewModel.productDataSource.get(e.context);
        productViewModel.set("selectedProduct", product);
        app.navigate("#product-details?id=" + product.Id);
    }
});
 
 
$("#search-button").click(function () {
    var searchTerm = $("#searchTerm").val();
    var $searchMsg = $("#search-message");
    $searchMsg.hide();
 
    if (searchTerm == "") {
        $searchMsg.html("You must enter a search value.");
        $searchMsg.show();
        return;
    }
 
    productDS.read();
});
The frustrating problem I'm having now is that when I click on one of the results items, I get a 404.  I'm doing all this in Firefox, and when I hover over a list item, I see the following link path:
http://localhost:50958/Mobile/index.html#product-details?Id=15
But when I click it, it shows that this is the link reference:
http://localhost:50958/Mobile/product-details?Id=15
I've attached a number of screenshots to help you see what's going on, and I've also uploaded a sample project with this issue.

http://www.kingwilder.com/downloads/kendouimobilesearch.zip

I know I'm doing something stupid, so you can slap me upside my head if we ever meet, but in the meantime, any help with this is appreciated.

Thanks,

King Wilder
0
Alexander Valchev
Telerik team
answered on 14 Jan 2013, 12:42 PM
Hi King,

The last problem which you described is a bug in the official release. Issue is related to multiple parameters being passed to the local view and is already fixed in the latest internal build (2012.3.1304). Please upgrade your KendoUI resources and let me know if the problem still persists.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
King Wilder
Top achievements
Rank 2
answered on 14 Jan 2013, 06:05 PM
Alexander,

A couple questions:

  1. New version - is this new version for the KendoUI MVC Wrappers, or just the widgets?  When I do the Upgrade Wizard in VS 2012, it says I'm up-to-date with v2012.3.1114.
  2. Url issue - will this new KendoUI version fix the issue I'm having with the link references?

I'm still having problems where this is the link as it appears when I put my mouse over it (which is correct):

http://localhost:50958/Mobile/index.html#product-details?Id=15
And this is what is sent to the server which returns a 404:
http://localhost:50958/Mobile/product-details?Id=15
Can you tell me what causes this issue?  Why does the "index.html" get chopped off?

Thanks,

King Wilder
0
Alexander Valchev
Telerik team
answered on 16 Jan 2013, 12:07 PM
Hello King,

Internal builds and Service Pack releases are available for all KendoUI products - complete, web, dataviz, mobile and wrappers. You can either download the latter build from your account page or turn on "last version retrieval option" in Telerik VSExtensions settings (please see the screen shot).

Can you tell me what causes this issue?  Why does the "index.html" get chopped off?

As I explained in my previous reply the URL issue is caused by a bug in the official release. The solution is to upgrade. My recommendation is to wait till the end of the day, when the Q3 Service Pack release will be available for download. 

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Lito
Top achievements
Rank 1
answered on 17 Jan 2013, 09:14 PM
Hi King,

That is exactly what I want to do, but I am a newbie and I don't know where to start. I need to modify the ListView widget so that I am able to search and display the results of the search.

Would you mind sharing the code with me?

Thanks.

Lito
lito.saulo@gmail.com
0
King Wilder
Top achievements
Rank 2
answered on 17 Jan 2013, 09:28 PM
Lito,

I've updated the version I previously uploaded, and it works, for the most part.  Some of the CRUD operations aren't working as I would like, but I'll try to get some help from the Kendo team to fix them.

In the meantime you can download the working project from here: http://www.kingwilder.com/downloads/kendouimobilesearch.zip - 15.5 MB - VS 2012 project

When you launch the project in a browser, go to /mobile/index.html.

Thanks,

King Wilder
0
King Wilder
Top achievements
Rank 2
answered on 17 Jan 2013, 10:49 PM
Alexander,

Yes that Update worked to fix the issue of chopping off the file name from the Url.

For the most part I got this little Mobile search project working, but I've incorporated some CRUD operations into it to emulate a project I will be building shortly and I followed your Mobile-CRUD.html app demo.

I'm having two issues I'm struggling with right now:

  1.  Datasource not refreshing
  2.  Formatting Price for currency
I've created a short screencast to demonstrate the issues working in the application.  http://www.screencast.com/t/B9eOKgQRF - 4 minutes

You can also download the working VS 2012 Project here: http://www.kingwilder.com/downloads/kendouimobilesearch.zip

DataSource not refreshing
When I view the details of a Product, I will always see that first product that I selected no matter which future product details I view.

Currency formatting
I tried a number of different things to get the Price, which is a decimal to be displayed as a currency number with a $.  I had no luck.

Here is the markup for the product details where I want the price as a currency.

<div data-role="view" id="product-details" data-title="Product Details" data-layout="databinding" data-model="productViewModel.selectedProduct">
    <header data-role="header">
        <div data-role="navbar">
            <a data-align="left" data-role="button" class="nav-button" href="#products-listview">Back</a>
            <span data-role="title">Product Details</span>
        </div>
    </header>
    <ul data-role="listview" data-style="inset" id="details-view">
        <li>Product Name: <span data-bind="text: ProductName"></span></li>
        <li>Description: <span data-bind="text: Description"></span></li>
        <li>Price: <span data-bind="text: Price"></span></li>
        <li>Group: <span data-bind="text: GroupName"></span></li>
    </ul>
</div>
It displays as a decimal, which is fine, but I want the currency symbol.  I've tried this, and it also didn't work:

<ul data-role="listview" data-style="inset" id="details-view">
    <li>Product Name: <span data-bind="text: ProductName"></span></li>
    <li>Description: <span data-bind="text: Description"></span></li>
    <li>Price: <span>#: kendo.toString(get("Price"), "C") #</span></li>
    <li>Group: <span data-bind="text: GroupName"></span></li>
</ul>
I've tried it without the "get()" and I've also built a template for this hoping that that would work, but it didn't.

Any help with these issues is appreciated.

Also, as I mention in my screencast, I would like to know the concept of what is happening with the datasource refreshing issue as well as a solution.  If I get a better grasp of the concept of what's going on with the DataSource, or whatever the object is that is controlling this, the better it will be for me to understand this in the future.

Thanks,

King Wilder
0
Lito
Top achievements
Rank 1
answered on 18 Jan 2013, 09:57 PM
Thanks very much, King. I will check it out.
Tags
ListView (Mobile)
Asked by
King Wilder
Top achievements
Rank 2
Answers by
Alexander Valchev
Telerik team
King Wilder
Top achievements
Rank 2
Lito
Top achievements
Rank 1
Share this question
or